中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：本文作者從事智能手機(jī)和平板電腦的移動(dòng)端設(shè)計(jì)工作多年，通過(guò)整合臺(tái)式機(jī)設(shè)計(jì)經(jīng)驗(yàn)、對(duì)移動(dòng)用戶(hù)的新舊認(rèn)知，以及優(yōu)秀作品中所遵循的普遍移動(dòng)設(shè)計(jì)原則，為大家進(jìn)行了總結(jié)和分析，并且列舉了具體的案例，希望能夠幫助大家理解并應(yīng)用于實(shí)踐。

提及移動(dòng)設(shè)計(jì)原則你會(huì)想到哪些？或許你還沒(méi)有對(duì)其進(jìn)行清晰地梳理，但它們一直在潛移默化地影響著你，早已深入你的設(shè)計(jì)思維。例如：對(duì)用戶(hù)行動(dòng)點(diǎn)的布局、特殊場(chǎng)景的包容、異常狀態(tài)的反饋等。

我們總希望通過(guò)良好的設(shè)計(jì)與用戶(hù)友好交流，雖然很多時(shí)候這些僅存于瞬間感知。因此，讓移動(dòng)用戶(hù)在很多方面擁有PC端的流暢和高效體驗(yàn)，以及克服種種“不理想”狀況，是一個(gè)很棒的設(shè)計(jì)挑戰(zhàn)。

當(dāng)然，錯(cuò)誤是不可避免的，我們需要做的是錯(cuò)誤預(yù)防，而非錯(cuò)誤處理，畢竟錯(cuò)誤一旦發(fā)生，用戶(hù)可能不會(huì)選擇抱怨，而是直接離開(kāi)。

一、我的移動(dòng)設(shè)計(jì)經(jīng)驗(yàn)

多年來(lái)，我一直從事智能手機(jī)和平板電腦的移動(dòng)端（包括 Web 和 Native App）設(shè)計(jì)。作為 SimpleSite 設(shè)計(jì)團(tuán)隊(duì)的負(fù)責(zé)人，我參與了 “基于瀏覽器的 DIY 網(wǎng)站移動(dòng)設(shè)備生成器” 的新版本設(shè)計(jì)。

通常，我們不會(huì)優(yōu)先設(shè)計(jì)移動(dòng)設(shè)備，但這個(gè)項(xiàng)目例外。我們整合了臺(tái)式機(jī)設(shè)計(jì)經(jīng)驗(yàn)、對(duì)移動(dòng)用戶(hù)的新舊認(rèn)知，以及那些優(yōu)秀作品中所遵循的普遍移動(dòng)設(shè)計(jì)原則。

無(wú)論你從事 Web 還是 Native App 設(shè)計(jì)，這些原則均適用，但它們往往被模糊地理解，以至于大家忘記或忽視它們的存在。希望通過(guò)此文和其中的具體案例，幫助大家理解并應(yīng)用于實(shí)踐。

二、原則1：力求極簡(jiǎn)

我告訴每一個(gè)人要 追求極簡(jiǎn)，當(dāng)空間受限時(shí)，這是最重要的原則。將所有必要的 UI 元素放進(jìn)界面，并保持有序和明了，或許是件棘手的事情。

對(duì)每個(gè)屏幕上的 UI 元素進(jìn)行優(yōu)先級(jí)排序時(shí)，需要非常謹(jǐn)慎。通常，我們?nèi)菀椎羧胍粋€(gè)陷阱：將過(guò)多的信息打包進(jìn)界面。試圖為用戶(hù)提供他們可能想要的一切，而最終只會(huì)讓用戶(hù)不知所措。

“完美不是無(wú)以復(fù)加，而是沒(méi)有可以拿走的?！薄?Antoine de Saint-Exupéry

請(qǐng)深刻洞察移動(dòng)用戶(hù)的需求，試著回答，他們最重要的任務(wù)是什么？哪些信息和功能是必不可少的？

盡量保持每個(gè)界面僅有一個(gè)行動(dòng)目標(biāo)，可以借助過(guò)濾器、合理的默認(rèn)值、高效的排序、易于訪問(wèn)的搜索功能以及漸進(jìn)式的信息展示等解決方案來(lái)實(shí)現(xiàn)。當(dāng)優(yōu)先級(jí)排列完成，就可以利用留白、簡(jiǎn)潔的字體以及其它視覺(jué)設(shè)計(jì)進(jìn)一步簡(jiǎn)化。

速度是體驗(yàn)的一部分，加載頁(yè)面或內(nèi)容所需要的時(shí)間越長(zhǎng)，體驗(yàn)就越差。一個(gè)極簡(jiǎn)主義設(shè)計(jì)，可以提升用戶(hù)體驗(yàn)和產(chǎn)品加載速度。因此，在考量功能、內(nèi)容、視覺(jué)效果前，請(qǐng)優(yōu)先考慮加載速度。畢竟，無(wú)論是你或者用戶(hù)，魚(yú)和熊掌不可兼得。

1. 案例一：Instapaper

Instapaper 是個(gè)不錯(cuò)的案例，它允許用戶(hù)快速地收藏文章以便稍后閱讀，App 的首頁(yè)也圍繞這一目的而設(shè)計(jì) —— 僅展示用戶(hù)收藏的文章列表。

Instapaper App 的首頁(yè)（作者截圖）

可以看到，列表頂部設(shè)有搜索欄，兩側(cè)各有一個(gè)菜單，主頁(yè)面沒(méi)有使用常見(jiàn)的底部標(biāo)簽欄。此外，界面使用干凈的單色設(shè)計(jì)。

2. 案例二：Behance

Behance 的極簡(jiǎn)設(shè)計(jì)同樣值得借鑒，產(chǎn)品多運(yùn)用留白設(shè)計(jì)，每個(gè)頁(yè)面都有清晰的焦點(diǎn)。

Behance App 的首頁(yè)和個(gè)人資料頁(yè)（作者的屏幕截圖）

三、原則2：重要的元素置于底部或中心

Steven Hoober[1] 針對(duì)移動(dòng)用戶(hù)行為，做過(guò)一系列有趣的研究。當(dāng)用戶(hù)單手操作手機(jī)時(shí)，將最重要的 UI 控件放在其拇指可觸及的范圍內(nèi)，這很關(guān)鍵。他還證明了用戶(hù)多種握持手機(jī)的方式。

（[1]胡伯（Steven Hoober），從事交互設(shè)計(jì)工作超過(guò) 15 年，其中涉及各種行業(yè)、各種用戶(hù)，涉足手機(jī)界面交互設(shè)計(jì) 10 年，包括設(shè)計(jì)文檔的處理、規(guī)劃設(shè)計(jì)原則和設(shè)計(jì)模式，出版《移動(dòng)應(yīng)用界面設(shè)計(jì)》。）

拇指在智能手機(jī)屏幕上的觸角（來(lái)自史蒂芬·胡伯的報(bào)告）

此外，他還表明，無(wú)論是閱讀或內(nèi)容互動(dòng)，移動(dòng)用戶(hù)更喜歡垂直居中的信息布局。

“我做了一項(xiàng)研究，讓用戶(hù)將屏幕中的內(nèi)容移動(dòng)到他們喜歡的位置。事實(shí)證明。一旦將內(nèi)容放置到屏幕中央，用戶(hù)就會(huì)想要選擇它?！薄猄teven Hoober

如有必要，可以考慮將一些重要的信息居中，但不要特意將頁(yè)腳菜單變成底部標(biāo)簽欄。

“當(dāng)有選擇的時(shí)候，移動(dòng)用戶(hù)更喜歡在屏幕中央閱讀和交互。”

受試者偏愛(ài)點(diǎn)擊的位置熱圖（史蒂芬·胡伯研究顯示）

1. 案例一：Audible

底部標(biāo)簽欄常見(jiàn)于各類(lèi) App，這樣的設(shè)計(jì)是有充分理由的。

除此之外，音樂(lè)播放器設(shè)計(jì)是一個(gè)很好的案例，它的主控件就位于屏幕下半部分，再比如播客、有聲讀物等應(yīng)用。例如 Audible 就是很好的有聲讀物設(shè)計(jì)案例。

音頻 App Audible 的播放器（作者截圖）

2. 案例二：Fitbit

Fitbit 是一款記錄器產(chǎn)品，其主要功能是向用戶(hù)展示數(shù)據(jù)信息。因此，它將核心信息放置于屏幕中心，便于用戶(hù)瀏覽。

Fitbit App 的主屏幕（作者截圖）

四、原則3：減少輸入

觸屏鍵盤(pán)在許多方面都是一個(gè)很棒的發(fā)明，但無(wú)法回避的是，太長(zhǎng)地信息輸入會(huì)導(dǎo)致用戶(hù)體驗(yàn)不佳，并且移動(dòng)設(shè)備的按鍵較小，與筆記本電腦或外接鍵盤(pán)的機(jī)械運(yùn)動(dòng)相比，反饋效果也更差。

此外，相較 PC 端用戶(hù)來(lái)說(shuō)，移動(dòng)用戶(hù)與界面的交互時(shí)間更短，他們可能只是在忙碌中或者排隊(duì)時(shí)尋找 1 分鐘的消遣。

某些配件可以將筆記本電腦或臺(tái)式機(jī)的優(yōu)勢(shì)帶入移動(dòng)設(shè)備。例如，在平板電腦上使用外接鍵盤(pán)、鼠標(biāo)或者手寫(xiě)筆，用戶(hù)的行為習(xí)慣會(huì)更接近 PC 端。不過(guò)，對(duì)于部分用戶(hù)來(lái)說(shuō)，情況可能并非如此。

基本上，移動(dòng)用戶(hù)在使用網(wǎng)站或產(chǎn)品時(shí)，不會(huì)輸入大量文本，也沒(méi)有時(shí)間。因此，你的設(shè)計(jì)應(yīng)該：

• 對(duì)于可以自動(dòng)填充的內(nèi)容，提供自動(dòng)填充設(shè)計(jì)
• 當(dāng)用戶(hù)開(kāi)始鍵入或輸入搜索詞后，給出合理的建議
• 允許用戶(hù)選擇類(lèi)別或以其它方式篩選內(nèi)容
• 使用 日期選擇器 代替手動(dòng)輸入這只是幾個(gè)常見(jiàn)的設(shè)計(jì)方法，當(dāng)你習(xí)慣反問(wèn) “用戶(hù)能否以更少的輸入完成任務(wù)” 時(shí)，便會(huì)發(fā)現(xiàn)更多的問(wèn)題。

案例：Eventbrite

Eventbrite 作為一個(gè)在線活動(dòng)策劃服務(wù)平臺(tái)，其搜索功能很值得學(xué)習(xí)，尤其是當(dāng)基于時(shí)間搜索事件時(shí)，常規(guī)時(shí)間選擇器（年、月、日）默認(rèn)排列在最后，優(yōu)先展示 “任何時(shí)候”、“今天”、“明天”、“本周”、“本周末”，以便于用戶(hù)用最少的輸入選擇最便捷的時(shí)間。

Eventbrite App 的時(shí)間選擇器（作者截圖）

五、原則4：增加控件操作區(qū)域

在筆記本電腦或臺(tái)式機(jī)上，用戶(hù)可以通過(guò)光標(biāo)鎖定屏幕上最小的目標(biāo)，但在手機(jī)屏幕上要困難得多。手指不僅比光標(biāo)大很多，也不夠精確，點(diǎn)擊時(shí)會(huì)覆蓋住目標(biāo)。

根據(jù)原則2，在理想狀況下，行動(dòng)點(diǎn)的大小取決于它在屏幕中的位置。但是，在可能的情況下，把操作區(qū)域設(shè)計(jì)的大一些是永遠(yuǎn)不會(huì)錯(cuò)的。遵循 iOS 或 Android 的設(shè)計(jì)指南，按鈕尺寸不能小于 44*44px 和 48*48px。

實(shí)現(xiàn)該原則最明顯的方法是 增加 UI 控件尺寸，并且擴(kuò)大元素周?chē)牧舭卓臻g。這樣不僅可以減少誤操作，還可以提升界面的簡(jiǎn)潔性。此外，留白還可以增加操作區(qū)域的視覺(jué)面積，可以應(yīng)用于屏幕上的所有 UI 控件，尤其是不易增加面積的小控件。

你或許不希望將底部標(biāo)簽欄的圖標(biāo)和文本設(shè)計(jì)得太大，那么只需要 增加元素的可點(diǎn)擊范圍（即熱區(qū)，包含可見(jiàn)元素和不可見(jiàn)的點(diǎn)擊區(qū)域，但請(qǐng)保持與開(kāi)發(fā)的溝通）—— 在不干擾其他 UI 元素的情況下使其盡可能大。

如果按照上述建議進(jìn)行調(diào)整，設(shè)計(jì)將成為一種錯(cuò)誤預(yù)防，而非錯(cuò)誤處理。當(dāng)然，即使是這樣誤操作也不可能完全避免。請(qǐng)記牢這一點(diǎn)，確保誤操作時(shí)不會(huì)產(chǎn)生災(zāi)難性事件。

案例：Meetup

社交 App Meetup 就是很好的案例，當(dāng)用戶(hù)查看聚會(huì)群組時(shí)，屏幕中間有個(gè)醒目的大按鈕，便于用戶(hù)輕松快捷的操作。

Meetup App 中的群組頁(yè)（作者截圖）

六、原則 #5：優(yōu)先考慮易讀性

易讀性是所有平臺(tái)設(shè)計(jì)的另一個(gè)重要原則，設(shè)計(jì)師需要始終遵循字號(hào)、行高、字體等通用準(zhǔn)則。在移動(dòng)設(shè)備中，字體不宜小于16pt，否則會(huì)損害一些用戶(hù)的可讀性。

不過(guò)，從可用性的角度來(lái)看，移動(dòng)設(shè)備更具挑戰(zhàn)的正是那些 “不理想” 的使用環(huán)境 —— 用戶(hù)可能是在旅途中、繁忙的街道或者強(qiáng)光狀態(tài)下使用產(chǎn)品。

有時(shí)候，我和大家一樣喜歡在白色背景上使用字重較輕、色值 #9A9A9A 的字體，這樣的設(shè)計(jì)也得到了大量的支持和喜歡。但如果你想要好的用戶(hù)體驗(yàn)，設(shè)計(jì)不能僅僅滿(mǎn)足陽(yáng)光充足的 “理想條件”，還需要將易讀性置于審美之上。

案例：Medium.com

許多 Native App 支持自適應(yīng)，允許用戶(hù)設(shè)置界面信息。這延伸了產(chǎn)品設(shè)計(jì)師的責(zé)任 —— 從設(shè)計(jì)完美的表現(xiàn)層到確保設(shè)計(jì)的延展性和動(dòng)態(tài)變化。Medium.com 文章展示頁(yè)的可讀性設(shè)計(jì)或許可以引起反思。

Medium.com 的文章展示（作者截圖）

七、原則6：及時(shí)且正向的反饋

“等待” 是一個(gè)相對(duì)術(shù)語(yǔ)，我們很少用毫秒來(lái)度量，但在用戶(hù)體驗(yàn)中卻需要如此精準(zhǔn)。

隨著 5G 時(shí)代的到來(lái)，那些為網(wǎng)絡(luò)異常而進(jìn)行的設(shè)計(jì)很快會(huì)變的無(wú)關(guān)緊要。但在 5G 網(wǎng)絡(luò)普及之前，移動(dòng)用戶(hù)可能在任意時(shí)間或地點(diǎn)等待加載，特別是當(dāng)他們使用蜂窩網(wǎng)絡(luò)時(shí)，請(qǐng)不要忽略加載狀態(tài)設(shè)計(jì)。

當(dāng)延遲 超過(guò) 300 毫秒時(shí)，就會(huì)引起用戶(hù)的注意，超過(guò) 1000 毫秒時(shí)，用戶(hù)或許會(huì)離開(kāi)。如果你無(wú)法在這段時(shí)間內(nèi)加載出內(nèi)容，至少讓用戶(hù)知道你正在處理它。

案例：Duolingo

給予用戶(hù)反饋總是好的。看看 Duolingo 是如何超越別人的，他們利用加載時(shí)間展示有趣的故事和可愛(ài)的動(dòng)畫(huà)，有效且具有沉浸感。

Duolingo App 中的加載狀態(tài)（作者錄屏）

八、原則7：輕松從錯(cuò)誤中恢復(fù)

即使你很好地遵循了上述原則，又或者你是一個(gè)很棒的設(shè)計(jì)師，用戶(hù)錯(cuò)誤也是必然會(huì)發(fā)生的。即使這些錯(cuò)誤你有責(zé)任幫助用戶(hù)避免，但你永遠(yuǎn)無(wú)法完全消除它們。

此外，總有一些錯(cuò)誤風(fēng)險(xiǎn)會(huì)超出你和用戶(hù)的控制，其中一些問(wèn)題在移動(dòng)設(shè)備上更容易發(fā)生，例如網(wǎng)絡(luò)不佳而導(dǎo)致的頁(yè)面無(wú)法加載。

1. 案例一：Google Sheets

提到 “撤銷(xiāo)” 功能，你可能會(huì)想起微軟的 Word、Excel、PowerPoint 以及谷歌的同類(lèi)工具。請(qǐng)注意，在 Google Sheets App 中，“撤銷(xiāo)” 始終是用戶(hù)可優(yōu)先訪問(wèn)的控件之一，并一直處于頂部菜單。

Google Sheets App 中的電子表格（作者截圖）

2. 案例二：Airmail

通常產(chǎn)品中出現(xiàn)列表時(shí)，都支持用戶(hù)通過(guò)左右滑動(dòng)來(lái)執(zhí)行某些操作。

Airmail 電子郵件列表的操作有方向和長(zhǎng)度差異，并且可以立即執(zhí)行。這對(duì)于需要加快工作流程的高級(jí)用戶(hù)來(lái)說(shuō)，非常有用，但從經(jīng)驗(yàn)上看，它也容易出錯(cuò)。

當(dāng)刪除操作是向左滑動(dòng)時(shí)，“撤銷(xiāo)移動(dòng)到垃圾箱” 按鈕可能會(huì)派上用場(chǎng)。包括發(fā)送電子郵件時(shí)，也需要顯示類(lèi)似的撤銷(xiāo)按鈕。在各類(lèi) App 中，刪除、保存、篩選都是很常見(jiàn)的功能，這些功能都能幫用戶(hù)從錯(cuò)誤中恢復(fù)。

Airmail App 中的電子郵件刪除和恢復(fù)（作者錄制）

九、總結(jié)

基本的、通用的用戶(hù)體驗(yàn)設(shè)計(jì)實(shí)踐需要滿(mǎn)足各類(lèi)設(shè)備的差異化需求，不過(guò)，由于存在小屏幕、觸屏交互、復(fù)雜的使用環(huán)境以及較差的網(wǎng)絡(luò)連接等因素，一些設(shè)計(jì)原則在移動(dòng)設(shè)備上尤為重要。

為移動(dòng)端設(shè)計(jì)界面時(shí)，甚至比筆記本和臺(tái)式機(jī) 更需要遵循極簡(jiǎn)原則。將重要的元素放在界面中間，以便用戶(hù)可以輕松訪問(wèn)，并最大限度地減少所需的文本輸入。

增加操作區(qū)域，幫助用戶(hù)更快地、無(wú)縫銜接地達(dá)成目標(biāo)，并 優(yōu)先考慮易讀性，以應(yīng)對(duì)用戶(hù)在外部壞境可能遇到的問(wèn)題。你可能需要 1 秒鐘來(lái)加載所請(qǐng)求的內(nèi)容或頁(yè)面，但用戶(hù)很快會(huì)失去耐心，并懷疑哪里出了問(wèn)題。因此，要對(duì)用戶(hù)執(zhí)行的任何操作提供及時(shí)的、正向的反饋。

最后，當(dāng)所有原則都失敗時(shí)，至少要確保用戶(hù)可以輕松從錯(cuò)誤中恢復(fù)。要記得，無(wú)論如何錯(cuò)誤都是無(wú)法避免的，幫助你的用戶(hù)快速回到正軌，否則你可能會(huì)永遠(yuǎn)失去他們。

作者：Christian Jensen，

原文：https://uxdesign.cc/learn-from-the-best-mobile-design-principles-f1bdc46bc016

譯者：張小璽，編輯：徐小淇

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議