UI設(shè)計(jì)工作中，設(shè)計(jì)師們往往不喜歡將界面設(shè)計(jì)得與原型圖一致，總會(huì)刻意的去尋求存在感與原型做出差別，那么對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)，更應(yīng)該懂得用戶體驗(yàn)，成為辦個(gè)用戶體驗(yàn)設(shè)計(jì)師。
以下列舉了一些界面設(shè)計(jì)中的案例細(xì)節(jié)，希望對(duì)設(shè)計(jì)師們有所幫助。
一.圖標(biāo)
1.統(tǒng)一圖標(biāo)的樣式
圖標(biāo)在界面設(shè)計(jì)中還是占著較大的比重，它的存在有利于平衡界面，也讓頁(yè)面看起來(lái)更加的美觀，也有一定的提示作用。圖標(biāo)風(fēng)格有：線性圖標(biāo)、填充圖標(biāo)、面型圖標(biāo)、扁平圖標(biāo)、手繪風(fēng)格圖標(biāo)和擬物圖標(biāo)等。
在決定使用某一風(fēng)格的圖標(biāo)設(shè)計(jì)之后，在相同木塊下，請(qǐng)盡量使用同一的風(fēng)格的圖標(biāo)，如填充圖標(biāo)的色彩飽和度；線性圖標(biāo)的線條粗細(xì)；擬物風(fēng)格的光線陰影等。
2.意義明確的圖標(biāo)
很多人都喜歡純圖標(biāo)式的設(shè)計(jì)，去掉文案試圖讓圖標(biāo)看起來(lái)更高大上，但是往往忽略了圖標(biāo)最重要的作用是提示用戶該按鈕的功能。如上圖所示，去掉文案之后很多圖標(biāo)根本無(wú)法準(zhǔn)確表達(dá)出確切的含義，這也是圖形的缺陷。
做好圖標(biāo)和文字的排版與比例一樣可以設(shè)計(jì)出好看的界面。
3.圖標(biāo)的視覺(jué)平衡
同一個(gè)界面出現(xiàn)多個(gè)圖標(biāo)時(shí)，我們需要保持整體的視覺(jué)平衡。并非是所有圖標(biāo)都采用相同的尺寸就能達(dá)到平衡，由于圖標(biāo)的體量不同，相同尺寸下不同體量的圖標(biāo)視覺(jué)平衡也不相同，例如相同尺寸的正方形會(huì)比圓形顯得大。因此，我們需要根據(jù)圖標(biāo)的體量對(duì)其大小做出相應(yīng)的調(diào)整。
4.符合用戶心理的圖標(biāo)（按鈕）
圖標(biāo)在大多數(shù)情況下都是充當(dāng)著按鈕的作用。設(shè)計(jì)時(shí)必須要清晰準(zhǔn)確的傳達(dá)出當(dāng)前狀態(tài)，不能為了視覺(jué)效果而帶給用戶錯(cuò)誤的判斷，例如深灰色的按鈕用戶會(huì)理解為是禁用狀態(tài)而放棄點(diǎn)擊。
通過(guò)圖標(biāo)（按鈕）的顏色、大小、風(fēng)格等來(lái)引導(dǎo)用戶進(jìn)行操作，需要強(qiáng)化的就要做得突出，不要整個(gè)界面都處于主次不明的狀態(tài)，分散用戶的注意力，削弱了界面需要傳達(dá)的主旨。
二.布局
1.合理的模塊區(qū)分
界面設(shè)計(jì)中不乏內(nèi)容信息很多，需要折疊的情況。因此經(jīng)常存在信息的層級(jí)關(guān)系，而這時(shí)就需要利用不同的顏色對(duì)各個(gè)模塊進(jìn)行區(qū)分，利用同色系不同明度來(lái)體現(xiàn)這樣的層級(jí)關(guān)系。這樣也讓用戶更容易理解當(dāng)前所處的模塊。也讓頁(yè)面看起來(lái)更豐滿些。
2.正確的文字層級(jí)關(guān)系
工作中我們拿到的需求總會(huì)出現(xiàn)大篇幅的文案，不能像概念設(shè)計(jì)那樣任性的刪減，在進(jìn)行文字排版的時(shí)候，正確的處理信息之間的層級(jí)關(guān)系將會(huì)提高用戶對(duì)信息的識(shí)別度。我們通常會(huì)通過(guò)字體大小、顏色、留白、層級(jí)分割等技巧來(lái)處理，把相同屬性的信息歸類(lèi)設(shè)計(jì)，通過(guò)留白的不同達(dá)到層級(jí)的區(qū)分，讓整個(gè)信息排列主次分明，層級(jí)清晰。
3.合理的內(nèi)容歸納
應(yīng)該善用色塊和分割線對(duì)頁(yè)面的內(nèi)容進(jìn)行合理的歸納和整理。線條通常用于分割同一類(lèi)別或擁有相同屬性的元素；而色塊更多的是用于分割不同類(lèi)別或者區(qū)分不同屬性的元 素，以達(dá)到層次清晰，歸類(lèi)明確的目的。但是所有的一切都應(yīng)該服務(wù)于信息的準(zhǔn)確表達(dá)，切忌不可為了視覺(jué)上的協(xié)調(diào)而強(qiáng)行的合并或折疊。
4.預(yù)估內(nèi)容承載范圍
新人總是會(huì)忘記規(guī)范信息呈現(xiàn)的邊界寬度。程序在開(kāi)發(fā)的時(shí)候總會(huì)問(wèn)，你這個(gè)超過(guò)長(zhǎng)度之后如何顯示。有一些程序更是直接用右圖的”…”顯示。但是在這樣的情況下，作為地址這樣的簡(jiǎn)單信息的展示，還需要用戶去點(diǎn)擊一次才能看見(jiàn)全部地址，明顯是不合理的交互。因此我們?cè)谠O(shè)計(jì)界面應(yīng)該要考慮到超過(guò)展示邊界的時(shí)候該如何展示，如何取舍。
5.尊重App用戶的使用習(xí)慣
許多App的設(shè)計(jì)師都是由網(wǎng)頁(yè)設(shè)計(jì)師轉(zhuǎn)行而來(lái)的，但是App界面有其特殊性。它界面小，過(guò)小的按鈕無(wú)法像鼠標(biāo)一樣能夠精確點(diǎn)擊。因?yàn)橛幸恍┚W(wǎng)頁(yè)的設(shè)計(jì)習(xí)慣不應(yīng)該帶到App的設(shè)計(jì)中來(lái)，這也是交互設(shè)計(jì)師在App的設(shè)計(jì)過(guò)程中需要去把關(guān)和注意的。
三.設(shè)計(jì)元素
1.顏色
頁(yè)面信息總是各有權(quán)重。在選用配色方案的時(shí)候，在界面中最好不要使用 3 個(gè)以上的顏色。最好能以一個(gè)主色+兩個(gè)輔色最佳。顏色太多會(huì)讓用戶模糊界面的焦點(diǎn)。無(wú)法聚焦在我們想讓用戶聚焦的信息上。
2.透明度與投影
通過(guò)對(duì)按鈕、卡片等進(jìn)行投影運(yùn)用可以增強(qiáng)立體感與層次感。
給予用戶該卡片能夠切換，且當(dāng)前展示的信息為該卡片的詳情的交互暗示。雖然不加投影和陰影也能達(dá)到這個(gè)效果，但是效果會(huì)弱不少。
3.表單
表單設(shè)計(jì)在界面中隨處可見(jiàn)，看到一望無(wú)際的表單用戶總是望而卻步。為了緩解用戶的這種心理活動(dòng)，我們?cè)O(shè)計(jì)的時(shí)候通常會(huì)通過(guò)合并歸納相同屬性的表單，采用逐步填寫(xiě)來(lái)讓用戶感覺(jué)內(nèi)容很少，通過(guò)這樣的視錯(cuò)覺(jué)讓用戶完成表單的填寫(xiě)。
4.缺省頁(yè)
作為用戶當(dāng)遇到頁(yè)面內(nèi)容為空的時(shí)候本身就是一件比較沮喪的事情。因?yàn)閼?yīng)該加入一些情感化的設(shè)計(jì)。在空界面的一些設(shè)計(jì)中也由以前的純文字轉(zhuǎn)變?yōu)橐恍?yīng)景的插畫(huà)表現(xiàn)，帶給用戶更多的愉悅感。深圳網(wǎng)站建設(shè)博納網(wǎng)絡(luò)編輯整理。
