導航:首頁 > 萬維百科 > 網頁圖標設計評判

網頁圖標設計評判

發布時間:2021-02-11 16:58:09

1、網頁美工切圖設計有哪些要點

如何做好網頁美工設計,對於新手而言,這還有些小小的難度,尤其是當網頁美工設計由幾個人接手的時候。不過,其實只要掌握好幾點,網頁美工設計其實也不是十分困難的一件事。

在網頁美工切圖設計之前,我們先基於ps進行新建文件設置,在設置的時候需要注意以下幾點:

1.一定要做好網頁寬度的設置設計,一般網頁寬度有760PX、900PX、1000PX等,最好不要超過1200PX的寬度,高度沒有限制。大多數做網站的公司都有一個比較合理的標准。

2.作為網頁背景、網頁圖標的要清晰,在網站設計的時候比較注重。所以在切圖的時候不要切出來的效果與設計的效果相差太大。

3.有特效地方,有必要設計出特效樣式,以便DIV CSS製作的時候切圖使用。

4.在做成網頁後可改變的文字,需要使用宋體、黑體無需修飾

5.細節一定要對齊

美工圖設計好後要注意的兩點:

1.導出JPGGIFPNG等格式觀察效果。

2.不要合層,盡量保持每個文字圖標圖片都有獨立圖層,這樣在DIV CSS切圖時方便隱藏顯示切圖。

在新建設置之後,就要開始進行網頁美工設計了,在網頁美工設計的過程中要注意:

1. 注意頁面的分塊,著手設計一個頁面的時候,你必須根據所掌握的內容,以及其風格,對頁面的整體進行分塊。分塊是一個非常必要且難以掌握的技巧。對於一般雜志來說,它們是有邊的,這意味著雜志美工設計師有邊可循,依靠邊來形成立體感,依靠邊來產生未盡的意韻;但是對於web頁面,邊的概念被淡化了,屏幕可以上下左右的拖動。所以此時分塊顯得非常必要,目的也就是產生的效果。

分塊可以用不同著色的色塊、框、細線、排列整齊的英文等等,還可以混合使用,但是注意不要過於醒目,因為頁面的重點在內容,而不在其他。

2、色彩的平衡與呼應。

1)色彩的平衡。色彩在頁面中可以形成很多的效果,通過強烈的對比,可以突出頁面的重點。還可以通過色彩調配,達到頁面穩重度的改變。一般的情況下,頁面上方的顏色總是很重,這樣才能壓住下面的顏色,如果不採取這種辦法,整個頁面將顯得很不穩重,底下的文字圖片,有飄出的意味。因此,要使整個頁面顯得很平衡,必須要有能鎮住其他顏色的色彩。

2)色彩的呼應。一種比較突出的色彩,如果很突兀地放在頁面中,無論你是突出重點也好,還是logo圖標,都給整個頁面帶來了副作用。為此,你必須在相對稱的位置加上該色系(對於頁面並不醒目)的色彩以呼應,這樣可以弱化這種視覺的沖擊。

3、精確到1個像素

如果你是一個成功的頁面設計者,你至少會在做出頁面前已經把整個頁面構思好了;如果你很寬容地對待圖片中1個像素的差別,那說明你還不是很合格。

2、如何評價一套圖標設計的優劣

一個成功的圖標應該符合以下四個准則:

一、簡明易認 便於記憶
設計成功的標志有良好的識別性與記憶度,不論是圖形的還是文字的,不論是具象的還是抽象的,能正確傳達特定產品或企業的個性特徵。

二、內涵明確 個性突出
設計成功的圖標其創意與造型應新穎獨特,別具匠心,有鮮明的形式美和時代感,能給人以美的享受。

三、新穎獨特 引入注目
設計成功的圖標其創意與造型應新穎獨特,別具匠心,有鮮明的形式美和時代感,能給人以美的享受。
四、永久性強 適合性好
設計成功的圖標具有時間上的永久性和使用上的廣泛性,可以在不同場合和媒體中使用。
設計成功的圖標,應能從視覺上打進人們的心裡,激發人們的購買慾望。在設計上,應該對標志的獨特性、象徵性、時代性、記憶性、應用性、組合性、變化性等進行廣泛而深入的研討,這樣才能使圖標設計達到上乘水準。

一個設計成功的圖標,應該具備以下幾個特點:
" 設計新穎獨特
" 容易認知識別
" 個性品位突出
" 力求單純明快
" 造型美觀大方
" 適合性能良好

3、如何評價百度產品 logo 設計網頁版和移動端的不一致

殘酷的說,每個公司的底層員工(實施者)大多數以"做好"為目的,但是當你在大公司里走一遭就會發現,理想主義者是寸步難行的。像百度這種公司當然是不缺人才的,一個項目從構想到落地是需要忍耐的。百度的很多無線產品web產品並不是由一個team來完成的,所以溝通成本還是比較高的,統一性的工作大家都想做,但是很難推進,就如曾經我經歷過的項目和其他團隊溝通,需要小小的改動一下圖標,然後推進了很久很久最後還是沒辦成。合作這件事兒,誰站在主場是很重要的,地位嘛是這樣。
百度的口號是"簡單可依賴"這五個字你必須牢牢記住啊!產品經理們會不斷的提醒你啊有木有!看看網頁產品的樣式你們就懂了。
大部分無線應用都是繼網頁產品推出之後產生的,倘若無線客戶端的風格真的follow了網頁端,你們確定你們不會跳起來罵娘?客戶端logo倘若跟網頁端一樣是 baidu(爪子)XX的形式,你確定你希望這么做?
其實最最最重要的是,當年廠長想出來的logo一直沿用至今,想改logo那太難了,有多少百度設計師的夢想就是換個高端大氣的logo啊有木有!
最後一句,如果你查閱一下最早最早的logo,你會發現其實現在挺好的。

4、如何評價一個UI設計作品的好壞

1.交互性與易用性

不論是手機主題還是網站設計還是APP還是游戲,要讓別人快速上手,能玩,能用,甚至用的簡單,玩的簡單,就算你採用多牛的設計都是沒有用的。

2.色彩舒適度

人第一眼看到的,是事物的顏色,再是形狀。所以,要注意色彩舒適度。一個第一眼看上去就雜七雜八,或者完全沒有主次之分的簡潔,或者看上去就沒有視覺舒適度的飽和度或者明暗度不搭調的色彩,肯定不會受歡迎的。

3.信息可讀性

有了文字基礎,處理好每個模塊的布局,色塊,插圖,背景等方面,會讓你的信息有較強的可讀性。別跟著你的愛好走,把設計作品中你最想傳達的信息傳達出
去,就算某些信息被別人忽略了,你依然是成功的。如果用戶連看都不想看,連最基本的信息都沒法傳達,那麼你的設計是沒有任何價值的。

4.文字的主次

任何設計作品都要傳達信息傳達思想,信息文字的每一個細節,都決定了一個設計要傳達的思想主次,記住,你是要引導別人去看,而不是別人引導你去設計。
這世上沒有一個真正定死的文字標准,但是最基本的,至少讓別人看清你的文字是寫的什麼,所以,文字之間的不同色彩,也是能讓文字主次突出的方面

5.UI識別性

這一點在圖標上味道非常濃,不論你設計的是扁平化還是擬物化還是梵高風格,不一定要3秒看出圖標的意思,也要讓人欣賞這個圖標美感的同時,大概「心裡知道」。這個圖標要傳達的信息,圖形的意圖,都是設計者考慮的。

6.思想,生活的傳達

作品是什麼樣,一般能從另一個層面看出一些設計師對生活對工作對感情的態度和狀態,所以別小看一個作品的力量,它可能就是傳達你自己真實內心的一個媒介,可能你並未發現,但是旁觀者已經發現你了。

5、UI設計和網頁美工的區別是什麼

UI設計只是網站美工的一部分,網站美工需要學習的內容有UI設計,PS,AI,html語言,javaScript語言等。

網頁美工局限於美術設計和頁面製作,UI注重交互,用戶體驗是第一目標。

UI設計師的職能大體包括三方面:一是圖形設計,軟體產品的產品「外形」設計。二是交互設計,主要在於設計軟體的操作流程、樹狀結構、操作規范等。一個軟體產品在編碼之前需要做的就是交互設計,並且確立交互模型,交互規范。三是用戶測試/研究,這里所謂的「測試」,其目標恰在於測試交互設計的合理性及圖形設計的美觀性,主要通過以目標用戶問卷的形式衡量UI設計的合理性。

網頁美工需要學習網站概念知識、色彩構成、網頁設計中的美學規律、FIREWORKS網頁圖形處理、FLASH二維動畫、PHOTOSHOP平面設計軟體在網站設計中的應用、作品設計及點評等內容。

拓展知識

UI設計:UI即User Interface(用戶界面)的簡稱。UI設計則是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性有品味,還要讓軟體的操作變得舒適、簡單、自由、充分體現軟體的定位和特點。

網頁美工:是精通美學,photoshop(PS),FLASH,dreamwaver(DW)等一網站製作軟體的網路人員,必須具有良好的創意和一定程度的審美觀。必要時需要一定的策劃知識。為網站所有的頁面畫出來並用DW和css排版出來。頁面必須清晰簡潔,還要適宜後台調用。

6、網頁設計圖標怎麼做

你指的是 上面的小紅圈效果吧?

要點,將小紅點父級CSS的position設置為relative;

將小紅點本身的position設置為absolute,然後利用top和 right屬性來調整位置.


示例代碼:

<style type="text/css">

.box{background:#455996; padding:10px; height:20px;color:#eee;font-size: 12px;}

.box div{ float:left; line-height:20px;}

.bt{ background:#405287; padding:0 20px; margin:0 10px; position:relative;}

.bt span{ display:block; position:absolute; line-height:14px; width:14px; height:14px; background:#F00; top:-5px; right:-5px; text-align:center;}

</style>


<div  class="box">

 <div>歡迎你:歐陽XX</div>

 <div class="bt">消息<span>0</span></div>

 <div class="bt">注銷</div>

</div>

7、網站界面設計是好還是壞該如何評判

我們經常需要叫非職業設計師來評判界面設計的好壞。也許你是老闆,要評估自己的新網站設計情況,或者你是項目經理,要查看你的設計師製作的網站模型。你該在網站界面設計中發現什麼呢?誰都會無關痛癢地說「這個看起來不錯」或者「這個好像不怎麼好用」,但是怎麼才能給出有意義的反饋呢? 對設計的全面深入理解並非一篇文章所能概括。本文提供一些對你有所幫助的指導原則。開始之前,為你提供一個範例。這是我最近做的一個界面評論文章,針對的是尚未發布的Firefox Add-On Builder界面。這個Add-On Builder屬於Jetpack project 的一部分,你可以用這個中等復雜度的Web應用,方便的在線開發Firefox和Thunderbird擴展插件,然後將你開發的插件發布到網上供全世界網民下載。我對這個界面做了個超大的截圖,評論也寫在裡面了。提醒:滑鼠滾輪縮放圖片,雙擊放大,可以拖動。點擊:到新標簽頁中打開大圖片何時讓你來評論界面?「什麼時候做界面評論」是「如何做」的首要考慮因素。如果是在產品或者網站即將面世之前,那麼你只能給些小的建議,因為已經沒多少時間讓你的反饋有大的影響了。你對相關作品的評論越早,你的話就越有影響力。減少交互界面設計的最高境界是讓用戶忘掉界面,忽略界面的存在。雖然擁有豐富交互的界面看起來很華麗,但只有用戶使用你的產品時所需步驟最少時,才能減少可用性帶來的問題。有一些新聞類網站喜歡把文章分很多塊,然後分頁來顯示,所以用戶不得不一直點擊「下一頁」來等那麼多廣告下載完才顯示出頁面。大多數人都會討厭這種做法,所以根本不會讀完一篇文章。這就是交互過載的表現。(譯者註:國內門戶網站都這樣,主要是流量考慮)仔細思考一下,用戶使用你的產品時所作的每一小步都是必要的嗎?如果你也覺得麻煩,那就去簡化一些。例子:學學泡泡網的絕佳設計吧視覺位置確保你的按鈕、鏈接和交互動作都正確地進行了邏輯分組。經常可以看到「保存」按鈕緊挨著「關閉」按鈕,這意味著用戶的一個小小的錯誤就可以帶來災難性的後果。例1-Gmail的發送和舍棄按鈕相隔甚遠例2-人人網站內信的發送和取消用顏色識別開(其實可以做的更好)例子:淘寶商城的圖標製作很見功力,配合文字使用恰到好處。例子:豆瓣的3個核心頻道,良好起點和一致性的典範。選項少意味著擔憂也少為一個動作(比如注冊)提供多種選擇會給用戶帶來無形的負擔,要盡量避免這樣。給用戶提供很多選項似乎是個好主意,實際上卻非如此。這樣容易使界面膨脹,讓用戶做過多不必要的決定。例子:再看看宏碁的相對復雜設計。界面重要,交互更重要相比於產品的使用感受,它的外觀更容易引起注意。要避免把大多數時間都花在產品外觀上的陷阱。外觀容易改變和改進,相關的瑕疵毛病也容易發現。但是交互才是產品的核心,把多數時間花在處理產品交互問題上,最後再把外觀表現做好!例子:看這個日期提醒,交互更重要。

8、UI設計作品的評判標准有哪些

一、交互性和易用性。
UI設計是非常注重交互的,因為一定要讓用戶滿意,讓他們在使用的過程中不會有很多的疑惑。如果你的設計很炫,但是用戶完全搞不懂,這也是沒有用的,所以說設計的一定要簡單易上手。

與網頁圖標設計評判相關的知識