App設(shè)計的基本原則和規(guī)范

為了能在交互設(shè)計和用戶體驗上做出比競品更優(yōu)秀的移動APP產(chǎn)品,我們必須知道移動設(shè)計的基本原則乙嘀。

目前移動設(shè)計在我們的工作中越來越重要啦破喻,除了掌握基本的UI設(shè)計技能之外,我們也要對移動互聯(lián)網(wǎng)的特征有所認識婴噩。為了能在交互設(shè)計和用戶體驗上做出比競品更優(yōu)秀的移動APP產(chǎn)品,我們必須知道移動設(shè)計的基本原則顶籽。

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

從移動互聯(lián)網(wǎng)特征的角度來看究驴,移動設(shè)計的基本八條原則


1洒忧、內(nèi)容優(yōu)先 ,合理的布局

對于手機而言榄鉴,屏幕空間資源顯得非常珍貴蛉抓,為了提升屏幕空間的利用率,界面布局應(yīng)以內(nèi)容為核心驶忌,而提供符合用戶期望的內(nèi)容是移動應(yīng)用獲得成功的關(guān)鍵笑跛。如何設(shè)計和組織內(nèi)容,使用戶能快速理解移動應(yīng)用所提供的內(nèi)容几苍,使內(nèi)容真正有意義陈哑,這是非常關(guān)鍵的。

(1)充足內(nèi)容,使內(nèi)容符合移動的特征赚抡。?

(2)優(yōu)先突出用戶需要的信息涂臣,而簡化頁面的導航售担。?

(3)適時提升屏幕空間的利用率署辉。


2、是為移動觸摸而設(shè)計?

點擊操作是PC時代交互的基礎(chǔ)哥攘,在觸摸屏設(shè)備上基于手指的手勢操作已經(jīng)代替了鼠標的點擊操作材鹦。

(1)以信息架構(gòu)為基礎(chǔ),簡歷手勢交互規(guī)范栅葡。?

(2)優(yōu)先設(shè)計自然的手勢交互尤泽,而不是TAP點擊?

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

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

(5)可觸區(qū)域必須大于7×7mm,盡量大于9×9mm鬼店。?

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


3滥玷、輸入方式的 轉(zhuǎn)換

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

(1)減少文本輸入,轉(zhuǎn)化輸入形式纹蝴。?

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

(3)使用手機已有的傳感器輸入兼犯。


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

在移動產(chǎn)品的操作過程中會碰到多種多樣的情況——找不到目標锉罐、不知道該怎么操作绕娘、操作后沒有及時反饋,等等侨舆,這都會對產(chǎn)品的流暢性造成影響绢陌。在移動產(chǎn)品的設(shè)計中主要從三個方面來考慮產(chǎn)品的流暢性:

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

(2)用戶的注意流。?

(3)轉(zhuǎn)場流暢或者自然秤掌,不能牽強闻鉴!?


5、多通道設(shè)計

多通道設(shè)計是指系統(tǒng)的輸入和輸入都可以由視覺瓶竭、聽覺渠羞、觸覺等來協(xié)作完成,協(xié)同的多通道界面和交互也會讓用戶更有真實感和沉浸感腋舌。

當前各個系統(tǒng)平臺的基礎(chǔ)技術(shù)已經(jīng)越來越成熟渗蟹,語音輸入、手勢識別及其他由多種傳感器組成的綜合識別系統(tǒng)也會給用戶帶來更接近自然的感覺授艰。

作為產(chǎn)品設(shè)計師或APP設(shè)計師世落,也可以從其他通道的角度思考設(shè)計,給用戶更好的交互方式谷朝。

6武花、移動APP產(chǎn)品必須具備易學性?

對于移動產(chǎn)品,提倡的是簡單体箕、直接的操作,傾向于清晰地表達產(chǎn)品目標和價值跃须。讓用戶快速學會使用娃兽,盡量不要讓他們查看幫助文檔。界面架構(gòu)簡單第练,明了轻要,導航設(shè)計清晰易理解,操作簡單可見驹碍,通過界面元素的表意的和界面提供的想說就能讓用戶清晰地知道操作方式凡恍。只有這樣的設(shè)計嚼酝,才能讓用戶的學習使用沒有負擔,而不是通過幫助系統(tǒng)來教會用戶操作闽巩。

7、避免干擾和打斷

在玩手機時突然沒電了洼冻、寫微博時又被老板叫去做重要的事情撞牢、在搜索商品時收到一條重要的信息……在移動情境中,被各種其他的事情打斷是很正常的所宰。

(1)保存用戶的操作畜挥,減少重復勞動。?

(2)網(wǎng)絡(luò)中斷狀態(tài)或編輯中斷狀態(tài)件炉。?

(3)銜接用戶的記憶而不是讓用戶重頭開始矮湘。?

8、移動設(shè)計必須有愛

評價一個移動產(chǎn)品用戶體驗的好壞磕蛇,除了要看它是否滿足用戶需求和是否基友友好的可用性之外十办,能讓用戶感受到驚喜是在移動產(chǎn)品設(shè)計最為推崇的向族。這樣的設(shè)計往往是超越了用戶的期望,它的表現(xiàn)是功能件相、交互或者操作流雖不是用戶預期的夜矗,但是用戶能很好地理解,并且更高效罢荡、更有趣地完成任務(wù)。

移動產(chǎn)品的設(shè)計應(yīng)是驚喜有趣惭缰、智能高效和貼心的笼才。如何打造APP的趣味性?

從用戶的角度來看,APP指導性設(shè)計八個規(guī)范


1各谚、充分考慮用戶的使用習慣

比如大多數(shù)人拿手機的時候是雙手握還是單手握到千,單手握的時候是右手操作還是左手操作,操作的時候用哪個手指就能進行操作膀息×苏裕考慮到用戶的使用習慣有助于在設(shè)計時避開手指的觸碰盲區(qū)柿汛。

2、盡量減少產(chǎn)品層級以及深度

在移動設(shè)備上裁替,過多的層級會使用戶失去耐心而放棄對產(chǎn)品的使用貌笨。如果產(chǎn)品層級確實過深,考慮用一下幾種方法扁平化你的層級結(jié)構(gòu):使用選項卡(tabs)結(jié)合分類和內(nèi)容的展示昌腰;允許穿越層級操作净刮,比如允許用戶在第一層級對第二層級的內(nèi)容進行直接操作淹父。


3、操作欄的設(shè)計

首先我們必須知道使用 FIT 來確保優(yōu)先展示操作按鈕的準則困介。

F — 頻繁。用戶在訪問界面時徒扶,是否會頻繁使用這個操作根穷?

I — 重要,這個操作對于用戶來說是否真的很重要圈澈?

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

一般來說悬荣,如果符合 FIT 準則似踱,則放在操作欄里,否則囚戚,它屬于更多操作轧简。

4、設(shè)計要主次分明

將主流用戶最常用的 20% 功能進行顯現(xiàn)拳芙,其他進行適度的隱藏皮璧,越不常用的功能悴务,隱藏的層級越深譬猫。例如:微信的掃本機二維碼羡疗。要避免新浪微博廣場的堆積式設(shè)計叨恨。


5、始終提供明確的導航

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

6益愈、自動保存用戶輸入的內(nèi)容或一些輸入提示信息

比如夷家,微信的消息發(fā)送在沒聯(lián)網(wǎng)的情況下發(fā)送會顯示嘆號保存在手機端,聯(lián)網(wǎng)后只需重新發(fā)送即可摸袁,不需要重新鍵入信息义屏。新浪微博在網(wǎng)絡(luò)不好的情況下進行轉(zhuǎn)發(fā)或評論闽铐,相應(yīng)的信息也會自動保存在草稿箱,聯(lián)網(wǎng)后操作一下即可踢星。

7隙咸、APP底部工具欄導航數(shù)目3-5個為最佳


8五督、盡量去猜測用戶的行為,但要允許糾錯

比如副签,用戶在進行搜索時,可以根據(jù)用戶最近的搜索行為給出參考答案修壕。

今天整理的這些八項移動設(shè)計的基本原則和八項APP指導性設(shè)計規(guī)范遏考。希望對大家有所幫助灌具!同時也希望大家在APP設(shè)計的工作中,善于總結(jié)經(jīng)驗和分享督笆。

設(shè)計規(guī)范點擊這里:https://ds.mockplus.cn/


原作者朝夕旭瀟

原文:App設(shè)計的基本原則和規(guī)范 - CSDN博客

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末娃肿,一起剝皮案震驚了整個濱河市珠十,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌晒杈,老刑警劉巖孔厉,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件撰豺,死亡現(xiàn)場離奇詭異污桦,居然都是意外死亡,警方通過查閱死者的電腦和手機捆憎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門梭纹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來变抽,“玉大人氮块,你說我怎么就攤上這事诡宗∷郑” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵螃概,是天一觀的道長吊洼。 經(jīng)常有香客問我制肮,道長,這世上最難降的妖魔是什么超燃? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮约素,結(jié)果婚禮上笆凌,老公的妹妹穿的比我還像新娘。我一直安慰自己送悔,他們只是感情好爪模,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布屋灌。 她就那樣靜靜地躺著,像睡著了一般祠丝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上岸蜗,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天璃岳,我揣著相機與錄音蟆肆,去河邊找鬼。 笑死枚冗,一個胖子當著我的面吹牛蛇损,可吹牛的內(nèi)容都是我干的淤齐。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼稚疹,長吁一口氣:“原來是場噩夢啊……” “哼内狗!你這毒婦竟也來了义锥?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎柱恤,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體梗顺,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡妙真,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了荚守。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片珍德。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡练般,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出锈候,到底是詐尸還是另有隱情薄料,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布泵琳,位于F島的核電站摄职,受9級特大地震影響获列,放射性物質(zhì)發(fā)生泄漏谷市。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一击孩、第九天 我趴在偏房一處隱蔽的房頂上張望迫悠。 院中可真熱鬧,春花似錦巩梢、人聲如沸创泄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鞠抑。三九已至,卻和暖如春忌警,著一層夾襖步出監(jiān)牢的瞬間搁拙,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工法绵, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留箕速,地道東北人。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓礼烈,卻偏偏與公主長得像,于是被迫代替她去往敵國和親婆跑。 傳聞我的和親對象是個殘疾皇子此熬,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 目前移動設(shè)計在我們的工作中越來越重要啦,除了掌握基本的UI設(shè)計技能之外滑进,我們也要對移動互聯(lián)網(wǎng)的特征有所認識犀忱。為了能...
    神木驚蟄閱讀 2,768評論 0 2
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,969評論 3 119
  • 過去怎么說呢扶关,我有點愛慕虛榮阴汇。羨慕別人那光鮮亮麗的日子,還特別愿意和那個圈子的人成為朋友节槐。垂涎欲滴別人的生活搀庶,人家...
    南方的愜意符號閱讀 619評論 7 9
  • 想你時 我有點慌亂 想你時 我不知所措 想你時 像透明的水晶 想你時 似燈塔的光芒 寬闊的海面上 輪船很小 魚兒很...
    我心依然_580a閱讀 582評論 57 60
  • 有幾天沒更新了拐纱,這幾天上海天氣比較熱,天氣一熱就懶得寫了哥倔。今天感覺還好秸架,就寫下導航部分的封裝吧。關(guān)于環(huán)境搭建和底部...
    maxZhang閱讀 1,591評論 0 5