為了能在互動設計和使用者體驗上做出比競品更優秀的移動APP産品,我們必須知道移動設計的基本原則。
目前移動設計在我們的工作中越來越重要啦,除了掌握基本的UI設計技能之外,我們也要對移動網際網路的特征有所認識。為了能在互動設計和使用者體驗上做出比競品更優秀的移動APP産品,我們必須知道移動設計的基本原則。
之前25學堂有跟大家說到移動APP用戶端的
UI設計原則及UI界面适配步驟,還有APP觸控操作設計原則之觸控目标的尺寸大小。
從移動網際網路特征的角度來看,移動設計的基本八條原則
1、内容優先 ,合理的布局
對于手機而言,螢幕空間資源顯得非常珍貴,為了提升螢幕空間的使用率,界面布局應以内容為核心,而提供符合使用者期望的内容是移動應用獲得成功的關鍵。如何設計群組織内容,使使用者能快速了解移動應用所提供的内容,使内容真正有意義,這是非常關鍵的。
(1)充足内容,使内容符合移動的特征。
(2)優先突出使用者需要的資訊,而簡化頁面的導航。
(3)适時提升螢幕空間的使用率。
2、是為移動觸摸而設計
點選操作是PC時代互動的基礎,在觸摸屏裝置上基于手指的手勢操作已經代替了滑鼠的點選操作。
(1)以資訊架構為基礎,履歷手勢互動規範。
(2)優先設計自然的手勢互動,而不是TAP點選
(3)引導使用者在情境中學習手勢操作。
(4)特殊手勢不是必須的。
(5)可觸區域必須大于7×7mm,盡量大于9×9mm。
(6)手勢操作需要提供過程及回報示範。
3、輸入方式的 轉換
文字輸入是移動端的軟肋之一,不管是手寫輸入還是鍵盤輸入,操作效率都相對較低。在行走或者單手操作時,輸入的出錯率也比較高。
(1)減少文本輸入,轉化輸入形式。
(2)簡化輸入選項,變填空為選擇。
(3)使用手機已有的傳感器輸入。
4、操作流程必須確定流暢性
在移動産品的操作過程中會碰到多種多樣的情況——找不到目标、不知道該怎麼操作、操作後沒有及時回報,等等,這都會對産品的流暢性造成影響。在移動産品的設計中主要從三個方面來考慮産品的流暢性:
(1)手指及手勢的操作流。
(2)使用者的注意流。
(3)轉場流暢或者自然,不能牽強!
5、多通道設計
多通道設計是指系統的輸入和輸入都可以由視覺、聽覺、觸覺等來協作完成,協同的多通道界面和互動也會讓使用者更有真實感和沉浸感。
目前各個系統平台的基礎技術已經越來越成熟,語音輸入、手勢識别及其他由多種傳感器組成的綜合識别系統也會給使用者帶來更接近自然的感覺。
作為産品設計師或APP設計師,也可以從其他通道的角度思考設計,給使用者更好的互動方式。
6、移動APP産品必須具備易學性
對于移動産品,提倡的是簡單、直接的操作,傾向于清晰地表達産品目标和價值。讓使用者快速學會使用,盡量不要讓他們檢視幫助文檔。界面架構簡單,明了,導航設計清晰易了解,操作簡單可見,通過界面元素的表意的和界面提供的想說就能讓使用者清晰地知道操作方式。隻有這樣的設計,才能讓使用者的學習使用沒有負擔,而不是通過幫助系統來教會使用者操作。
7、避免幹擾和打斷
在玩手機時突然沒電了、寫微網誌時又被老闆叫去做重要的事情、在搜尋商品時收到一條重要的資訊……在移動情境中,被各種其他的事情打斷是很正常的。
(1)儲存使用者的操作,減少重複勞動。
(2)網絡中斷狀态或編輯中斷狀态。
(3)銜接使用者的記憶而不是讓使用者重頭開始。
8、移動設計必須有愛
評價一個移動産品使用者體驗的好壞,除了要看它是否滿足使用者需求和是否基友友好的可用性之外,能讓使用者感受到驚喜是在移動産品設計最為推崇的。這樣的設計往往是超越了使用者的期望,它的表現是功能、互動或者操作流雖不是使用者預期的,但是使用者能很好地了解,并且更高效、更有趣地完成任務。
移動産品的設計應是驚喜有趣、智能高效和貼心的。如何打造APP的趣味性?
從使用者的角度來看,
APP指導性設計八個規範1、充分考慮使用者的使用習慣
比如大多數人拿手機的時候是雙手握還是單手握,單手握的時候是右手操作還是左手操作,操作的時候用哪個手指就能進行操作。考慮到使用者的使用習慣有助于在設計時避開手指的觸碰盲區。
2、盡量減少産品層級以及深度
在移動裝置上,過多的層級會使使用者失去耐心而放棄對産品的使用。如果産品層級确實過深,考慮用一下幾種方法扁平化你的層級結構:使用頁籤(tabs)結合分類和内容的展示;允許穿越層級操作,比如允許使用者在第一層級對第二層級的内容進行直接操作。
3、操作欄的設計
首先我們必須知道使用 FIT 來確定優先展示操作按鈕的準則。
F — 頻繁。使用者在通路界面時,是否會頻繁使用這個操作?
I — 重要,這個操作對于使用者來說是否真的很重要?
T — 典型,在類似的APP中,是否把這個操作作為典型的第一操作?
一般來說,如果符合 FIT 準則,則放在操作欄裡,否則,它屬于更多操作。
4、設計要主次分明
将主流使用者最常用的 20% 功能進行顯現,其他進行适度的隐藏,越不常用的功能,隐藏的層級越深。例如:微信的掃本機二維碼。要避免新浪微網誌廣場的堆積式設計。
5、始終提供明确的導航
即要提供明确的傳回上一級的操作。不能中斷操作流程。
6、自動儲存使用者輸入的内容或一些輸入提示資訊
比如,微信的消息發送在沒聯網的情況下發送會顯示歎号儲存在手機端,聯網後隻需重新發送即可,不需要重新鍵入資訊。新浪微網誌在網絡不好的情況下進行轉發或評論,相應的資訊也會自動儲存在草稿箱,聯網後操作一下即可。
7、APP底部工具欄導航數目3-5個為最佳
8、盡量去猜測使用者的行為,但要允許糾錯
比如,使用者在進行搜尋時,可以根據使用者最近的搜尋行為給出參考答案。
今天整理的這些八項移動設計的基本原則和八項APP指導性
設計規範。希望對大家有所幫助!同時也希望大家在APP設計的工作中,善于總結經驗和分享。
設計規範點選這裡:
https://ds.mockplus.cn/原作者
: 朝夕旭潇原文:
App設計的基本原則和規範 - CSDN部落格