App設計的基本原則和規範

爲了能在交互設計和用戶體驗上作出比競品更優秀的移動APP產品，咱們必須知道移動設計的基本原則。

目前移動設計在咱們的工做中愈來愈重要啦，除了掌握基本的UI設計技能以外，咱們也要對移動互聯網的特徵有所認識。爲了能在交互設計和用戶體驗上作出比競品更優秀的移動APP產品，咱們必須知道移動設計的基本原則。

以前25學堂有跟你們說到移動APP客戶端的UI設計原則及UI界面適配步驟，還有APP觸控操做設計原則之觸控目標的尺寸大小。

從移動互聯網特徵的角度來看，移動設計的基本八條原則

一、內容優先 ，合理的佈局

對於手機而言，屏幕空間資源顯得很是珍貴，爲了提高屏幕空間的利用率，界面佈局應之內容爲核心，而提供符合用戶指望的內容是移動應用得到成功的關鍵。如何設計和組織內容，使用戶能快速理解移動應用所提供的內容，使內容真正有意義，這是很是關鍵的。

（1）充足內容，使內容符合移動的特徵。

（2）優先突出用戶須要的信息，而簡化頁面的導航。

（3）適時提高屏幕空間的利用率。

二、是爲移動觸摸而設計

點擊操做是PC時代交互的基礎，在觸摸屏設備上基於手指的手勢操做已經代替了鼠標的點擊操做。

（1）以信息架構爲基礎，簡歷手勢交互規範。

（2）優先設計天然的手勢交互，而不是TAP點擊

（3）引導用戶在情境中學習手勢操做。

（4）特殊手勢不是必須的。

（5）可觸區域必須大於7×7mm,儘可能大於9×9mm。

（6）手勢操做須要提供過程及反饋演示。

三、輸入方式的 轉換

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

（1）減小文本輸入，轉化輸入形式。

（2）簡化輸入選項，變填空爲選擇。

（3）使用手機已有的傳感器輸入。

四、操做流程必須確保流暢性

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

（1）手指及手勢的操做流。

（2）用戶的注意流。

（3）轉場流暢或者天然，不能牽強！

五、多通道設計

多通道設計是指系統的輸入和輸入均可以由視覺、聽覺、觸覺等來協做完成，協同的多通道界面和交互也會讓用戶更有真實感和沉浸感。

當前各個系統平臺的基礎技術已經愈來愈成熟，語音輸入、手勢識別及其餘由多種傳感器組成的綜合識別系統也會給用戶帶來更接近天然的感受。

做爲產品設計師或APP設計師，也能夠從其餘通道的角度思考設計，給用戶更好的交互方式。

六、移動APP產品必須具有易學性

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

七、避免干擾和打斷

在玩手機時忽然沒電了、寫微博時又被老闆叫去作重要的事情、在搜索商品時收到一條重要的信息……在移動情境中，被各類其餘的事情打斷是很正常的。

（1）保存用戶的操做，減小重複勞動。

（2）網絡中斷狀態或編輯中斷狀態。

（3）銜接用戶的記憶而不是讓用戶重頭開始。

八、移動設計必須有愛

評價一個移動產品用戶體驗的好壞，除了要看它是否知足用戶需求和是否基友友好的可用性以外，能讓用戶感覺到驚喜是在移動產品設計最爲推崇的。這樣的設計每每是超越了用戶的指望，它的表現是功能、交互或者操做流雖不是用戶預期的，可是用戶能很好地理解，而且更高效、更有趣地完成任務。

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

從用戶的角度來看，APP指導性設計八個規範

一、充分考慮用戶的使用習慣

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

二、儘可能減小產品層級以及深度

在移動設備上，過多的層級會使用戶失去耐心而放棄對產品的使用。若是產品層級確實過深，考慮用一下幾種方法扁平化你的層級結構：使用選項卡（tabs）結合分類和內容的展現；容許穿越層級操做，好比容許用戶在第一層級對第二層級的內容進行直接操做。

三、操做欄的設計

首先咱們必須知道使用 FIT 來確保優先展現操做按鈕的準則。

F — 頻繁。用戶在訪問界面時，是否會頻繁使用這個操做？

I — 重要，這個操做對於用戶來講是否真的很重要？

T — 典型，在相似的APP中，是否把這個操做做爲典型的第一操做？

通常來講，若是符合 FIT 準則，則放在操做欄裏，不然，它屬於更多操做。

四、設計要主次分明

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

五、始終提供明確的導航

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

六、自動保存用戶輸入的內容或一些輸入提示信息

好比，微信的消息發送在沒聯網的狀況下發送會顯示歎號保存在手機端，聯網後只需從新發送便可，不須要從新鍵入信息。新浪微博在網絡很差的狀況下進行轉發或評論，相應的信息也會自動保存在草稿箱，聯網後操做一下便可。

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

八、儘可能去猜想用戶的行爲，但要容許糾錯

好比，用戶在進行搜索時，能夠根據用戶最近的搜索行爲給出參考答案。

今天整理的這些八項移動設計的基本原則和八項APP指導性設計規範。但願對你們有所幫助！同時也但願你們在APP設計的工做中，善於總結經驗和分享。

設計規範點擊這裏：ds.mockplus.cn/

原做者：朝夕旭瀟

原文：App設計的基本原則和規範 - CSDN博客