動(dòng)端的UI設(shè)計(jì)有其獨(dú)有的一套設(shè)計(jì)規(guī)則和約束。新技術(shù)的不斷加入促進(jìn)了移動(dòng)平臺(tái)的快速增長(zhǎng)，而移動(dòng)端的UI設(shè)計(jì)也和傳統(tǒng)的平面海報(bào)/網(wǎng)頁(yè)設(shè)計(jì)不太一樣。那么，要成為一個(gè)合格的移動(dòng)端UI設(shè)計(jì)師需要掌握什么樣的技能，經(jīng)歷怎樣的涅磐才行呢？

Part 1 挑戰(zhàn)和制約

每個(gè)媒體都有它的局限所在。即使是在移動(dòng)端這個(gè)充滿機(jī)會(huì)、自由和創(chuàng)意的平臺(tái)上也有著許多亟待解決的問題，和無法回避的局限性。

碎片化的移動(dòng)端

時(shí)至今日，市面上流通的智能機(jī)已經(jīng)多不勝數(shù)了，不同的智能終端不僅僅尺寸不盡相同，而且因?yàn)榉直媛实牟町愂沟闷聊坏南袼孛芏纫灿泻艽蟛町悾?xì)了考慮，這些終端的輸入機(jī)制、屏幕比例、屏幕方向都會(huì)影響到移動(dòng)端的UI設(shè)計(jì)。

移動(dòng)端的網(wǎng)頁(yè)設(shè)計(jì)可以借助響應(yīng)式設(shè)計(jì)保證不同屏幕下的瀏覽體驗(yàn)，相比之下移動(dòng)端的APP設(shè)計(jì)則相對(duì)缺少流動(dòng)性。所以，作為移動(dòng)端的UI設(shè)計(jì)師，還是需要考慮屏幕差異造成的布局設(shè)計(jì)的不同以及用戶體驗(yàn)上的變化。

分裂的操作系統(tǒng)平臺(tái)

目前主流的三大移動(dòng)端操作系統(tǒng)是iOS，Android 和 Windows Phone（市場(chǎng)份額較小，在國(guó)內(nèi)基本被邊緣化了），每個(gè)操作系統(tǒng)都有它們自己的一套設(shè)計(jì)規(guī)范，交互方式，程序接口，而隨著操作系統(tǒng)的版本更新，這些東西也都有著各自的變化。其中最典型的就是Android操作系統(tǒng)的版本分裂，分裂所造成的程序兼容問題至今都尚未彌合，這其中涉及到了操作系統(tǒng)版本的差異，以及廠商定制化之后造成的千奇百怪的兼容性問題（Android開發(fā)者已經(jīng)無數(shù)次哭暈在廁所）。iOS也隨著6.0到7.0的大版本升級(jí)，經(jīng)歷了一個(gè)較長(zhǎng)的過度時(shí)期，至今兩個(gè)大版本之間在設(shè)計(jì)風(fēng)格和兼容性上的問題還影響著開發(fā)者。Windows Phone 從7到8的升級(jí)有多蛋疼我就不在此贅述了，那不堪回首的過去和微軟高管被口水淹沒的場(chǎng)景我真的不想回憶。

即使是三大平臺(tái)在各自平臺(tái)內(nèi)交互設(shè)計(jì)有著較高的統(tǒng)一，系統(tǒng)版本分裂、操作系統(tǒng)差異以及廠商定制化所造成的影響是不容開發(fā)者和設(shè)計(jì)師忽視的。

性能

設(shè)計(jì)和構(gòu)建一個(gè)APP的方式會(huì)直接影響到它的性能。換句話說，手機(jī)里安裝的程序如果設(shè)計(jì)的好可以你的手機(jī)可以待機(jī)一天半，而如果其中有一個(gè)程序設(shè)計(jì)的有問題，會(huì)讓你需要出門多帶一個(gè)移動(dòng)電源了。一些不必要的轉(zhuǎn)場(chǎng)動(dòng)畫可能會(huì)讓你的CPU為之進(jìn)行密集地運(yùn)算，一段存在問題的JS代碼可能讓你的瀏覽器耗費(fèi)多于平常數(shù)倍的電量。也許今年剛剛上的Galaxy S5能夠流暢運(yùn)行某個(gè)應(yīng)用，但是2年前的Galaxy Nexus可能會(huì)打開應(yīng)用的時(shí)候立馬卡出翔。總的來說，設(shè)計(jì)和開發(fā)，都會(huì)影響到APP的性能，甚至左右手機(jī)的續(xù)航（部分國(guó)產(chǎn)手機(jī)用戶同開發(fā)者一起哭暈在廁所）。

開發(fā)與成本控制

有很多應(yīng)用在構(gòu)思之初非常酷炫新穎，但是這并不意味著它可以輕松實(shí)現(xiàn)。應(yīng)用的設(shè)計(jì)和開發(fā)的方式會(huì)直接決定它能否在Deadline來臨之前實(shí)現(xiàn)。如果我們無法認(rèn)清一個(gè)應(yīng)用的開發(fā)成本，那么開發(fā)者所承擔(dān)的負(fù)擔(dān)會(huì)成倍增加，也為應(yīng)用的后續(xù)發(fā)展埋下了禍根。

Part 2 拋棄思維定勢(shì)

當(dāng)我們剛剛開始學(xué)習(xí)設(shè)計(jì)和開發(fā)的時(shí)候，，這個(gè)數(shù)字時(shí)代才剛剛開始，我們對(duì)于新興事物的認(rèn)知尚且稚嫩。學(xué)校教育和實(shí)際設(shè)計(jì)開發(fā)上的“時(shí)代差異”，讓很多設(shè)計(jì)師對(duì)數(shù)字化的互聯(lián)網(wǎng)的認(rèn)知稍顯“靜態(tài)”，甚至形成某種思維定制，對(duì)于移動(dòng)互聯(lián)網(wǎng)也知之甚少。在這個(gè)信息爆炸的時(shí)代，激烈的競(jìng)爭(zhēng)催化下的移動(dòng)互聯(lián)網(wǎng)正在以一種恐怖的速度演化、推進(jìn)，這使得設(shè)計(jì)師們需要緊跟發(fā)展的步伐，隨時(shí)更新升級(jí)自己對(duì)于互聯(lián)網(wǎng)的認(rèn)知。

移動(dòng)端并非畫布

移動(dòng)端設(shè)計(jì)和平面設(shè)計(jì)有著巨大的差異，它不再是一張平面的畫布。我懷疑PS和AI并不足以幫助設(shè)計(jì)師完成從平面向移動(dòng)互聯(lián)網(wǎng)的轉(zhuǎn)變，盡管PS和AI已經(jīng)幫助設(shè)計(jì)師們?cè)谶^去的20年里完成了無數(shù)壯舉。目前，我們依然需要借助它們來繪制更多不同屏幕尺寸下的UI和圖標(biāo)，但是我們需要借助更多的其他軟件來展現(xiàn)移動(dòng)端不一樣的一面，比如用AE來繪制動(dòng)效。

從構(gòu)思屏幕布局到考慮界面轉(zhuǎn)換

的確，當(dāng)涉及移動(dòng)端UI設(shè)計(jì)的時(shí)候，單單考慮屏幕布局是遠(yuǎn)遠(yuǎn)不夠的。像Facebook Paper，雅虎天氣，Weather Channl這樣的優(yōu)質(zhì)移動(dòng)APP就像我們證明了界面間的轉(zhuǎn)場(chǎng)動(dòng)畫到底能讓一個(gè)UI界面產(chǎn)生怎樣的張力。而剛剛推出的Android L所用的Material Design則更是在看似普通的靜態(tài)界面之后，隱藏了一系列讓你欲罷不能的過度效果。

界面轉(zhuǎn)換之間的動(dòng)效，在過去只為博得一笑，今天卻正在走向主流，成為移動(dòng)端的用戶體驗(yàn)的核心。它正在成為交互和界面的重要元素，賦予界面以韻律和生命力。動(dòng)效不僅呈現(xiàn)運(yùn)動(dòng)的過程，還能表現(xiàn)出空間、層次，變化，在基礎(chǔ)的界面結(jié)構(gòu)上為用戶帶來截然不同的體驗(yàn)。

將你的“設(shè)計(jì)師做派”扔到一邊

你并不需要將界面做獨(dú)特或者原創(chuàng)，尤其是當(dāng)你是為了獨(dú)特而重新設(shè)計(jì)所有的界面，然后讓整個(gè)產(chǎn)品為獨(dú)特而擔(dān)上風(fēng)險(xiǎn)。很多時(shí)候，堅(jiān)持使用原生UI元素和模式是讓應(yīng)用能按時(shí)出貨的重要保證。比起強(qiáng)行推動(dòng)獨(dú)特原創(chuàng)的設(shè)計(jì)，很多時(shí)候更合適的做法是打造簡(jiǎn)單高效的交互界面，創(chuàng)造真正的品牌價(jià)值。

真實(shí)的APP不比設(shè)計(jì)師的概念設(shè)計(jì)差

很多設(shè)計(jì)師喜歡上Behance和Dribbble這樣的網(wǎng)站上去找靈感，雖然其中有很動(dòng)優(yōu)質(zhì)的設(shè)計(jì)作品，但如果你并非一個(gè)經(jīng)驗(yàn)豐富的移動(dòng)UI設(shè)計(jì)師的話，可能會(huì)被這些作品誤導(dǎo)。其中很多設(shè)計(jì)都僅僅只是從未實(shí)現(xiàn)過的高保真Demo，當(dāng)你正打算設(shè)計(jì)一個(gè)界面的時(shí)候，其中某些設(shè)計(jì)可能會(huì)影響你的思路。所以，不妨從那些已經(jīng)上線的成功APP中汲取營(yíng)養(yǎng)吧。你會(huì)從中汲取到豐富的營(yíng)養(yǎng)，看到蓬勃發(fā)展的設(shè)計(jì)趨勢(shì)，這些經(jīng)過市場(chǎng)和用戶驗(yàn)證的案例會(huì)讓你明白什么值得學(xué)習(xí)的設(shè)計(jì)。

Part 3 學(xué)習(xí)新技能

了解平臺(tái)

正如同web設(shè)計(jì)師需要了解HTML/CSS一樣，作為移動(dòng)端UI設(shè)計(jì)師的你應(yīng)該了解移動(dòng)端APP的架構(gòu)。首先移動(dòng)端開發(fā)的語言和網(wǎng)頁(yè)設(shè)計(jì)就不太一樣，各個(gè)不同平臺(tái)有著各自的編程語言和接口，界面的構(gòu)成也無法使用CSS和標(biāo)簽來實(shí)現(xiàn)。

你需要深入閱讀官方的開發(fā)文檔，明白APP的構(gòu)成，編譯方式，發(fā)布方式，了解設(shè)計(jì)的規(guī)則。這些東西不僅關(guān)系到你的應(yīng)用開發(fā)好壞，還會(huì)影響系統(tǒng)的穩(wěn)定性，電池續(xù)航長(zhǎng)短等多種因素。作為移動(dòng)端UI設(shè)計(jì)師，你單了解設(shè)計(jì)是不夠的。當(dāng)然，從長(zhǎng)遠(yuǎn)來看，這對(duì)于你的職業(yè)生涯也很有好處。

了解移動(dòng)端的技術(shù)構(gòu)成

光了解平臺(tái)的基本特征是不夠的。接下來你需要了解它相關(guān)的技術(shù)構(gòu)成：位置服務(wù)（wifi，GPS等），藍(lán)牙（低功耗藍(lán)牙技術(shù)），信號(hào)，前后攝像頭，麥克風(fēng)，陀螺儀，位置傳感器，加速度傳感器，指紋掃描儀（iPhone 5s），眼動(dòng)追蹤技術(shù)，語音識(shí)別，人臉識(shí)別，等等等等。每一個(gè)新技術(shù)的背后以為著應(yīng)用程序更多的可能性，交互設(shè)計(jì)、使用體驗(yàn)，甚至商業(yè)模式。

發(fā)掘本地UI組件的開發(fā)潛質(zhì)

每個(gè)移動(dòng)操作系統(tǒng)中中總有著大量的本地UI組件，他們有著極大的自由度，方便你進(jìn)行定制。你需求確切地知道他們的特征（尺寸，大小，功用），你可以為與你合作的開發(fā)者節(jié)省大量的工作時(shí)間。

了解移動(dòng)端的工作流程

安裝SDK并運(yùn)行，了解移動(dòng)開發(fā)框架，比如TubyMotion、Xamarin、Titanium。熟悉集成開發(fā)環(huán)境，因?yàn)檫@其中包含了移動(dòng)開發(fā)所需的方方面面。

了解移動(dòng)端的界面模式

三大移動(dòng)平臺(tái)之間，有著相似之處，但是在深入探究他們的交互設(shè)計(jì)，會(huì)發(fā)現(xiàn)它們?cè)诶砟钌系木薮蟛町悺Ｗ鳛橐粋€(gè)設(shè)計(jì)師，你需要明白這些差異所在，以及它們是如何體現(xiàn)在實(shí)際案例中的。

不要只著眼于單一平臺(tái)，三大平臺(tái)都需要深入體驗(yàn)，每天至少都要把玩一下，并且最少要持續(xù)半年。在這個(gè)過程中，體會(huì)差異，并且將你覺得重要的、有代表性的、值得保存記錄的界面截圖留存。作為單一平臺(tái)的狂熱粉絲，你是做不好移動(dòng)端UI設(shè)計(jì)師的。

記錄并解釋你的UI設(shè)計(jì)

考慮到屏幕截圖并不足以表現(xiàn)UI全部的特性，你需要學(xué)會(huì)記錄界面不同的狀態(tài)、轉(zhuǎn)變過程、轉(zhuǎn)場(chǎng)動(dòng)畫等信息，并且學(xué)會(huì)記錄界面對(duì)于不同狀況的反饋。

在設(shè)計(jì)階段踐行精益UX設(shè)計(jì)

一個(gè)現(xiàn)代的設(shè)計(jì)師應(yīng)該是具備戰(zhàn)略眼光的設(shè)計(jì)師。你的目標(biāo)不能局限于悶頭制作漂亮的界面，你應(yīng)該讓你的設(shè)計(jì)與團(tuán)隊(duì)合作結(jié)合到一起，切合項(xiàng)目需求。洞悉用戶深層次的需求，并且能快速地隨之反饋到設(shè)計(jì)上。將設(shè)計(jì)作品保存下來并附上詳細(xì)的說明，確保所有的設(shè)計(jì)都與核心理念保持一致，與用戶需要保持一致。

在開發(fā)階段采用敏捷UX設(shè)計(jì)

你不能只將高保真的模型交給開發(fā)者就了事，因?yàn)樵陂_發(fā)過程中會(huì)不斷提出新的需求。總會(huì)有之前考慮不周全的情況，需要在開發(fā)階段進(jìn)行補(bǔ)充完善，設(shè)計(jì)師需要隨之進(jìn)行快速響應(yīng)。所以，在這個(gè)階段，設(shè)計(jì)師真的需要坐在開發(fā)者旁邊應(yīng)付突發(fā)情況。確保開發(fā)者在碰到新的需求的時(shí)候，不用他們自己來補(bǔ)充UX的細(xì)節(jié)，或者再來找設(shè)計(jì)師。

Part 4 關(guān)于移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)的小技巧

響應(yīng)式設(shè)計(jì)

在移動(dòng)端，響應(yīng)式設(shè)計(jì)并非是放之四海皆準(zhǔn)的解決方案。有時(shí)候它非常適用，但是有的時(shí)候并非如此。你有責(zé)任考量什么時(shí)候采用專門的解決方案，什么時(shí)候需要做響應(yīng)式設(shè)計(jì)。

謹(jǐn)慎使用CSS和JS

的確，CSS動(dòng)畫，漸變，陰影都非常贊，也非常容易實(shí)現(xiàn)。視差網(wǎng)頁(yè)看起來也很酷，很多設(shè)計(jì)師都對(duì)此感興趣。但是這些元素都非常消耗資源，對(duì)移動(dòng)端的瀏覽器會(huì)產(chǎn)生很大的負(fù)荷，進(jìn)而影響電池續(xù)航。適度控制CSS特效和JS動(dòng)效都是很有必要的。即便低性能手機(jī)上瀏覽器可以良好地支持CSS3選擇器，但是性能的瓶頸會(huì)讓整體體驗(yàn)非常差。

使用合適的工具做合適的事情

這并不是是一個(gè)非常確切的清單，但是你能從中發(fā)現(xiàn)很多不錯(cuò)的工具幫你完成不同的工作。其中有一部分是免費(fèi)的，有一部分是Mac平臺(tái)的。

Part 5 所有的這些都已經(jīng)過時(shí)了？

這么說，對(duì)，但也不對(duì)。目前移動(dòng)端開發(fā)發(fā)展非常迅猛，設(shè)計(jì)趨勢(shì)不斷轉(zhuǎn)變，智能家電，物聯(lián)網(wǎng)時(shí)代也即將來臨，相應(yīng)的傳感器技術(shù)和移動(dòng)應(yīng)用也會(huì)帶來更多的挑戰(zhàn)。作為一個(gè)移動(dòng)端UI設(shè)計(jì)師，我們要學(xué)習(xí)的東西太多了，相應(yīng)的，機(jī)會(huì)也迎面走來。

享一些前端使用的UI框架，詳細(xì)的框架說明請(qǐng)復(fù)制鏈接進(jìn)入官網(wǎng)查看，小編只做匯總

Vantui 基于vue的移動(dòng)端UI框架，適合商城項(xiàng)目，支持H5和小程序兩個(gè)版本

https://youzan.github.io/vant/#/zh-CN/intro

Cube UI 基于 Vue.js 實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù),滴滴內(nèi)部組件庫(kù)精簡(jiǎn)提煉而來，經(jīng)歷了業(yè)務(wù)一年多的考驗(yàn)，并且每個(gè)組件都有充分單元測(cè)試，為后續(xù)集成提供保障。

https://didi.github.io/cube-ui/#/zh-CN/docs/index-list

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。

https://v3.bootcss.com/

WeUI 是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。

https://weui.io/

MUI 最接近原生APP體驗(yàn)的高性能前端框架,MUI不依賴任何第三方JS庫(kù)，壓縮后的JS和CSS文件僅有100+K和60+K

https://dev.dcloud.net.cn/mui/

FrozenUI 是一套基于移動(dòng)端的UI庫(kù)輕量、精美、遵從手機(jī) QQ 設(shè)計(jì)規(guī)范

http://frozenui.github.io/

Amaze ~ 妹子 UI 中國(guó)首個(gè)開源 HTML5 跨屏前端框架,從小屏逐步擴(kuò)展到大屏，最終實(shí)現(xiàn)所有屏幕適配，適應(yīng)移動(dòng)互聯(lián)潮流。

https://amazeui.clouddeep.cn/

Muse-UI 基于 Vue 2.0 優(yōu)雅的 Material Design UI 組件庫(kù),擁有40多個(gè)UI 組件，用于適應(yīng)不同業(yè)務(wù)環(huán)境。

https://muse-ui.org/#/zh-CN

Pure.CSS 美國(guó)雅虎公司出品的一組輕量級(jí)、響應(yīng)式純css模塊，適用于任何Web項(xiàng)目。

https://www.purecss.cn/

Onsen Ui 開發(fā)HTML5混合和移動(dòng)web應(yīng)用程序的最漂亮和最有效的方法。

https://onsen.io/

SUI Mobile 基于 Framework7 開發(fā)的UI庫(kù)。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開發(fā)跨平臺(tái)Web App。

http://m.sui.taobao.org/

YDUI Touch 一只注重審美，且性能高效的移動(dòng)端&微信UI。專為移動(dòng)端打造，在技術(shù)實(shí)現(xiàn)、交互設(shè)計(jì)上兼容主流移動(dòng)設(shè)備，保證代碼輕、性能高。

http://www.ydui.org/

Mint UI 基于 Vue.js 的移動(dòng)端組件庫(kù)，考慮到移動(dòng)端的性能門檻，Mint UI 采用 CSS3 處理各種動(dòng)效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗(yàn)。

http://mint-ui.github.io/#!/zh-cn

Taro UI 一套基于 Taro 框架開發(fā)的多端 UI 組件庫(kù)，一套組件可以在微信小程序 / H5 / 百度小程序 等多端適配運(yùn)行

https://taro-ui.aotu.io/#/

持續(xù)更新中...

動(dòng)端與網(wǎng)頁(yè)端UI設(shè)計(jì)差異剖析

一、設(shè)備差異決定交互方式

在移動(dòng)互聯(lián)網(wǎng)時(shí)代，智能手機(jī)無疑成為了人們生活中不可或缺的一。作為移動(dòng)設(shè)備的主要交互方式，觸摸屏幕操作給UI設(shè)計(jì)帶來了全新的挑戰(zhàn)。傳統(tǒng)的網(wǎng)頁(yè)瀏覽也在不斷演進(jìn)，鼠標(biāo)和鍵盤仍是主導(dǎo)交互方式。

移動(dòng)設(shè)備的屏幕相對(duì)較小，用戶主要通過拇指進(jìn)行操作。UI設(shè)計(jì)需要考慮到手指操作的不精確性，按鈕等可點(diǎn)擊區(qū)域需要足夠大，以確保用戶能夠準(zhǔn)確觸發(fā)相應(yīng)操作。手勢(shì)操作如滑動(dòng)、長(zhǎng)按等也為移動(dòng)端交互帶來了便利，設(shè)計(jì)師需要合理利用這些手勢(shì)，提升操作效率。

網(wǎng)頁(yè)端的鼠標(biāo)光標(biāo)操作更加精確，懸停效果等細(xì)微交互在網(wǎng)頁(yè)上得以實(shí)現(xiàn)。右鍵菜單也為用戶提供了快捷呼出上下文選項(xiàng)的便利。這些交互方式都需要設(shè)計(jì)師在UI設(shè)計(jì)中加以考慮和應(yīng)用，以提升用戶體驗(yàn)。

二、內(nèi)容展示需因硬件調(diào)整

硬件設(shè)備的差異也直接影響了內(nèi)容展示方式的不同。移動(dòng)設(shè)備的屏幕尺寸有限，信息架構(gòu)需要精簡(jiǎn)，主次功能分層級(jí)展示，一屏內(nèi)容有限，需要分頁(yè)展示。網(wǎng)頁(yè)端的大屏幕則可以同時(shí)展示更多信息，功能可以同級(jí)并列，一頁(yè)內(nèi)容量也更大。

以新聞客戶端為例，移動(dòng)端版本通常會(huì)將頭條新聞以大圖方式突出展示，其他新聞則以列表形式分頁(yè)展示。而網(wǎng)頁(yè)版本則可以在一個(gè)頁(yè)面中同時(shí)展示多個(gè)新聞標(biāo)題和概要，讀者可以快速瀏覽并選擇感興趣的內(nèi)容。

移動(dòng)設(shè)備的硬件性能和網(wǎng)絡(luò)環(huán)境也對(duì)內(nèi)容展示提出了更高要求。為了確保流暢的用戶體驗(yàn)，移動(dòng)端UI設(shè)計(jì)需要精簡(jiǎn)內(nèi)容，減少不必要的圖片和動(dòng)畫加載，優(yōu)化網(wǎng)絡(luò)傳輸效率。而網(wǎng)頁(yè)端則可以在高性能設(shè)備和網(wǎng)絡(luò)環(huán)境下，展示更豐富的多媒體內(nèi)容。

三、用戶體驗(yàn)需專門優(yōu)化

移動(dòng)端和網(wǎng)頁(yè)端的用戶場(chǎng)景和使用習(xí)慣差異也決定了UI設(shè)計(jì)需要針對(duì)性地優(yōu)化用戶體驗(yàn)。

以輸入操作為例，移動(dòng)端的虛擬鍵盤輸入效率較低，因此UI設(shè)計(jì)需要盡量減少輸入需求，可以通過選擇、滑動(dòng)等方式代替輸入。輸入框也可以加入清除按鈕，方便用戶快速刪除錯(cuò)誤輸入。

而網(wǎng)頁(yè)端的鍵盤輸入則相對(duì)高效，但鼠標(biāo)操作的可操作性反饋就顯得尤為重要。鼠標(biāo)懸停時(shí)，可點(diǎn)擊區(qū)域的高亮顯示可以讓用戶快速識(shí)別出可交互元素。右鍵菜單的快捷呼出也可以為用戶提供常用操作的快捷入口，提高效率。

除了輸入輸出，移動(dòng)端和網(wǎng)頁(yè)端在內(nèi)容展示、導(dǎo)航、反饋等多個(gè)方面的用戶體驗(yàn)都有所差異，都需要設(shè)計(jì)師根據(jù)不同場(chǎng)景作出相應(yīng)優(yōu)化。

四、跨平臺(tái)兼容是設(shè)計(jì)挑戰(zhàn)

跨平臺(tái)的兼容性問題也是移動(dòng)端和網(wǎng)頁(yè)端UI設(shè)計(jì)需要重點(diǎn)考慮的一個(gè)方面。

移動(dòng)端不同的操作系統(tǒng)如iOS和Android，其UI設(shè)計(jì)規(guī)范和交互習(xí)慣都有一定差異。以返回按鈕為例，iOS設(shè)備通常將其置于屏幕左上角，而Android設(shè)備則置于屏幕底部。移動(dòng)端UI設(shè)計(jì)需要遵循各操作系統(tǒng)的規(guī)范，并進(jìn)行相應(yīng)調(diào)整以確保一致的用戶體驗(yàn)。

網(wǎng)頁(yè)端則需要考慮不同瀏覽器的兼容性問題。不同瀏覽器對(duì)CSS、JavaScript等Web技術(shù)的實(shí)現(xiàn)和渲染效果可能存在差異，這就需要設(shè)計(jì)師進(jìn)行全面的兼容性測(cè)試，并作出必要的調(diào)整和優(yōu)化，以確保UI在各種瀏覽器下的一致展示效果。