設計師必須知道的優(yōu)秀UI設計原則

界面清晰最重要

界面清晰是UI設計的第一步欠窒,要想讓用戶喜歡你設計的UI辰斋,首先必須讓用戶認可它代芜、知道怎么樣使用它埠褪。讓用戶在使用時預期會發(fā)生什么,并方便地與它交互。


▲ 正確示范|界面沒有任何的操作提示钞速,用戶就明白通過左右滑動屏幕來查看更多卡片贷掖,還知道卡片是以扇形為運動軌跡。

全力維護用戶的注意力

在閱讀的時候渴语,總是會有事物分散我們的注意力苹威。因此,在設計界面的時候驾凶,能夠吸引用戶的注意力很關鍵牙甫,千萬不要將界面的周圍設計得亂七八糟。


▲ 正確示范|干凈簡潔的界面可以讓用戶更加沉浸在閱讀的世界里调违。

讓界面處于用戶的掌控之中

人類往往對能夠掌控自己和周圍的環(huán)境感到舒服窟哺,不考慮用戶感受的設計往往會讓這種舒適感消失。保證界面處于用戶的掌控之中技肩,讓用戶自己感受主動權且轨。


▲ 錯誤示范|用戶不知道如何查看很多的卡片,除了查看第一張卡片的詳情亩鬼,其他的卡片脫離了用戶的掌控殖告。

直接操作的感覺最棒

當能夠直接操作物體時,用戶的感覺是最棒的雳锋。在設計界面時黄绩,我們增加的圖標往往并不是必需的,比如我們過多的使用按鈕玷过、選項等等其他繁瑣的東西僅僅是為了填滿界面爽丹,這些都是畫蛇添足。


▲ 正確示范|圖標的作用是以圖形化的視覺形象給用戶快速引導辛蚊,如果只是裝飾粤蝎,就不如不要。

每個屏幕只提供一個操作主題

我們設計的每一個畫面都應該有單一的主題袋马,這樣不僅能夠讓用戶使用到它真正的價值初澎,也使得上手容易,使用起來也更方便虑凛。如果一個屏幕支持兩個或兩個以上的主題碑宴,立馬會讓整個界面看起來混亂不堪。


▲ 錯誤示范|這個界面是讓用戶輸入登錄桑谍,卻將注冊放在與登錄同等重要的位置延柠,干擾用戶操作,會導致操作錯誤锣披。比較好的做法是贞间,將注冊放在右下或登錄按鈕下方贿条。

界面過渡自然

界面的交互都是關聯(lián)的,所以要認真地考慮到下一步的交互是怎樣的增热,并且通過設計將其實現(xiàn)整以。當用戶已經(jīng)完成該做的步驟,不要讓他們不知所措钓葫,給他們自然而然繼續(xù)下去的方法悄蕾,以達成目的。


▲ 正確示范|界面的交互非常清晰础浮,點擊向下展開帆调,再次點擊向上收起。

表里如一

如果它看上去像個按鈕豆同,那么它就應該具備按鈕的功能番刊。設計師不應該在基本的交互問題上耍小聰明,要在更高層次的問題上發(fā)揮創(chuàng)造力影锈。


▲ 錯誤示范|界面非常漂亮芹务,但登錄被弱化,并且表現(xiàn)形式雷同輸入的提示文字鸭廷,用戶不易察覺枣抱。

區(qū)別對待一致性

如果屏幕元素各自的功能不同,那么它們的外觀也理應不同辆床。反之佳晶,如果功能相同或相近,那么它們看起來就應該是一樣的讼载。


▲ 正確示范|元素排版整齊且統(tǒng)一轿秧,功能清晰明了。

強烈的視覺層次感

強烈的視覺層次感是通過界面上視覺元素提供的清晰瀏覽順序來實現(xiàn)的咨堤,也就是說菇篡,用戶每次都能按照同一個順序瀏覽同一些元素。弱化的視覺層次沒有給用戶提供如何瀏覽的線索一喘,用戶會感到困惑和混亂驱还。當一切都是粗體時,就沒有主次之分了凸克。


▲ 正確示范|界面以用戶的閱讀習慣將層次拉開铝侵,從左到右,從上到下触徐,元素之間互不干擾。

恰當?shù)慕M織UI能夠降低認知難度

正如John Maeda在他的書中所說狐赡,對屏幕元素的恰當組織能夠使頁面顯得簡潔撞鹉,這能夠幫助用戶更容易并且更快地理解你的界面。


▲ 正確示范|將零散的元素進行組合,并以生活中常見的物品展示鸟雏,用戶更易理解享郊。

顏色不是決定性因素

物體的顏色會隨著光線的變化而變化,顏色是一個變化的性質孝鹊,不應該在界面上起決定性作用炊琉。它可以用于提醒,但是不應該是唯一的區(qū)分元素又活。


▲ 正確示范|通過鮮艷的色彩來提醒需要用戶關注的內(nèi)容苔咪,但是tiah不太認同顏色不能作為唯一的區(qū)分的觀點,現(xiàn)在有很多天氣柳骄、記事团赏、時鐘類APP極簡的設計,常常采用色彩進行區(qū)分也非常贊耐薯。

漸進展示

在每個屏幕上只顯示必要的內(nèi)容舔清,如果用戶在做選擇,那么給他們顯示足夠的信息曲初,然后在各自的頁面上展示詳情体谒,避免在某個界面過度展示所有細節(jié)。


▲ 正確示范|用戶只單純地想播放音樂臼婆,所以列表頁只需要當前播放狀態(tài)抒痒、演唱者、專輯名和歌曲名目锭,無需太多的信息评汰。

零狀態(tài)的界面

第一次訪問界面是最重要的,但經(jīng)常被設計者忽視痢虹。為了幫助用戶適應被去,應該提供啟動的方向和引導。


▲ 正確示范|零狀態(tài)結果本身對用戶體驗極其不好奖唯,更需要情感化或引導性的設計來降低用戶焦躁的情緒惨缆。

優(yōu)秀的設計是無形的

優(yōu)秀的設計是沒有痕跡的,如果設計是成功的丰捷,那么用戶可以只關注自己的目的坯墨,而不是界面,不依賴于界面病往。


▲ 正確示范|要想做到這點非常不易捣染,tiah認為Yo做到了。

界面是被人使用的

只有用戶使用你設計的界面時停巷,才是成功的耍攘。如果一件衣服很漂亮榕栏,但是穿起來不舒服,那么設計是失敗的蕾各。


▲ 錯誤示范|視覺效果非常好扒磁,但是用戶體驗上非常糟糕,當前狀態(tài)與主界面關聯(lián)太弱式曲,弧形軌跡閱讀太累妨托。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市吝羞,隨后出現(xiàn)的幾起案子兰伤,更是在濱河造成了極大的恐慌,老刑警劉巖脆贵,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件医清,死亡現(xiàn)場離奇詭異,居然都是意外死亡卖氨,警方通過查閱死者的電腦和手機会烙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來筒捺,“玉大人柏腻,你說我怎么就攤上這事∠悼裕” “怎么了五嫂?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長肯尺。 經(jīng)常有香客問我沃缘,道長,這世上最難降的妖魔是什么则吟? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任槐臀,我火速辦了婚禮,結果婚禮上氓仲,老公的妹妹穿的比我還像新娘水慨。我一直安慰自己,他們只是感情好敬扛,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布晰洒。 她就那樣靜靜地躺著,像睡著了一般啥箭。 火紅的嫁衣襯著肌膚如雪谍珊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天急侥,我揣著相機與錄音抬驴,去河邊找鬼炼七。 笑死,一個胖子當著我的面吹牛布持,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播陕悬,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼题暖,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了捉超?” 一聲冷哼從身側響起胧卤,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拼岳,沒想到半個月后枝誊,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡惜纸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年叶撒,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耐版。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡祠够,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出粪牲,到底是詐尸還是另有隱情古瓤,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布腺阳,位于F島的核電站落君,受9級特大地震影響,放射性物質發(fā)生泄漏亭引。R本人自食惡果不足惜绎速,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望痛侍。 院中可真熱鬧朝氓,春花似錦、人聲如沸主届。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽君丁。三九已至枫夺,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間绘闷,已是汗流浹背橡庞。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工较坛, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人扒最。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓丑勤,卻偏偏與公主長得像,于是被迫代替她去往敵國和親吧趣。 傳聞我的和親對象是個殘疾皇子法竞,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容