市面上主流的界面設(shè)計主要包括移動端、web端、桌面端、硬件、插件等，app和網(wǎng)站設(shè)計是大部分設(shè)計師最常見的設(shè)計需求，這兩個也是最核心的設(shè)計端平臺，所以明白web端和移動端設(shè)計的相似和差異并且知道如何應(yīng)對是至關(guān)重要的。
整體來說，移動端的設(shè)計是更可控的，web端的設(shè)計難度實際更高，上限也更高。但是想要做好web端的設(shè)計并不難，只要明白web端設(shè)計時需要考慮的因素和解決辦法，那么所有問題自然迎刃而解。
總體上，移動端和web端的字體規(guī)范是一致的，同一套字體大小都可以在雙端有好的識別和視覺效果。唯一細微的區(qū)別是瀏覽器支持的最小字體大小是12，所以在web端要摒棄12以下的字號。實際上這并不會增加你的web端設(shè)計難度，因為web端的設(shè)計空間是足夠的。
設(shè)計中往往需要考慮文案長度的問題，移動端受到屏幕空間的限制往往更容易遇到問題，你需要考慮當前文本段是否能在你所預(yù)留的空間放得下，對此可以參考以下幾種解決辦法：
-
高度自適應(yīng)：也就是換行顯示，大部分的文本段不可能無限換行，也應(yīng)該有字數(shù)限制，所以選擇這一個解決辦法，正常也需要設(shè)定一個高度極限值。
-
超出省略：當文本段的完整性不是那么重要，且需要漏出，那么這是一個不錯的方法
-
字號自適應(yīng)縮小：這正常用在金融類產(chǎn)品的數(shù)字顯示中，比如余額等，當小數(shù)點過多或者金額過大導(dǎo)致的數(shù)字文本端過長時，數(shù)字是無法換行或省略的，所以你可以選擇字號自適應(yīng)縮小。
移動端和web端最直觀的差異就是屏幕大小的差異，移動端小，且各設(shè)備的差異化細微，web端的空間大，且不同設(shè)備的屏幕差異大，所以就有了幾點主要差異：
移動端整體上是自上而下的設(shè)計布局，寬度受限比較嚴重，所以除了一些左滑手勢帶來的橫向空間拓展，布局的變化上不大。
web端因為空間大，所以就有了更多的布局可能性，例如左右布局，居中布局，左中右布局，或是全屏自適應(yīng)布局。這些布局方式也各有各的優(yōu)缺點。
所以設(shè)計一個網(wǎng)站時，往往需要多個布局配合使用，能讓你的網(wǎng)站視覺感受更舒適，利用率上更合理。切忌為了美觀或者方便等原因死磕一個布局方式。當然，居中布局是最萬能的一個布局，如果你暫時沒辦法掌控多個布局，那么居中布局是你最佳的選擇。
前文說了，因為web端的設(shè)備差異大，所以你需要在設(shè)計時考慮小屏筆記本和大屏顯示器的適配問題，甚至是用戶手動拉動瀏覽器寬度時所得到的適配反饋也需要考慮其中。
適配不是必須的，因為適配的成本較高，復(fù)雜的頁面往往需要設(shè)計出多個斷點頁面去讓開發(fā)根據(jù)頁面寬度重新適配內(nèi)容。所以大部分的居中布局的網(wǎng)站，是不做適配的，因為你只需要控制你的內(nèi)容寬度能在13寸筆記本完整展示，其他的就是極小部分用戶的需求了。
web端到移動端的適配往往需要重構(gòu)，也就是把當前網(wǎng)站的內(nèi)容，重新在手機寬度下做設(shè)計，結(jié)合上文文本部分的內(nèi)容，請不要想當然的把字號縮小。只需要考慮排版和功能是否需要刪減的問題。
移動端受到屏幕限制，彈窗的更多是banner的彈出，提示的作用，或者是個別簡單篩選操作，在移動端很難在彈窗上放置很多的輸入等復(fù)雜操作
在web端的設(shè)計中，一定要巧用彈窗，簡單的編輯或著創(chuàng)建等操作都可以用彈窗代替，不僅可以使操作更聚焦，也可以減少頁面跳轉(zhuǎn)來縮短路徑。
由于操作媒介的不同，導(dǎo)致移動端和web的操作手勢有很大的區(qū)別，移動端是用手指操作，web端是鼠標操作，手指操作決定了手勢的多樣性，鼠標的操作決定了點擊的精確，并且由于鼠標的操作反饋是分階段的，需要在每個階段都給予用戶相應(yīng)的反饋來打造更好的用戶體驗。
移動端中對于操作的反饋主要聚焦于手指點擊后的反饋，懸停態(tài)往往被長按代替。而web端鼠標操作存在三個狀態(tài)，一個是正常狀態(tài)，一個是懸停狀態(tài)，一個是按下狀態(tài)，這三個狀態(tài)需要在設(shè)計師考慮并設(shè)計來向開發(fā)說明。web端中不同元素的常見狀態(tài)（主要為懸停態(tài)）區(qū)分方式需要明白：
-
button：用顏色區(qū)分，常見的方式是改變顏色的明度，懸停增加明度，按下降低明度
-
icon：icon的狀態(tài)區(qū)分更多是在懸停狀態(tài)上，常見方式有：改變顏色；改變icon形態(tài)（如線性變面性）；為icon添加背景色塊（如圓形灰色背景）。
-
文字：文字的狀態(tài)區(qū)分除了顏色之外，可以利用文字自帶的屬性，如字重，字體大小，甚至可以在個別海外產(chǎn)品中看到通過改變字間距來表示懸停狀態(tài)。
-
卡片：卡片的懸停設(shè)計更加的多樣，如改變填充色；改變描邊顏色；增加投影，比較有趣的有改變卡片大??；輕微改變卡片透視；改變卡片的位置，如懸停時卡片向上輕微移動。
由于web端獨有的懸停手勢，你可以在懸停這個手勢大作文章，如果你了解linear風(fēng)格的話，或者經(jīng)常瀏覽國外產(chǎn)品的話，許多網(wǎng)站會在鼠標懸?？ㄆ瑫r產(chǎn)生動效，動效不限于卡片元素（插畫、圖標、可視化表格等）的動畫；光影描邊的循環(huán)。懸停按鈕時，箭頭的位置變動，或者其他動畫效果。更酷炫的還有鼠標與卡片透視的交互，甚至與鼠標與全局頁面的交互，如水波紋等。
整體來說，web端基于屏幕大小的優(yōu)勢和狀態(tài)的多樣，在操作按鈕漏出數(shù)量和方式上會更加的多樣。
移動端獨有的是長按手勢和左滑右滑手勢，所以移動端會把一些操作放到左滑手勢中，最常見的如消息列表的置頂、刪除等。長按手勢更多的是彈出更多操作，或是產(chǎn)生可拖動效果。
web端拿列表舉例，基于屏幕的大小的優(yōu)勢，可以將更多操作直接在列表右側(cè)直接漏出，用戶的操作路徑更短，觸達率自然就更高。拿卡片舉例，button的存在有的時候會影響到卡片的大小和美觀，所以有些操作往往可以藏到懸停狀態(tài)里，懸停操作不需要學(xué)習(xí)，所以用戶不會為此感到疑惑，也可以保證功能的完整性。
關(guān)于各個模塊如何設(shè)計并不在這里展開，我想表達是在設(shè)計稿設(shè)計時的一些操作思路，或者說是組件的搭建思路。
如果你對前端開發(fā)有一定的了解，那么你一定懂得盒子套盒子。設(shè)計也是如此，需要給你的每個設(shè)計模塊建議一塊獨有的盒子。這是區(qū)別于間距或分割線的區(qū)分模塊的思路的。
舉個例子，你有圖片，主標題，副標題三個元素形成一個小模塊，那么你在確定好排版之后，你需要一個盒子將他們裝起來，那么這個模塊必須有它自己的寬度，高度。換個角度理解也就是它需要有一定的上下左右間距，在figma中，這個盒子就是你的frame，高級一點就是你的自動布局。這個盒子的大小就決定了這個模塊的操作熱區(qū)，這也方便你在設(shè)計做出你的懸停效果。
這個設(shè)計思維適用于web端和移動端，且十分重要，所以盡量避免在設(shè)計圖出現(xiàn)各個元素分別散落的情況，這不僅不利于你的設(shè)計稿管理，也不利于開發(fā)的查看。
在進行web端設(shè)計時，如果你對web端設(shè)計一無所知，也無需驚慌。你可以找到合適的參考網(wǎng)站，并且分析它每個模塊的高度，間距等，去模仿他，并且從中得出規(guī)律。
拿web端的導(dǎo)航欄舉例，假設(shè)你糾結(jié)于web端的導(dǎo)航欄高度設(shè)置多少，你可以找到參考的網(wǎng)站，使用檢查功能（F12）去查看高度，或粗暴的截圖查看高度即可。當然，在此之前，你需要確定這個模塊的高度是不會隨屏幕大小改變而改變的。
無論是web端設(shè)計還是移動端設(shè)計，當你在設(shè)計模塊或搭建組件時，善用自動布局，這不僅有利于你設(shè)計圖高效率修改，也能應(yīng)對你的web端可能出現(xiàn)的適配情況。這需要考驗?zāi)愕膄igma能力，如果大家有興趣，后續(xù)我可以出一些figma基礎(chǔ)、組件、自動布局等相關(guān)教程同大家探討。
作者：PONEPENG
來源：站酷
藍藍設(shè)計(bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司
銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計
軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
