Web-UI設(shè)計(jì)，你需要了解的！

時(shí)間：2023-09-11 17:18:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-11 17:18:01 來源：網(wǎng)站運(yùn)營(yíng)

Web-UI設(shè)計(jì)，你需要了解的?。骸菊繉?duì)于很多從事 UI 行業(yè)的新人來說，web UI設(shè)計(jì)是一個(gè)充滿未知的領(lǐng)域。因?yàn)槎鄶?shù)人沒有系統(tǒng)的學(xué)習(xí) UI 知識(shí)，很多時(shí)候都只是憑借自己的感覺和經(jīng)驗(yàn)去繪制界面，缺少完整的設(shè)計(jì)思想和體系化的內(nèi)容，例如，對(duì)于畫布的創(chuàng)建、規(guī)范的設(shè)置等沒有一個(gè)清晰的概念，導(dǎo)致做出來的頁(yè)面總是不那么盡如人意。本文整理匯總了一些網(wǎng)頁(yè)設(shè)計(jì)相關(guān)的知識(shí)，幫助更多 UI 設(shè)計(jì)師了解網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)。

【作者】Molly

開始，我們不妨先來了解一些概念。

WUI: Web User Interface的縮寫，可翻譯為網(wǎng)頁(yè)風(fēng)格用戶界面，在國(guó)外用語中，常使用短語User Interface Design for the Web.

UI就是用戶界面，包括三個(gè)方向：用戶研究，交互設(shè)計(jì)，界面設(shè)計(jì)。?WUI是網(wǎng)頁(yè)用戶界面。WUI設(shè)計(jì)與常見網(wǎng)站建設(shè)的區(qū)別是，WUI注重人與網(wǎng)站的互動(dòng)和體驗(yàn)，以人為中心進(jìn)行設(shè)計(jì)。

（1）Web的基本分類

根據(jù)不同的使用對(duì)象，設(shè)計(jì)會(huì)有所不同，設(shè)計(jì)理念也有所區(qū)別。

C端產(chǎn)品簡(jiǎn)稱To C (To Customer)，就是面向個(gè)人用戶提供服務(wù)的產(chǎn)品，考慮絕大部分用戶使用場(chǎng)景和訴求，是直接服務(wù)于用戶的，維度比較單一。為了降低用戶的使用成本，操作起來相對(duì)比較簡(jiǎn)單，高級(jí)功能會(huì)相對(duì)少點(diǎn)。例如，門戶網(wǎng)站（搜狐網(wǎng)，新浪網(wǎng)）、企業(yè)網(wǎng)站（公司官網(wǎng)）、產(chǎn)品網(wǎng)站（蘋果，小牛）、電商（京東，天貓）、視頻網(wǎng)站（愛奇藝，優(yōu)酷視頻）等。

B端產(chǎn)品簡(jiǎn)稱To B (To Business)，就是面向商家、企業(yè)等提供的服務(wù)產(chǎn)品，是間接服務(wù)于用戶的。B端產(chǎn)品一般較定制化，以業(yè)務(wù)為導(dǎo)向?？赡苡泻芏喔呒?jí)功能，突出高效，導(dǎo)致易學(xué)性打折扣。例如，網(wǎng)站后臺(tái)（網(wǎng)站信息管理）、erp系統(tǒng)（企業(yè)管理）、SaaS（軟件服務(wù)）、企業(yè)OA（辦公自動(dòng)化）等。

（2）布局方式

垂直布局（36氪）：一般為咨詢類，新聞?lì)惥W(wǎng)站，這種類型的網(wǎng)站，一般布局固定不變，承載的信息量很大。

流式布局（豆瓣）：這類布局適用類型非常廣，形式很自由，千變?nèi)f化。頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。代表作柵欄系統(tǒng)（網(wǎng)格系統(tǒng)）。

視差類型布局（qq官網(wǎng)），以qq首頁(yè)為例，多層背景以不同的速度移動(dòng)，形成了立體的運(yùn)動(dòng)效果，帶來給用戶出彩的視覺效果。 在網(wǎng)頁(yè)設(shè)計(jì)中，成為網(wǎng)頁(yè)設(shè)計(jì)的熱點(diǎn)趨勢(shì)，被國(guó)內(nèi)外網(wǎng)站所應(yīng)用，。成為了越來越熱點(diǎn)的趨勢(shì)。但是，如果加載速度很慢，那么用戶體驗(yàn)就會(huì)很差。

全屏布局（cultldn），任何顯示器都會(huì)被撐滿屏幕。對(duì)于全屏展示的網(wǎng)頁(yè)，又分為自適應(yīng)和響應(yīng)式。自適應(yīng)是根據(jù)瀏覽器的分辨率大小，自動(dòng)適配尺寸布滿全屏，

對(duì)于后臺(tái)設(shè)計(jì)，布滿全屏的網(wǎng)頁(yè)尺寸在當(dāng)下的環(huán)境顯得更為主流，因?yàn)楹笈_(tái)的更新優(yōu)化很頻繁，固定寬度有時(shí)候很難滿足交互需求。

瀑布流布局（花瓣），一般都是素材網(wǎng)站。

（3）關(guān)于屏幕分辨率

確定計(jì)算機(jī)屏幕上顯示多少信息的設(shè)置，以水平和垂直像素來衡量。顯示分辨率就是屏幕上顯示的像素個(gè)數(shù)，屏幕尺寸一樣的情況下，分辨率越高，顯示畫面就越精細(xì)，同樣的屏幕區(qū)域內(nèi)能顯示的信息也越多。目前主流的屏幕分辨率如下：

據(jù)統(tǒng)計(jì)，2017年P(guān)C端的屏幕分辨率占比統(tǒng)計(jì):

• 1920×1080 — 27.38%
• 1366×768 — 21.06%
• 1440×900 — 11.59%
• 1024×769 — 7.12%
• 1600×900 — 4.68%
• 1280×800 — 3.24%

由于分辨率的不同，在做網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，需要考慮最小適配的屏幕，照顧到pc端的低分辨率機(jī)器。

正常情況下，如果顯示器分辨率>畫布大小，那內(nèi)容能正常的被用戶訪問;如果顯示器分辨率<畫布大小，那么內(nèi)容就無法顯示完成。

對(duì)于一些非主流的設(shè)備，可以選擇忽略，我們需要考慮的是多數(shù)人的需求。從2017年的屏幕分辨率占比例來看，1024以下的設(shè)備，使用的用戶很少了。所以，設(shè)計(jì)之前，我們需要設(shè)定安全區(qū)域，目前常用安全范圍：960px 、1000px 、1024px 、1200px。新浪安全區(qū)為1000px，能夠滿足絕大部分用戶，淘寶京東的安全區(qū)域?yàn)?200px。960，1200是萬能的數(shù)字，能被 123456整除。

（4）基本規(guī)范

一般情況，在項(xiàng)目初期，設(shè)計(jì)師需要建立出一套設(shè)計(jì)規(guī)范（主色調(diào)，字體等），之后的的設(shè)計(jì)工作，都要以此規(guī)范為基準(zhǔn)

1.文字

一個(gè)網(wǎng)頁(yè)的最基本要素：文字和圖片，出現(xiàn)了文字，就會(huì)出現(xiàn)文字排版，字間距、字號(hào)、行高行間距、段間距大小設(shè)定，字體選擇、字體顏色粗細(xì)等細(xì)節(jié)，而這些細(xì)節(jié)，往往是非常重要的細(xì)節(jié)。

a.字號(hào)

在界面設(shè)計(jì)中，文字字號(hào)決定了信息層次和權(quán)重，設(shè)計(jì)師需要給界面的文字建立視覺層級(jí)，將文字大致分為三類：主標(biāo)題，次標(biāo)題和正文。首先我們要設(shè)定基準(zhǔn)字號(hào)（最小字號(hào)），十號(hào)甚至都能看清，但是差一點(diǎn)，所以12最然后可依據(jù)一定規(guī)律設(shè)定導(dǎo)航、標(biāo)題等稍大字號(hào)。一般網(wǎng)頁(yè)基準(zhǔn)字號(hào)有12px、14px、16px等。

更新ing

---

歡迎關(guān)注 技術(shù)團(tuán)隊(duì)的本站賬號(hào) 我們憑團(tuán)隊(duì)實(shí)例運(yùn)作以下專欄， 必須干貨！

互聯(lián)網(wǎng)創(chuàng)業(yè)專欄 (我們小伙伴的創(chuàng)業(yè)歷程)

與您一起聊技術(shù) (APP、微信公眾號(hào)、小程序、H5 技術(shù)總結(jié))

互聯(lián)網(wǎng)產(chǎn)品研發(fā)管理 (我們公司對(duì)產(chǎn)品結(jié)構(gòu)的管理思路)

產(chǎn)品君的案例庫(kù)（產(chǎn)品小伙伴深刻總結(jié)）