在設計一個移動端的應用程序時嗦篱,我們應該牢記在心的最重要的一件事情就是務必要確保你的程序是有用且直觀的。如果這個程序沒有用處,那么對用戶來講就沒有任何的實際價值袄膏,自然地也就沒有人有任何理由去使用它。而如果這個程序有用但需要用戶付出大量的學習成本掺冠,用戶自然也是不會愿意去投入學習的沉馆。
優(yōu)秀的界面設計都能夠克服以上兩個問題:
為了達到可用性目的,應用程序應該是以用戶為中心的德崭。用戶之所以安裝你的程序是因為他們需要解決某個緊迫的問題斥黑,也就是說,你的程序一定是要有實際用途的眉厨。你要仔細考慮用戶會是如何按著它們的方式嘗試去完成自己的目標需求的锌奴。
賦予界面足夠的清晰度。為了有效使用他們面對的用戶界面憾股,人們首先必須意識到這個界面是干嗎用的又該怎么使用它鹿蜀。因此,在考慮界面是否還要清晰時絕不要猶豫服球。
以下是我認為在創(chuàng)建一個優(yōu)秀的用戶體驗設計時需要重點考慮的9個核心原則:
1. 減少混亂
對于用戶體驗來說茴恰,用戶的注意力無疑是一種非常寶貴的資源,而你的設計應該合理地分配這一資源斩熊。如果你的用戶界面承載了諸如按鈕往枣、圖片、文本等諸多雜亂的信息粉渠,勢必導致信息過載給用戶帶來壓力分冈。
有一句出自 Antoine de Saint-Exupéry 得著名的短語,即”達到完美霸株,并不是好得不能再好雕沉,而是好得一點都不多余∪ゼ” 類似的蘑秽,在移動設計中,擺脫掉一切并非絕對必要的信息是非常重要的箫攀,因為其減少了混亂肠牲,而提升了用戶的理解。
有一條簡單的經(jīng)驗法則:每一個屏幕應該僅保存一個重要的動作靴跛。對于你的程序而言缀雳,其每一屏都應該向那些使用它的用戶提供一個有實際價值的獨立動作。這使的它易于學習梢睛,易于使用肥印,易于在必要的時候加入或創(chuàng)建识椰。相比于一個凌亂的屏幕,100個清晰的屏幕才是更可取的深碱。
拿 Uber 來說腹鹉,Uber清楚地知道用戶使用他們應用程序的目的是叫到一輛車,所以程序中并沒有覆蓋太多信息: 它能夠基于地理數(shù)據(jù)自動定位用戶的所在位置敷硅,唯一需要用戶去做的事情就只是選擇上車位置功咒。
2、 使導航不言自明
對任何應用程序來說绞蹦,幫助用戶導航前往正確的地方都是相當重要的一件事情力奋。優(yōu)秀的導航設計就好比指導用戶旅程的一只無形的手。畢竟幽七,如果用戶都發(fā)現(xiàn)不了景殷,那么再酷的功能特性或最最吸引人的內(nèi)容也是沒用的。優(yōu)秀的移動導航遵循以下基本原則:
(1)導航必須是連貫的澡屡。首先猿挚,你應該使用恰當?shù)臉俗R物(正確的視覺隱喻),這樣導航元素就不需要額外的解釋說明用戶就能理解驶鹉,其次绩蜻,要確保每個導航元素(如圖表)指向了正確的目的地。?
(2)導航必須保持一致性梁厉。在不同頁面中,千萬不要把導航控件移動到不同的位置或者隱藏起來踏兜。這樣會很容易使用戶迷失掉的词顾。?
(3)導航應該傳達出用戶當前的位置。無法表明當前位置可能是我們在應用程序菜單中最臣钭保看到的一個問題肉盹。“我在哪里疹尾?” 是用戶要成功的導航前必須回答的基本問題之一上忍。
3、 創(chuàng)建一個跨平臺的無縫體驗
你不應該將移動設計視作是孤立的纳本。對用戶來講窍蓝,創(chuàng)建一個在移動端、桌面端和平板端無縫結(jié)合的體驗是非常重要的繁成。
以 Apple Music 為例吓笙,你在 Mac 端設置一個播放列表后會很快在 iPhone 上也看到該列表。 Apple 意識到在跨平臺間保持這種數(shù)據(jù)的同步巾腕,創(chuàng)建出良好的無縫結(jié)合的體驗是非常重要的面睛。
4絮蒿、設計對手指操作友好的控件
相比于大的觸控控件,小的自然更難于操作叁鉴。當你在設計移動端的用戶界面時土涝,最好是讓你的控件的可觸摸面積足夠大,這樣用戶才容易觸及到幌墓。
控件的大最好要控制在7 - 10毫米但壮,這樣用戶方能夠準確地使用手指觸及到。克锣;另一方面茵肃,用戶在跟控件產(chǎn)生交互時,控件的邊緣應該是可見的袭祟,能夠以清晰的視覺反饋向用戶傳達他們確實觸及到控件本身了验残。
另外,要確保不同的控件間有合適的留白區(qū)域巾乳。
5您没、文本內(nèi)容應足夠清晰
相比于臺式電腦,智能手機的屏幕要相對小的多胆绊,這就意味著如何把大量的信息裝到這個小屏中不得不說是移動設計的一大挑戰(zhàn)氨鹏。您可能有一個挺吸引人的想法,即把所有信息都進行尺寸上的壓縮也照樣能顯示很多的內(nèi)容压状。但無論如何仆抵,你應該杜絕這種想法。
針對移動端的一條經(jīng)驗法則:文本大小應該至少在11pt左右种冬,好讓用戶在不用放大的情況也能夠清晰的瀏覽镣丑。
通過增加行高或字符間距都能夠提高易讀性,合適的大量的留白可以使一些最亂的界面也能夠看上去簡潔不少娱两。
6莺匠、 保持界面元素清晰可見
應該使用顏色和對比度來幫助用戶查看和解讀你的內(nèi)容。選擇出能夠支撐你的程序可用性的主色調(diào)十兢、次要色和強調(diào)色趣竣,確保不同的界面元素間有足夠的色彩對比度以使那些視力不佳的用戶也能瀏覽使用你的程序。
對于使用有背景的文本來說旱物,要保證文本的顏色和其背景色間有足夠的對比度遥缕,好讓文本部分清晰易讀。W3C 中針對正文文本和圖像文本的對比度給出以下的推薦比值:
小號文本跟其背景色的對比度應至少為4.5:1宵呛。
大號文本(14 pt bold/18 pt regular及以上)跟其背景色的對比度至少為3:1通砍。
使用足夠的對比度在手機上顯得尤其重要:因為用戶可能在戶外使用是,陽光的照耀會降低其對比效果。
圖標和其他關鍵的元素同樣應該遵循上述的對比度推薦值封孙。
7迹冤、基于手指的觸控點設計控件的布局和位置
Steven Hoover 在他的“用戶究竟如何使用移動設備”的研究中發(fā)現(xiàn),49%的人習慣于使用單個拇指來完成所有操作虎忌。在下圖中泡徙,屏幕中不同顏色的區(qū)域表明用戶拇指能夠觸及的難度等級,其中膜蠢,綠色區(qū)域表示很容易觸及的范圍堪藐,黃色則表示拇指要伸展開來才能夠到,而要觸達紅色區(qū)域則要求用戶改變設備的手持方式挑围。
將頂級菜單礁竞,高頻使用的控件和公有的動作放在綠色區(qū)域是非常重要的,因為單拇指能夠很舒適的跟它們產(chǎn)生交互杉辙。?
另一方面模捂,把那些具有否定意義的動作(比如刪除或清除)放在手指不容易觸及到的紅色區(qū)域,因為我們不希望用戶意外的跟它們產(chǎn)生作用蜘矢。
8狂男、減少對打字輸入的需要?
在手機上打字輸入是一個緩慢而易于出錯的過程,因此最好要盡量減少移動應用程序中所需的輸入品腹。
盡量移除那些不必要的輸入域岖食,保持表單簡短。
在合適的地方舞吭,使用自動補全的功能或填入用戶個性化數(shù)據(jù)泡垃,這樣用戶就只需要輸入最少的信息。
9羡鸥、測試你的設計效果
若把你的設計方在一個大屏的電腦屏幕上看蔑穴,其效果往往非常不錯,然而兄春,一旦放在一個實際的手機屏幕上測試澎剥,其效果甚至不及前者的一半锡溯。 即使是那些設計最為用心的用戶界面赶舆,放在真實世界中也難免會包含一些不可見的缺陷,這就是為何我們要讓真實用戶在多樣的移動設備上測試我們程序的原因祭饭。要把你的應用程序當做一個不斷進化的實體芜茵,使用分析得來的數(shù)據(jù)結(jié)果及用戶的反饋信息不斷的提升你的用戶體驗設計。
結(jié)論
就如同任何其他設計元素一樣倡蝙,本文提到的諸多準則可能只是我們在開始可以參考的一部分九串。你要嘗試將這些準則跟自己的想法融合過濾,找出那些最好的最適合自己的設計思路。一定要記住猪钮,設計不僅僅是面向設計人員——設計是面向用戶品山,是為用戶而設計的。
譯自:https://uxplanet.org/mobile-ux-design-key-principles-dee1a632f9e6#.sn26p06x1