App設計的基本原則和規範

Mockplus發表於2018-08-14

為了能在互動設計和使用者體驗上做出比競品更優秀的移動APP產品,我們必須知道移動設計的基本原則。

目前移動設計在我們的工作中越來越重要啦,除了掌握基本的UI設計技能之外,我們也要對移動網際網路的特徵有所認識。為了能在互動設計和使用者體驗上做出比競品更優秀的移動APP產品,我們必須知道移動設計的基本原則。


之前25學堂有跟大家說到移動APP客戶端的UI設計原則及UI介面適配步驟,還有APP觸控操作設計原則之觸控目標的尺寸大小。


從移動網際網路特徵的角度來看,移動設計的基本八條原則

App設計的基本原則和規範


1、內容優先 ,合理的佈局


對於手機而言,螢幕空間資源顯得非常珍貴,為了提升螢幕空間的利用率,介面佈局應以內容為核心,而提供符合使用者期望的內容是移動應用獲得成功的關鍵。如何設計和組織內容,使使用者能快速理解移動應用所提供的內容,使內容真正有意義,這是非常關鍵的。


(1)充足內容,使內容符合移動的特徵。

(2)優先突出使用者需要的資訊,而簡化頁面的導航。

(3)適時提升螢幕空間的利用率。

2、是為移動觸控而設計


點選操作是PC時代互動的基礎,在觸控式螢幕裝置上基於手指的手勢操作已經代替了滑鼠的點選操作。


(1)以資訊架構為基礎,簡歷手勢互動規範。

(2)優先設計自然的手勢互動,而不是TAP點選

(3)引導使用者在情境中學習手勢操作。

(4)特殊手勢不是必須的。

(5)可觸區域必須大於7×7mm,儘量大於9×9mm。

(6)手勢操作需要提供過程及反饋演示。

App設計的基本原則和規範


3、輸入方式的 轉換


文字輸入是移動端的軟肋之一,不管是手寫輸入還是鍵盤輸入,操作效率都相對較低。在行走或者單手操作時,輸入的出錯率也比較高。


(1)減少文字輸入,轉化輸入形式。

(2)簡化輸入選項,變填空為選擇。

(3)使用手機已有的感測器輸入。

App設計的基本原則和規範


4、操作流程必須確保流暢性


在移動產品的操作過程中會碰到多種多樣的情況——找不到目標、不知道該怎麼操作、操作後沒有及時反饋,等等,這都會對產品的流暢性造成影響。在移動產品的設計中主要從三個方面來考慮產品的流暢性:


(1)手指及手勢的操作流。

(2)使用者的注意流。

(3)轉場流暢或者自然,不能牽強!

App設計的基本原則和規範


5、多通道設計


多通道設計是指系統的輸入和輸入都可以由視覺、聽覺、觸覺等來協作完成,協同的多通道介面和互動也會讓使用者更有真實感和沉浸感。


當前各個系統平臺的基礎技術已經越來越成熟,語音輸入、手勢識別及其他由多種感測器組成的綜合識別系統也會給使用者帶來更接近自然的感覺。


作為產品設計師或APP設計師,也可以從其他通道的角度思考設計,給使用者更好的互動方式。


6、移動APP產品必須具備易學性


對於移動產品,提倡的是簡單、直接的操作,傾向於清晰地表達產品目標和價值。讓使用者快速學會使用,儘量不要讓他們檢視幫助文件。介面架構簡單,明瞭,導航設計清晰易理解,操作簡單可見,通過介面元素的表意的和介面提供的想說就能讓使用者清晰地知道操作方式。只有這樣的設計,才能讓使用者的學習使用沒有負擔,而不是通過幫助系統來教會使用者操作。


7、避免干擾和打斷


在玩手機時突然沒電了、寫微博時又被老闆叫去做重要的事情、在搜尋商品時收到一條重要的資訊……在移動情境中,被各種其他的事情打斷是很正常的。


(1)儲存使用者的操作,減少重複勞動。

(2)網路中斷狀態或編輯中斷狀態。

(3)銜接使用者的記憶而不是讓使用者重頭開始。


8、移動設計必須有愛


評價一個移動產品使用者體驗的好壞,除了要看它是否滿足使用者需求和是否基友友好的可用性之外,能讓使用者感受到驚喜是在移動產品設計最為推崇的。這樣的設計往往是超越了使用者的期望,它的表現是功能、互動或者操作流雖不是使用者預期的,但是使用者能很好地理解,並且更高效、更有趣地完成任務。


移動產品的設計應是驚喜有趣、智慧高效和貼心的。如何打造APP的趣味性?


從使用者的角度來看,APP指導性設計八個規範

App設計的基本原則和規範


1、充分考慮使用者的使用習慣


比如大多數人拿手機的時候是雙手握還是單手握,單手握的時候是右手操作還是左手操作,操作的時候用哪個手指就能進行操作。考慮到使用者的使用習慣有助於在設計時避開手指的觸碰盲區。


2、儘量減少產品層級以及深度


在移動裝置上,過多的層級會使使用者失去耐心而放棄對產品的使用。如果產品層級確實過深,考慮用一下幾種方法扁平化你的層級結構:使用選項卡(tabs)結合分類和內容的展示;允許穿越層級操作,比如允許使用者在第一層級對第二層級的內容進行直接操作。

App設計的基本原則和規範


3、操作欄的設計


首先我們必須知道使用 FIT 來確保優先展示操作按鈕的準則。


F — 頻繁。使用者在訪問介面時,是否會頻繁使用這個操作?

I — 重要,這個操作對於使用者來說是否真的很重要?

T — 典型,在類似的APP中,是否把這個操作作為典型的第一操作?


一般來說,如果符合 FIT 準則,則放在操作欄裡,否則,它屬於更多操作。


4、設計要主次分明


將主流使用者最常用的 20% 功能進行顯現,其他進行適度的隱藏,越不常用的功能,隱藏的層級越深。例如:微信的掃本機二維碼。要避免新浪微博廣場的堆積式設計。

App設計的基本原則和規範


5、始終提供明確的導航


即要提供明確的返回上一級的操作。不能中斷操作流程。


6、自動儲存使用者輸入的內容或一些輸入提示資訊


比如,微信的訊息傳送在沒聯網的情況下傳送會顯示歎號儲存在手機端,聯網後只需重新傳送即可,不需要重新鍵入資訊。新浪微博在網路不好的情況下進行轉發或評論,相應的資訊也會自動儲存在草稿箱,聯網後操作一下即可。


7、APP底部工具欄導航數目3-5個為最佳

App設計的基本原則和規範


8、儘量去猜測使用者的行為,但要允許糾錯


比如,使用者在進行搜尋時,可以根據使用者最近的搜尋行為給出參考答案。


今天整理的這些八項移動設計的基本原則和八項APP指導性設計規範。希望對大家有所幫助!同時也希望大家在APP設計的工作中,善於總結經驗和分享。


設計規範點選這裡:ds.mockplus.cn/


原作者朝夕旭瀟

原文:App設計的基本原則和規範 - CSDN部落格


相關文章