2018-8-1 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
版權(quán)申明：本文原創(chuàng)作者創(chuàng)意大全，感謝創(chuàng)意大全原創(chuàng)經(jīng)驗(yàn)分享！致敬哈
手機(jī)端用戶(hù)界面設(shè)計(jì)中你是否會(huì)遇到一些問(wèn)題？手機(jī)屏幕小？用戶(hù)體驗(yàn)不好？今天小編為你搜集了手機(jī)界面設(shè)計(jì)幾個(gè)需要注意的點(diǎn)，快來(lái)補(bǔ)課~
1.交互設(shè)計(jì)規(guī)則適應(yīng)手機(jī)端
“ 不要因?yàn)槟愕钠聊豢臻g小而認(rèn)為好的交互設(shè)計(jì)規(guī)則不適用。”
我們?cè)谠O(shè)計(jì)前先回顧下交互設(shè)計(jì)的五大要素：
① 為目標(biāo)群設(shè)計(jì)（Goal-driven Design）：為你的目標(biāo)用戶(hù)群做設(shè)計(jì)。像調(diào)研或者訪(fǎng)談形式的用戶(hù)研究，能幫助你塑造目標(biāo)用戶(hù)群的人物特征。這可以讓你為用戶(hù)目標(biāo)定制app的工作流程，以滿(mǎn)足他們的需求。
② 可用性（Usability）：這一點(diǎn)看起來(lái)有些空，但你的應(yīng)用程序必須是可用的。如果用戶(hù)認(rèn)為你的app很復(fù)雜，那么他們肯定不會(huì)從App Store下載。可用性會(huì)讓產(chǎn)品變得有用，這也是成為希望的第一步。
③ 功能與標(biāo)識(shí)（Affordance & Signifiers）：標(biāo)識(shí)是功能的提示作用。比如，帶下劃線(xiàn)的藍(lán)色文本的顯示，你會(huì)知道點(diǎn)擊它會(huì)跳轉(zhuǎn)到別處 。使用正確的標(biāo)識(shí)，讓用戶(hù)不用花費(fèi)時(shí)間去考慮每個(gè)UI元素的用途。
④ 易學(xué)（Learnability）：你希望用戶(hù)本能的知道如何使用的界面。這是設(shè)計(jì)模式的用場(chǎng)，在后文中我們將會(huì)說(shuō)到。熟悉的模式能夠讓用戶(hù)很容易地適應(yīng)新的app。
⑤ 反饋與響應(yīng)時(shí)間（Feedback & Response Time）：反饋?zhàn)層脩?hù)知道一個(gè)任務(wù)完成與否。它可以是一個(gè)很簡(jiǎn)單的蜂鳴聲，又或是復(fù)雜一點(diǎn)的模態(tài)窗口。請(qǐng)確保您的意見(jiàn)是友好的，人性化，并通過(guò)尼爾森諾曼集團(tuán)規(guī)定的時(shí)間內(nèi)指導(dǎo)響應(yīng)。
這五大要素是你著手設(shè)計(jì)前應(yīng)該考慮的基礎(chǔ)。
2.用戶(hù)群是誰(shuí)？
“屏幕尺寸不是手機(jī)設(shè)計(jì)中的唯一約束。據(jù)了解，用戶(hù)形成了界面約束的基礎(chǔ)。因此，在創(chuàng)建針對(duì)目標(biāo)群app的第一步是要了解你的用戶(hù)。”
下面是UX設(shè)計(jì)過(guò)程中強(qiáng)調(diào)的三個(gè)基本策略：
① 角色：角色是從你的目標(biāo)用戶(hù)的預(yù)期行為塑造虛構(gòu)人物，它將幫你決定app需要什么來(lái)運(yùn)營(yíng)。
② 用戶(hù)場(chǎng)景：場(chǎng)景會(huì)模擬用戶(hù)會(huì)干什么。隨著用戶(hù)場(chǎng)景，你就可以設(shè)計(jì)出最適合他們的UI以及他們的想要達(dá)成的效果是怎樣。
③ 體驗(yàn)地圖：在這里你可以了解所有的單一交互中的會(huì)出現(xiàn)的條件。體驗(yàn)地圖繪制的每個(gè)步驟都是用戶(hù)在APP中可能經(jīng)歷的。它可以幫助你了解所有步驟發(fā)生時(shí)用戶(hù)的情感和周?chē)那闆r。
3.原型圖是必須步驟
“設(shè)計(jì)和研究工作并行。例如，您可以基于你了解到的東西快速地勾畫(huà)出的用戶(hù)流程。在定稿之前，創(chuàng)建一個(gè)簡(jiǎn)單的原型。它沒(méi)有被任何幻想——你的原型可以在紙上完成，這樣可以開(kāi)始了解用戶(hù)使用的內(nèi)容和行為的流程。”
在勾畫(huà)原型之前，用書(shū)面大綱的形式先表現(xiàn)可以幫助你更清楚的摸索最重要的部分——內(nèi)容。在內(nèi)容基礎(chǔ)上建立流程能讓你對(duì)頁(yè)面的總數(shù)有一個(gè)更的評(píng)估。
接下來(lái)，你可以為app每一頁(yè)流程都繪制一張草圖。然后將紙上的草圖剪出來(lái)形成紙上原型，或用工具（例如：UXPin）生成數(shù)字原型。
在這一過(guò)程中，大綱可以幫助您快速了解不同頁(yè)面的流程；草圖將APP的布局和結(jié)構(gòu)的詳細(xì)信息融入流程中；最后，快速原型可以幫助你測(cè)試這些用戶(hù)的想法。
4.熟悉的模式用起來(lái)才方便
“手機(jī)端設(shè)計(jì)會(huì)圍繞著許多設(shè)備具體的細(xì)微差別，如拇指的位置和方位和姿勢(shì)。看一些流行的界面設(shè)計(jì)并且學(xué)習(xí)一些常見(jiàn)的移動(dòng)端界面模式，熟悉的模式讓你為創(chuàng)建一個(gè)“有家的感覺(jué)”的用戶(hù)界面。”
我不建議你照搬別人的設(shè)計(jì)，使用常見(jiàn)UI模式更像是可用性的基礎(chǔ)，然后再結(jié)合你自己的創(chuàng)造力。這樣你會(huì)確保你的app的設(shè)計(jì)不僅符合用戶(hù)的期望而且也不會(huì)感到無(wú)聊。
有兩種常見(jiàn)的交互設(shè)計(jì)模式，我們可以看一下：
① 手勢(shì)：觸摸設(shè)備的定義由手勢(shì)決定。觸摸，滑動(dòng)，雙擊，捏和縮放正在成為用戶(hù)的第二自然反應(yīng)。
② 動(dòng)畫(huà)：加入動(dòng)作能使用戶(hù)專(zhuān)注于用戶(hù)界面。元素消失與元素滑出的視線(xiàn)也是有差的，前者是缺失;后者是之后還可以供用戶(hù)使用。當(dāng)動(dòng)畫(huà)與手勢(shì)相結(jié)合，又有了更深度的體驗(yàn)。
手機(jī)的交互模式更有助于選取通用界面元素的布局。例如，導(dǎo)航按鈕在屏幕的底部比在頂部更方便用戶(hù)用拇指點(diǎn)擊。
Yelpapp是一個(gè)很直觀的移動(dòng)交互設(shè)計(jì)的例子。這款應(yīng)用程序非常簡(jiǎn)潔，美觀，按鍵大，很清楚得表達(dá)他的目的。所有按鈕很清晰，易于用戶(hù)理解。而且Yelp使用一些常見(jiàn)的移動(dòng)用戶(hù)界面模式，如你在很多應(yīng)用的看到的底部的工具欄的模式。
說(shuō)到文字我們來(lái)分享一些技巧：
① 積極的短語(yǔ)標(biāo)簽讓用戶(hù)有欲望點(diǎn)擊。
② 重要的話(huà)必須先出現(xiàn)。移動(dòng)端的用戶(hù)容易急躁，所以用“全名”而不是“名稱(chēng)（全稱(chēng)）”。
③ 措辭必須一致，并在每屏的風(fēng)格也要差不多。
檢查出庫(kù)capptivate用戶(hù)界面，并使用您的接口優(yōu)秀的界面示例，將所有的手勢(shì)，動(dòng)畫(huà)，和移動(dòng)設(shè)計(jì)文本的細(xì)微差別。找一些好的界面模板看一下它的手勢(shì)、動(dòng)畫(huà)、移動(dòng)文本的細(xì)節(jié)差別，多做一些搜集，選取合適的用在你的設(shè)計(jì)中。
5.要考慮到手指粗的用戶(hù)
“手指比鼠標(biāo)下的像素要厚得多，所以你要注意手指友好的設(shè)計(jì)。具體來(lái)說(shuō)，給用戶(hù)指尖留有足夠的空間。如果你的按鈕太小或太緊密，用戶(hù)無(wú)法準(zhǔn)確（會(huì)增加挫折而遺棄）挖掘他們。”
分享幾個(gè)按鈕和其他觸摸設(shè)計(jì)的技巧：
① 我們拿手機(jī)的方式不同。大概有三種方式拿的電話(huà)：一個(gè)拇指/一只手，兩只手/一位，兩只手/兩個(gè)大拇指。而且也有不同的方式來(lái)拿平板電腦，但用戶(hù)大多是按住一側(cè)片。
② 我們的手指都很胖,OK，這不是真的: 手指約有45-57像素寬，這是比大多數(shù)推薦觸摸尺寸都大。例如，蘋(píng)果公司建議約44像素的正方形目標(biāo)。
44像素的準(zhǔn)則也并不總是如此。你想設(shè)計(jì)成多大事你的事，不過(guò)，你應(yīng)該考慮人的手指及他們?nèi)绾闻capp進(jìn)行交互來(lái)設(shè)計(jì)。
6.漸變和陰影依然存在
“扁平化是現(xiàn)今的設(shè)計(jì)趨勢(shì)，但是，這并不意味著陰影和漸變都沒(méi)了。他們已經(jīng)又慢慢回到他們的設(shè)計(jì)方式。可以看看谷歌的Material Design，了解他們是如何做一個(gè)強(qiáng)勢(shì)復(fù)出。”
當(dāng)設(shè)計(jì)按鈕，切換等視覺(jué)效果，你必須考慮使用陰影。正如我們看臉上五官下的小陰影，UI元素下有會(huì)有陰影。”陰影，通過(guò)擴(kuò)展梯度，使UI設(shè)計(jì)更自然的呈現(xiàn)給用戶(hù)。您可以使用陰影和漸變創(chuàng)建3D按鈕和輸入形式框，使元素出現(xiàn)嵌入和擴(kuò)展的效果。
我們來(lái)看下相關(guān)的元素
嵌入式元素：
① 輸入字段
② 按鈕觸動(dòng)
③ 滑塊軌道
④ 未選中的單選按鈕
⑤ 復(fù)選框
外顯元素包括：
① 未按下按鈕
② 滑塊按鈕
③ 下拉控件
④ 選擇單選按鈕
⑤ 彈出窗口
看過(guò)扁平化設(shè)計(jì)趨勢(shì)的現(xiàn)在與未來(lái)，使用半扁平化設(shè)計(jì)解決嵌入和外顯元素會(huì)更為安全。
以上是小編跟大家分享的幾點(diǎn)UI設(shè)計(jì)小知識(shí)，身為設(shè)計(jì)師的你，新技能Get到了么？也希望日后大家能多多補(bǔ)充自己的思維模式和設(shè)計(jì)方法的相關(guān)知識(shí)。
（Yelpapp）
藍(lán)藍(lán)設(shè)計(jì)( m.73404.com.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
相關(guān)文章：
－－－－－－－－－－－－－－－－－－
創(chuàng)意設(shè)計(jì)的方法—無(wú)窮關(guān)聯(lián)法
UI設(shè)計(jì)師的日常——UI設(shè)計(jì)師平常都干些什么
幫助您做出漂亮版式設(shè)計(jì)的八個(gè)實(shí)用技巧
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.73404.com.cn