為了能在交互設(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/
原作者:朝夕旭瀟