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