作者：IDC創(chuàng)新設(shè)計中心
原文地址：http://www.zcool.com.cn/article/ZMzg5MjQ0.html
手機(jī)端用戶界面設(shè)計中你是否會遇到一些問題？手機(jī)屏幕刑萸帷贡耽？用戶體驗不好榜晦？今天小編為你搜集了手機(jī)界面設(shè)計幾個需要注意的點堡赔，快來補(bǔ)課港庄。
1.交互設(shè)計規(guī)則適應(yīng)手機(jī)端
“ 不要因為你的屏幕空間小而認(rèn)為好的交互設(shè)計規(guī)則不適用锰茉∧啬瑁”
我們在設(shè)計前先回顧下交互設(shè)計的五大要素：
① 為目標(biāo)群設(shè)計（Goal-driven Design）：為你的目標(biāo)用戶群做設(shè)計。像調(diào)研或者訪談形式的用戶研究飒筑，能幫助你塑造目標(biāo)用戶群的人物特征片吊。這可以讓你為用戶目標(biāo)定制app的工作流程，以滿足他們的需求协屡。
② 可用性（Usability）：這一點看起來有些空俏脊，但你的應(yīng)用程序必須是可用的。如果用戶認(rèn)為你的app很復(fù)雜肤晓，那么他們肯定不會從App Store下載爷贫。可用性會讓產(chǎn)品變得有用补憾，這也是成為希望的第一步漫萄。
③ 功能與標(biāo)識（Affordance & Signifiers）：標(biāo)識是功能的提示作用。比如盈匾，帶下劃線的藍(lán)色文本的顯示腾务，你會知道點擊它會跳轉(zhuǎn)到別處 。使用正確的標(biāo)識削饵，讓用戶不用花費時間去考慮每個UI元素的用途岩瘦。
④ 易學(xué)（Learnability）：你希望用戶本能的知道如何使用的界面。這是設(shè)計模式的用場窿撬，在后文中我們將會說到启昧。熟悉的模式能夠讓用戶很容易地適應(yīng)新的app。
⑤ 反饋與響應(yīng)時間（Feedback & Response Time）：反饋讓用戶知道一個任務(wù)完成與否劈伴。它可以是一個很簡單的蜂鳴聲密末，又或是復(fù)雜一點的模態(tài)窗口。請確保您的意見是友好的，人性化苏遥，并通過尼爾森諾曼集團(tuán)規(guī)定的時間內(nèi)指導(dǎo)響應(yīng)饼拍。
這五大要素是你著手設(shè)計前應(yīng)該考慮的基礎(chǔ)。
2.用戶群是誰田炭？
“屏幕尺寸不是手機(jī)設(shè)計中的唯一約束师抄。據(jù)了解，用戶形成了界面約束的基礎(chǔ)教硫。因此叨吮，在創(chuàng)建針對目標(biāo)群app的第一步是要了解你的用戶∷簿兀”
下面是UX設(shè)計過程中強(qiáng)調(diào)的三個基本策略：
① 角色：角色是從你的目標(biāo)用戶的預(yù)期行為塑造虛構(gòu)人物茶鉴，它將幫你決定app需要什么來運營。
② 用戶場景：場景會模擬用戶會干什么景用。隨著用戶場景涵叮，你就可以設(shè)計出最適合他們的UI以及他們的想要達(dá)成的效果是怎樣。
③ 體驗地圖：在這里你可以了解所有的單一交互中的會出現(xiàn)的條件伞插。體驗地圖繪制的每個步驟都是用戶在APP中可能經(jīng)歷的割粮。它可以幫助你了解所有步驟發(fā)生時用戶的情感和周圍的情況。
3.原型圖是必須步驟
“設(shè)計和研究工作并行媚污。例如舀瓢，您可以基于你了解到的東西快速地勾畫出的用戶流程。在定稿之前耗美，創(chuàng)建一個簡單的原型京髓。它沒有被任何幻想——你的原型可以在紙上完成，這樣可以開始了解用戶使用的內(nèi)容和行為的流程商架⊙咴梗”
在勾畫原型之前，用書面大綱的形式先表現(xiàn)可以幫助你更清楚的摸索最重要的部分——內(nèi)容甸私。在內(nèi)容基礎(chǔ)上建立流程能讓你對頁面的總數(shù)有一個更精確的評估诚些。
接下來，你可以為app每一頁流程都繪制一張草圖皇型。然后將紙上的草圖剪出來形成紙上原型诬烹，或用工具（例如：UXPin）生成數(shù)字原型。
在這一過程中弃鸦，大綱可以幫助您快速了解不同頁面的流程绞吁；草圖將APP的布局和結(jié)構(gòu)的詳細(xì)信息融入流程中；最后唬格，快速原型可以幫助你測試這些用戶的想法家破。
4.熟悉的模式用起來才方便
“手機(jī)端設(shè)計會圍繞著許多設(shè)備具體的細(xì)微差別颜说，如拇指的位置和方位和姿勢√看一些流行的界面設(shè)計并且學(xué)習(xí)一些常見的移動端界面模式门粪，熟悉的模式讓你為創(chuàng)建一個“有家的感覺”的用戶界面∨肜В”
我不建議你照搬別人的設(shè)計玄妈，使用常見UI模式更像是可用性的基礎(chǔ)，然后再結(jié)合你自己的創(chuàng)造力髓梅。這樣你會確保你的app的設(shè)計不僅符合用戶的期望而且也不會感到無聊拟蜻。
有兩種常見的交互設(shè)計模式，我們可以看一下：
① 手勢：觸摸設(shè)備的定義由手勢決定枯饿。觸摸酝锅，滑動，雙擊奢方，捏和縮放正在成為用戶的第二自然反應(yīng)搔扁。
② 動畫：加入動作能使用戶專注于用戶界面。元素消失與元素滑出的視線也是有差的袱巨，前者是缺失;后者是之后還可以供用戶使用阁谆。當(dāng)動畫與手勢相結(jié)合，又有了更深度的體驗愉老。
手機(jī)的交互模式更有助于選取通用界面元素的布局。例如剖效，導(dǎo)航按鈕在屏幕的底部比在頂部更方便用戶用拇指點擊嫉入。
Yelp app是一個很直觀的移動交互設(shè)計的例子。這款應(yīng)用程序非常簡潔璧尸，美觀咒林，按鍵大，很清楚得表達(dá)他的目的爷光。所有按鈕很清晰垫竞，易于用戶理解。而且Yelp使用一些常見的移動用戶界面模式蛀序，如你在很多應(yīng)用的看到的底部的工具欄的模式欢瞪。
說到文字我們來分享一些技巧：
① 積極的短語標(biāo)簽讓用戶有欲望點擊。
② 重要的話必須先出現(xiàn)徐裸。移動端的用戶容易急躁遣鼓，所以用“全名”而不是“名稱（全稱）”。
③ 措辭必須一致重贺，并在每屏的風(fēng)格也要差不多骑祟。
檢查出庫capptivate用戶界面回懦，并使用您的接口優(yōu)秀的界面示例，將所有的手勢次企，動畫怯晕，和移動設(shè)計文本的細(xì)微差別。找一些好的界面模板看一下它的手勢缸棵、動畫贫贝、移動文本的細(xì)節(jié)差別，多做一些搜集蛉谜，選取合適的用在你的設(shè)計中稚晚。
5.要考慮到手指粗的用戶
“手指比鼠標(biāo)下的像素要厚得多，所以你要注意手指友好的設(shè)計型诚。具體來說客燕，給用戶指尖留有足夠的空間。如果你的按鈕太小或太緊密狰贯，用戶無法準(zhǔn)確（會增加挫折而遺棄）挖掘他們也搓。”
分享幾個按鈕和其他觸摸設(shè)計的技巧：
① 我們拿手機(jī)的方式不同涵紊。大概有三種方式拿的電話：一個拇指/一只手傍妒，兩只手/一位，兩只手/兩個大拇指摸柄。而且也有不同的方式來拿平板電腦颤练，但用戶大多是按住一側(cè)片。
② 我們的手指都很胖, OK驱负，這不是真的: 手指約有45-57像素寬嗦玖，這是比大多數(shù)推薦觸摸尺寸都大。例如跃脊，蘋果公司建議約44像素的正方形目標(biāo)宇挫。
44像素的準(zhǔn)則也并不總是如此。你想設(shè)計成多大事你的事酪术，不過器瘪，你應(yīng)該考慮人的手指及他們?nèi)绾闻capp進(jìn)行交互來設(shè)計。
6.漸變和陰影依然存在
“扁平化是現(xiàn)今的設(shè)計趨勢绘雁，但是橡疼，這并不意味著陰影和漸變都沒了。他們已經(jīng)又慢慢回到他們的設(shè)計方式咧七∷テ耄可以看看谷歌的Material Design，了解他們是如何做一個強(qiáng)勢復(fù)出继阻〕芴危”
當(dāng)設(shè)計按鈕废酷，切換等視覺效果，你必須考慮使用陰影抹缕。正如我們看臉上五官下的小陰影澈蟆，UI元素下有會有陰影∽垦校”陰影趴俘，通過擴(kuò)展梯度，使UI設(shè)計更自然的呈現(xiàn)給用戶奏赘。您可以使用陰影和漸變創(chuàng)建3D按鈕和輸入形式框寥闪，使元素出現(xiàn)嵌入和擴(kuò)展的效果。
我們來看下相關(guān)的元素
嵌入式元素：
- ① 輸入字段
- ② 按鈕觸動
- ③ 滑塊軌道
- ④ 未選中的單選按鈕
- ⑤ 復(fù)選框
外顯元素包括：
- ① 未按下按鈕
- ② 滑塊按鈕
- ③ 下拉控件
- ④ 選擇單選按鈕
- ⑤ 彈出窗口
看過扁平化設(shè)計趨勢的現(xiàn)在與未來磨淌，使用半扁平化設(shè)計解決嵌入和外顯元素會更為安全疲憋。
以上是小編跟大家分享的幾點UI設(shè)計小知識，身為設(shè)計師的你梁只，新技能Get到了么缚柳？也希望日后大家能多多補(bǔ)充自己的思維模式和設(shè)計方法的相關(guān)知識。
