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