從使用場(chǎng)景和設(shè)計(jì)方法來(lái)看，App與Web的設(shè)計(jì)有什么區(qū)別？

早前，總是遇到問(wèn)“Web設(shè)計(jì)”和“UI設(shè)計(jì)”分別做了多久？之類的詢問(wèn)，文章開(kāi)始之前，我們先來(lái)聊聊什么是UI設(shè)計(jì)。

UI=Ueser Interface，直譯“用戶界面”。也就是說(shuō)UI設(shè)計(jì)就是用戶界面設(shè)計(jì)。所以只要是用戶，也就是人機(jī)交互得體驗(yàn)中會(huì)用到的界面,都叫做“UI”，對(duì)于這些“UI”的設(shè)計(jì)，我們都統(tǒng)稱為“UI設(shè)計(jì)”。

界面有很多種，我們主要介紹Web與App界面，由淺入深，通過(guò)使用場(chǎng)景與設(shè)計(jì)方法、開(kāi)發(fā)環(huán)境與適配要點(diǎn)，兩兩結(jié)合來(lái)看一下他們的區(qū)別。

關(guān)于使用場(chǎng)景，2012年移動(dòng)互聯(lián)網(wǎng)元年至今，越來(lái)越多的小伙伴將網(wǎng)癮道具，從電腦改為移動(dòng)設(shè)備。以前聊的是，我配了個(gè)XXX的顯卡跑游戲，現(xiàn)在越來(lái)越多的是，某果的發(fā)布會(huì)看了嗎？

越來(lái)越多的用戶“道具”，促使我們要去畫(huà)更多的，用戶的“道具”皮膚，也就是我們“俗稱”的界面。

在設(shè)計(jì)不同的“皮膚”時(shí)，我們可通過(guò)考慮以下幾點(diǎn)設(shè)計(jì)方法，來(lái)區(qū)分他們。

1. 交互方式的不同

1.1 操作媒介

Web網(wǎng)站 – 鼠標(biāo)操作 VS 移動(dòng)App – 手指場(chǎng)景的局限造成了，使用電腦成本會(huì)高一些，相對(duì)按鈕位置的精確度會(huì)更高（在觸摸大屏還沒(méi)出現(xiàn)的時(shí)代，我們操作鼠標(biāo)來(lái)實(shí)現(xiàn)點(diǎn)擊）。

而移動(dòng)設(shè)備，隨時(shí)隨地動(dòng)動(dòng)手指就可以了。

我們要注意預(yù)留點(diǎn)擊區(qū)域，控制可點(diǎn)擊內(nèi)容的艱巨性。

1.2 設(shè)計(jì)要點(diǎn)

（1）使用場(chǎng)景不同

• 相對(duì)PC端的位置固定，因?yàn)轱@示器種類繁多，窗口也可以隨意縮放，設(shè)計(jì)時(shí)需要優(yōu)先確定頁(yè)面的安全區(qū)域，但同樣因?yàn)槠聊淮笏鞋F(xiàn)實(shí)的內(nèi)容相對(duì)更豐富。
• 而移動(dòng)端的頁(yè)面相對(duì)就小很多，雖然小但顯得很靈活，很多App賣點(diǎn)就是利用碎片花時(shí)間學(xué)習(xí)、購(gòu)物、娛樂(lè)，對(duì)應(yīng)這點(diǎn)的不同，移動(dòng)端的內(nèi)容會(huì)更加精簡(jiǎn)。

兩端的閱讀范圍及內(nèi)容長(zhǎng)度偏重的也因此不同。

（2）文字大小

Web設(shè)計(jì) ：比較隨意，文章正文字體12px/14px；頁(yè)面安全區(qū)域1080px～1280px為宜（一些展示頁(yè)面字體會(huì)做到16-20px或更大）。

App設(shè)計(jì)：正文30-34px,最小可用28px;注釋及提示行文字20-24px，最小不小于20px。（具體字?jǐn)?shù)根據(jù)24px-36px的字體大小，以及頁(yè)邊距來(lái)定～）。

（3）Banner

• Web設(shè)計(jì)：寬度在1920px,主內(nèi)容區(qū)域（安全范圍）1080px～1280px為宜；
• App設(shè)計(jì)：畫(huà)面大小根據(jù)比例自適應(yīng)縮放或根據(jù)實(shí)際頁(yè)面適配方案調(diào)整安全距離。

2. 反饋方式的不同

相對(duì)PC端的位置固定，用戶會(huì)在一個(gè)相對(duì)平緩的環(huán)境瀏覽頁(yè)面，狀態(tài)也會(huì)更為專注。誤點(diǎn)擊的概率小，更多的會(huì)講究反饋速度和信息的精確度，用戶比較多的是收藏正頁(yè)面而不是單獨(dú)的段落。而移動(dòng)端用戶因?yàn)閳?chǎng)景多變，很多時(shí)候會(huì)利用走路，坐車的實(shí)際去瀏覽界面，更容易產(chǎn)生誤操作，也更容易對(duì)頁(yè)面內(nèi)容產(chǎn)生疲憊感。

Web設(shè)計(jì)：一般對(duì)于界面的通知中心,位置相對(duì)固定，但較為隱蔽，用戶使用的不多,很難主動(dòng)喚起用戶。

這里設(shè)計(jì)師需要做的，是將自動(dòng)呼出的彈窗提示和漂浮窗口這類的“強(qiáng)制”、“粗魯”的提示形式。（經(jīng)常被運(yùn)營(yíng)要求加個(gè)活動(dòng)飄窗，價(jià)格在線客服，這類令人反感的交互方式。）

通過(guò)一些，相對(duì)“隱蔽”、“固定”、“委婉”的方式及擺放位置，在不影響用戶閱讀的前提下進(jìn)行提示交互。

App設(shè)計(jì)：最常見(jiàn)的是系統(tǒng)自帶的推送通知，用戶可主動(dòng)關(guān)閉通知，當(dāng)然也有嵌在頁(yè)面內(nèi)的，因?yàn)槠聊幌拗?，所以相?duì)網(wǎng)頁(yè)更加突出，設(shè)計(jì)師需要思考如何讓用戶更容易“開(kāi)啟通知權(quán)限”。

3. 側(cè)重的不同

針對(duì)不同設(shè)備用戶的不同習(xí)慣，我們?cè)诙x兩端的交互內(nèi)容時(shí)也要有所側(cè)重，我們會(huì)選擇性的對(duì)一些內(nèi)容進(jìn)行隱藏，也會(huì)針對(duì)設(shè)備區(qū)分同一功能的交互方式。比如：兩端同樣的收藏動(dòng)作，Web用戶比較多的是收藏整頁(yè)，而不是單獨(dú)的段落；因此用戶會(huì)較多使用“收藏夾”、下載等方式。

而對(duì)App用戶因?yàn)榍袚Q應(yīng)用容易被打斷操作及閱讀環(huán)境的限制，除了選擇一些App自帶的“稍候閱讀”功能外，“截屏”保存或長(zhǎng)按收藏就比較實(shí)用了。

3.1 藏功能

平臺(tái)，會(huì)在兩端分別給用戶不同的功能側(cè)重。就好像工作時(shí)間會(huì)更優(yōu)先pc端去處理事情，這是因?yàn)?，PC端能夠更好的拆解我們的需求，因?yàn)樾枨蟛煌缑娴膫?cè)重功能也會(huì)不同。

比如：我們會(huì)有在平臺(tái)編輯文章并配圖、排版發(fā)布平臺(tái)的需求，但是在兩端同時(shí)體驗(yàn)操作后發(fā)現(xiàn)，App任務(wù)發(fā)布的復(fù)雜程度讓用戶難以理解。往往一個(gè)Web頁(yè)面就能完成的事情App端需要2-3個(gè)頁(yè)面才能完成，加上大段的文字內(nèi)容需要編輯，以及網(wǎng)絡(luò)狀態(tài)原因，讓發(fā)布任務(wù)變得很艱難。

因此，很多App就會(huì)拆分兩端的用戶需求，將商家更多的引導(dǎo)去Web去上架貨物;消費(fèi)者則側(cè)重于App，同時(shí)界面會(huì)根據(jù)不同端“藏”去一部分的功能。

3.2 藏內(nèi)容

因界面分辨率的差異化，我們也會(huì)隱藏一些需求度較低的內(nèi)容元素。比如：我們常說(shuō)的面包條菜單，其實(shí)就是把Web上常規(guī)的Menu，適應(yīng)智能手機(jī)的操作和顯示特性而做出的變化。

Web網(wǎng)站：以鼠標(biāo)或觸摸板為操作媒介, 常用交互方式有左擊、右擊、hover鼠標(biāo)滑過(guò)幾個(gè)操作方式，對(duì)應(yīng)這些操作的web端可以將隱藏的元素，（比如解釋類文字，及子菜單等）可以在鼠標(biāo)hover時(shí)或是點(diǎn)擊后才展示出來(lái)。

移動(dòng)App：因?yàn)閷?shí)際面積更手指觸控的關(guān)系，App常用的交互方式有，手指點(diǎn)擊、滑動(dòng)、捏合等各種復(fù)雜的手勢(shì)。同時(shí)在App設(shè)計(jì)時(shí)，多遵循用選擇代替輸入，因此設(shè)計(jì)師需要更多整合信息，并隱藏一些焦點(diǎn)外的內(nèi)容。

3.3 “藏”的設(shè)計(jì)方式

（1）提示

通用-小紅點(diǎn)、提示氣泡、文字字重及變色、展開(kāi)收起常用提示性符號(hào)。

（2）內(nèi)容收起Web網(wǎng)站

點(diǎn)擊下拉、hover下拉。

移動(dòng)App：滑動(dòng)拖出內(nèi)容

4. 功能側(cè)重的不同

• Web網(wǎng)站：側(cè)重復(fù)雜操作類，例如文本編輯，后臺(tái)數(shù)據(jù)上傳下載等，需要大量操作及其他軟件相互協(xié)助的功能。
• 移動(dòng)App：側(cè)重相對(duì)簡(jiǎn)易且場(chǎng)景多變的操作，比如打車，導(dǎo)航等，或是一些適合利用碎片化時(shí)間作業(yè)的功能。

Tips：我們?cè)凇安亍钡臅r(shí)候要注意，移動(dòng)App以單手操作為主，界面上重要元素需要在用戶單手點(diǎn)擊范圍內(nèi)，或者提供快捷的手勢(shì)操作。

5. 網(wǎng)絡(luò)環(huán)境的不同

Web使用的是Wifi或是電纜等無(wú)限量的高速網(wǎng)絡(luò)，而App則是移動(dòng)網(wǎng)絡(luò)或是Wifi，網(wǎng)絡(luò)環(huán)境相對(duì)復(fù)雜。應(yīng)對(duì)這些不同網(wǎng)絡(luò)環(huán)境對(duì)應(yīng)的網(wǎng)絡(luò)速度，我們可以通過(guò)分頁(yè)區(qū)別化和加載區(qū)別化來(lái)提高用戶的體驗(yàn)。

Web網(wǎng)站：一般都是點(diǎn)擊進(jìn)入鏈接后從0開(kāi)始加載，也因?yàn)榫W(wǎng)絡(luò)穩(wěn)定的“先天”優(yōu)勢(shì)，讀用翻頁(yè)符號(hào)來(lái)解決分頁(yè)問(wèn)題，也有一些以支撐的網(wǎng)站選擇使用“瀑布流”的方式替代分頁(yè)。

比如，花瓣、蘑菇街這類“看圖”的網(wǎng)站，因?yàn)樗阉骱蟮臄?shù)據(jù)格式相同，用戶對(duì)同一內(nèi)容興趣關(guān)注度大，停留對(duì)比時(shí)間較長(zhǎng)，所以優(yōu)先使用“瀑布流”。

移動(dòng)App：因用戶使用環(huán)境復(fù)雜（可能在移動(dòng)過(guò)程中從通暢環(huán)境到封閉的信號(hào)較差的環(huán)境,網(wǎng)絡(luò)可能從有到無(wú)、從快到慢）。所以和網(wǎng)站有區(qū)別的是，我們一般通過(guò)用戶主動(dòng)下載、更新的方式來(lái)加載主要框架；實(shí)時(shí)的數(shù)據(jù)信息則是在用戶打開(kāi)App后通過(guò)當(dāng)前網(wǎng)絡(luò)加載，也因?yàn)榫W(wǎng)絡(luò)不穩(wěn)定的劣勢(shì)，很少有翻頁(yè)符號(hào)來(lái)區(qū)別每頁(yè)，反復(fù)刷新加載會(huì)造成等待時(shí)間較長(zhǎng)。

Tips：注意圖片大小 -加載圖片是對(duì)數(shù)據(jù)流量和網(wǎng)速的“巨大”考驗(yàn)，因此，我們?cè)谝恍┻\(yùn)營(yíng)類的項(xiàng)目或者是商場(chǎng)圖片時(shí)，尤其是App圖一定要記得壓縮。我們可以用到tinypng.com等在線壓縮圖片的工具進(jìn)行壓縮，也要提醒開(kāi)發(fā)小哥哥發(fā)版前記得壓縮圖片。

總結(jié)

• 交互方式，因?yàn)椴僮髅浇橛兴煌晕覀円⒁鈪^(qū)分一些狀態(tài)和側(cè)重；
• 反饋方式，因?yàn)闉g覽環(huán)境和基礎(chǔ)框架不同，所以我們要注意利用各自空間優(yōu)勢(shì)進(jìn)行反饋；
• 側(cè)重功能，因?yàn)楦髯缘牟僮鲀?yōu)勢(shì)，我們會(huì)對(duì)兩端的用戶和功能進(jìn)行劃分，給出不同的產(chǎn)品側(cè)重；

最后是網(wǎng)絡(luò)環(huán)境，因?yàn)閮烧吒髯跃W(wǎng)絡(luò)環(huán)境的優(yōu)劣勢(shì)，我們?cè)谧鲰?yè)面布局設(shè)計(jì)的時(shí)候也要作出相應(yīng)的調(diào)整。

雖然現(xiàn)在Web端的網(wǎng)站等在慢慢的被弱化，連鵝廠都放棄了Web端的QQ，但是作為UI設(shè)計(jì)師，對(duì)于Web端的基本工還是不能放棄啊～至少App戰(zhàn)勝不了后臺(tái)系統(tǒng)！

參考鏈接：

• https://www.jianshu.com/p/81d4486bc816《網(wǎng)頁(yè)中的字體到底該怎么選擇？》
• https://www.jianshu.com/p/cc8916f35d00《用戶界面網(wǎng)頁(yè)設(shè)計(jì)原則》

本文由 @Quines 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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