星巢網絡科技logo
您當前位置:首頁 > 星巢圈 > APP開發資訊 > APP用(Use)戶體驗設計需考慮的(Of)9大(Big)原則

APP用(Use)戶體驗設計需考慮的(Of)9大(Big)原則

發布日期:2020-02-03 12:08 來(Come)源:星巢網絡科技官網 閱讀:1714

APP用(Use)戶體驗設計需考慮的(Of)9大(Big)原則

發布日期:2020-02-03 12:08

       在(Exist)設計一(One)個(Indivual)移動端的(Of)應用(Use)程序時(Hour),我(I)們應該牢記在(Exist)心的(Of)最重要(Want)的(Of)一(One)件事情就是務必要(Want)确保你的(Of)程序是有用(Use)且直觀的(Of)。

      如果這(This)個(Indivual)程序沒有用(Use)處,那麽對用(Use)戶來(Come)講就沒有任何的(Of)實際價值,自然地也就沒有人(People)有任何理由去使用(Use)它。

      而如果這(This)個(Indivual)程序有用(Use)但需要(Want)用(Use)戶付出(Out)大(Big)量的(Of)學習成本,用(Use)戶自然也是不(No)會願意去投入學習的(Of)。



    廣西星巢網絡小編認爲(For)在(Exist)創建一(One)個(Indivual)優秀的(Of)用(Use)戶體驗設計時(Hour)需要(Want)重點考慮的(Of)9個(Indivual)核心原則:


1. 減少混亂

     對于(At)用(Use)戶體驗來(Come)說,用(Use)戶的(Of)注意力無疑是一(One)種非常寶貴的(Of)資源,而你的(Of)設計應該合理地分配這(This)一(One)資源。如果你的(Of)用(Use)戶界面承載了諸如按鈕、圖片、文本等諸多雜亂的(Of)信息,勢必導緻信息過載給用(Use)戶帶來(Come)壓力。

     有一(One)句出(Out)自 Antoine de Saint-Exupéry 得著名的(Of)短語,即”達到(Arrive)完美,并不(No)是好得不(No)能再好,而是好得一(One)點都不(No)多餘。” 類似的(Of),在(Exist)移動設計中,擺脫掉一(One)切并非絕對必要(Want)的(Of)信息是非常重要(Want)的(Of),因爲(For)其減少了混亂,而提升了用(Use)戶的(Of)理解。
     有一(One)條簡單的(Of)經驗法則:每一(One)個(Indivual)屏幕應該僅保存一(One)個(Indivual)重要(Want)的(Of)動作(Do)。對于(At)你的(Of)程序而言,其每一(One)屏都應該向那些使用(Use)它的(Of)用(Use)戶提供一(One)個(Indivual)有實際價值的(Of)獨立動作(Do)。這(This)使的(Of)它易于(At)學習,易于(At)使用(Use),易于(At)在(Exist)必要(Want)的(Of)時(Hour)候加入或創建。相比于(At)一(One)個(Indivual)淩亂的(Of)屏幕,100個(Indivual)清晰的(Of)屏幕才是更可取的(Of)。
     拿 Uber 來(Come)說,Uber清楚地知道用(Use)戶使用(Use)他(He)們應用(Use)程序的(Of)目的(Of)是叫到(Arrive)一(One)輛車,所以(By)程序中并沒有覆蓋太多信息: 它能夠基于(At)地理數據自動定位用(Use)戶的(Of)所在(Exist)位置,唯一(One)需要(Want)用(Use)戶去做的(Of)事情就隻是選擇上車位置。



2. 使導航不(No)言自明
       對任何應用(Use)程序來(Come)說,幫助用(Use)戶導航前往正确的(Of)地方都是相當重要(Want)的(Of)一(One)件事情。優秀的(Of)導航設計就好比指導用(Use)戶旅程的(Of)一(One)隻無形的(Of)手。

       畢竟,如果用(Use)戶都發現不(No)了,那麽再酷的(Of)功能特性或最最吸引人(People)的(Of)内容也是沒用(Use)的(Of)。優秀的(Of)移動導航遵循以(By)下基本原則:

     (1)導航必須是連貫的(Of)。首先,你應該使用(Use)恰當的(Of)标識物(正确的(Of)視覺隐喻),這(This)樣導航元素就不(No)需要(Want)額外的(Of)解釋說明用(Use)戶就能理解,其次,要(Want)确保每個(Indivual)導航元素(如圖表)指向了正确的(Of)目的(Of)地。




     (2)導航必須保持一(One)緻性。在(Exist)不(No)同頁面中,千萬不(No)要(Want)把導航控件移動到(Arrive)不(No)同的(Of)位置或者隐藏起來(Come)。這(This)樣會很容易使用(Use)戶迷失掉的(Of)。

     (3)導航應該傳達出(Out)用(Use)戶當前的(Of)位置。無法表明當前位置可能是我(I)們在(Exist)應用(Use)程序菜單中最常看到(Arrive)的(Of)一(One)個(Indivual)問題。“我(I)在(Exist)哪裏?” 是用(Use)戶要(Want)成功的(Of)導航前必須回答的(Of)基本問題之一(One)。

 


3. 創建一(One)個(Indivual)跨平台的(Of)無縫體驗
     你不(No)應該将移動設計視作(Do)是孤立的(Of)。對用(Use)戶來(Come)講,創建一(One)個(Indivual)在(Exist)移動端、桌面端和(And)平闆端無縫結合的(Of)體驗是非常重要(Want)的(Of)。




     以(By) Apple Music 爲(For)例,你在(Exist) Mac 端設置一(One)個(Indivual)播放列表後會很快在(Exist) iPhone 上也看到(Arrive)該列表。 Apple 意識到(Arrive)在(Exist)跨平台間保持這(This)種數據的(Of)同步,創建出(Out)良好的(Of)無縫結合的(Of)體驗是非常重要(Want)的(Of)。


4. 設計對手指操作(Do)友好的(Of)控件
     相比于(At)大(Big)的(Of)觸控控件,小的(Of)自然更難于(At)操作(Do)。當你在(Exist)設計移動端的(Of)用(Use)戶界面時(Hour),最好是讓你的(Of)控件的(Of)可觸摸面積足夠大(Big),這(This)樣用(Use)戶才容易觸及到(Arrive)。
     控件的(Of)大(Big)最好要(Want)控制在(Exist)7 – 10毫米,這(This)樣用(Use)戶方能夠準确地使用(Use)手指觸及到(Arrive)。;另一(One)方面,用(Use)戶在(Exist)跟控件産生(Born)交互時(Hour),控件的(Of)邊緣應該是可見的(Of),能夠以(By)清晰的(Of)視覺反饋向用(Use)戶傳達他(He)們确實觸及到(Arrive)控件本身了。

     另外,要(Want)确保不(No)同的(Of)控件間有合适的(Of)留白區域。


5. 文本内容應足夠清晰
       相比于(At)台式電腦,智能手機的(Of)屏幕要(Want)相對小的(Of)多,這(This)就意味着如何把大(Big)量的(Of)信息裝到(Arrive)這(This)個(Indivual)小屏中不(No)得不(No)說是移動設計的(Of)一(One)大(Big)挑戰。

       您可能有一(One)個(Indivual)挺吸引人(People)的(Of)想法,即把所有信息都進行尺寸上的(Of)壓縮也照樣能顯示很多的(Of)内容。但無論如何,你應該杜絕這(This)種想法。

     針對移動端的(Of)一(One)條經驗法則:文本大(Big)小應該至少在(Exist)11pt左右,好讓用(Use)戶在(Exist)不(No)用(Use)放大(Big)的(Of)情況也能夠清晰的(Of)浏覽。



     通過增加行高或字符間距都能夠提高易讀性,合适的(Of)大(Big)量的(Of)留白可以(By)使一(One)些最亂的(Of)界面也能夠看上去簡潔不(No)少。

6. 保持界面元素清晰可見


     應該使用(Use)顔色和(And)對比度來(Come)幫助用(Use)戶查看和(And)解讀你的(Of)内容。選擇出(Out)能夠支撐你的(Of)程序可用(Use)性的(Of)主色調、次要(Want)色和(And)強調色,确保不(No)同的(Of)界面元素間有足夠的(Of)色彩對比度以(By)使那些視力不(No)佳的(Of)用(Use)戶也能浏覽使用(Use)你的(Of)程序。
     對于(At)使用(Use)有背景的(Of)文本來(Come)說,要(Want)保證文本的(Of)顔色和(And)其背景色間有足夠的(Of)對比度,好讓文本部分清晰易讀。W3C 中針對正文文本和(And)圖像文本的(Of)對比度給出(Out)以(By)下的(Of)推薦比值:
     小号文本跟其背景色的(Of)對比度應至少爲(For)4.5:1。
     大(Big)号文本(14 pt bold/18 pt regular及以(By)上)跟其背景色的(Of)對比度至少爲(For)3:1。


     使用(Use)足夠的(Of)對比度在(Exist)手機上顯得尤其重要(Want):因爲(For)用(Use)戶可能在(Exist)戶外使用(Use)是,陽光的(Of)照耀會降低其對比效果。


     圖标和(And)其他(He)關鍵的(Of)元素同樣應該遵循上述的(Of)對比度推薦值。

7. 基于(At)手指的(Of)觸控點設計控件的(Of)布局和(And)位置


     Steven Hoover 在(Exist)他(He)的(Of)“用(Use)戶究竟如何使用(Use)移動設備”的(Of)研究中發現,49%的(Of)人(People)習慣于(At)使用(Use)單個(Indivual)拇指來(Come)完成所有操作(Do)。

     在(Exist)下圖中,屏幕中不(No)同顔色的(Of)區域表明用(Use)戶拇指能夠觸及的(Of)難度等級,其中,綠色區域表示很容易觸及的(Of)範圍,黃色則表示拇指要(Want)伸展開來(Come)才能夠到(Arrive),而要(Want)觸達紅色區域則要(Want)求用(Use)戶改變設備的(Of)手持方式。


       将頂級菜單,高頻使用(Use)的(Of)控件和(And)公有的(Of)動作(Do)放在(Exist)綠色區域是非常重要(Want)的(Of),因爲(For)單拇指能夠很舒适的(Of)跟它們産生(Born)交互。



      另一(One)方面,把那些具有否定意義的(Of)動作(Do)(比如删除或清除)放在(Exist)手指不(No)容易觸及到(Arrive)的(Of)紅色區域,因爲(For)我(I)們不(No)希望用(Use)戶意外的(Of)跟它們産生(Born)作(Do)用(Use)。


8. 減少對打字輸入的(Of)需要(Want)

     在(Exist)手機上打字輸入是一(One)個(Indivual)緩慢而易于(At)出(Out)錯的(Of)過程,因此最好要(Want)盡量減少移動應用(Use)程序中所需的(Of)輸入。
     盡量移除那些不(No)必要(Want)的(Of)輸入域,保持表單簡短。

     在(Exist)合适的(Of)地方,使用(Use)自動補全的(Of)功能或填入用(Use)戶個(Indivual)性化數據,這(This)樣用(Use)戶就隻需要(Want)輸入最少的(Of)信息。

9. 測試你的(Of)設計效果


      若把你的(Of)設計放在(Exist)一(One)個(Indivual)大(Big)屏的(Of)電腦屏幕上看,其效果往往非常不(No)錯,然而,一(One)旦放在(Exist)一(One)個(Indivual)實際的(Of)手機屏幕上測試,其效果甚至不(No)及前者的(Of)一(One)半。

       即使是那些設計最爲(For)用(Use)心的(Of)用(Use)戶界面,放在(Exist)真實世界中也難免會包含一(One)些不(No)可見的(Of)缺陷,這(This)就是爲(For)何我(I)們要(Want)讓真實用(Use)戶在(Exist)多樣的(Of)移動設備上測試我(I)們程序的(Of)原因。

      要(Want)把你的(Of)應用(Use)程序當做一(One)個(Indivual)不(No)斷進化的(Of)實體,使用(Use)分析得來(Come)的(Of)數據結果及用(Use)戶的(Of)反饋信息不(No)斷的(Of)提升你的(Of)用(Use)戶體驗設計。


結論
     優秀的(Of)界面設計都能夠克服以(By)下兩個(Indivual)問題:
     爲(For)了達到(Arrive)可用(Use)性目的(Of),應用(Use)程序應該是以(By)用(Use)戶爲(For)中心的(Of)。

     用(Use)戶之所以(By)安裝你的(Of)程序是因爲(For)他(He)們需要(Want)解決某個(Indivual)緊迫的(Of)問題,也就是說,你的(Of)程序一(One)定是要(Want)有實際用(Use)途的(Of)。你要(Want)仔細考慮用(Use)戶會是如何按着它們的(Of)方式嘗試去完成自己的(Of)目标需求的(Of)。

     賦予界面足夠的(Of)清晰度。爲(For)了有效使用(Use)他(He)們面對的(Of)用(Use)戶界面,人(People)們首先必須意識到(Arrive)這(This)個(Indivual)界面是幹嗎用(Use)的(Of)又該怎麽使用(Use)它。因此,界面的(Of)清晰度是要(Want)考慮的(Of)重點之一(One)。