首頁(yè)

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

前端達(dá)人

編者按:這篇趨勢(shì)分析的文章出自資深設(shè)計(jì)師 Lyudmil Enchev 之手,匯總了 2021 年在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域值得注意的 10 個(gè)重要趨勢(shì)。

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

雖然移動(dòng)端設(shè)計(jì)在持續(xù)地繁榮發(fā)展,但是網(wǎng)頁(yè)設(shè)計(jì)依然是當(dāng)下硬性的設(shè)計(jì)需求。相比于以往,網(wǎng)頁(yè)設(shè)計(jì)所面對(duì)的要求,其實(shí)越來越高,不僅要細(xì)致到位,要功能全面,要能夠貼合趨勢(shì),還要能兼顧桌面和移動(dòng)端。

從網(wǎng)絡(luò)上找到靈感并不是一件復(fù)雜的事情,不過要將新的樣式應(yīng)用到網(wǎng)頁(yè)中,給舊有的樣式翻新,都需要配合技術(shù)的進(jìn)步和新的工具。

在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域中,設(shè)計(jì)趨勢(shì)從來都不是為了設(shè)計(jì)而誕生的,相反它更像是視覺、品牌、技術(shù)、先鋒探索綜合作用下,落地到網(wǎng)頁(yè)作品中的一種綜合表現(xiàn)。越來越多的技術(shù)和設(shè)計(jì)人員將聰明才智和天才想法融入到網(wǎng)頁(yè)當(dāng)中,才催生了如今我們看到的這些「趨勢(shì)」,而這個(gè),就是我們今天要聊的東西。

1、卡通插畫

其實(shí)嚴(yán)格意義上來說,卡通插畫一直在流行,流行了很多年。從卡通插畫在電視上成為一代又一代人的視覺和設(shè)計(jì)啟蒙開始,它就從來沒有離開過網(wǎng)頁(yè)設(shè)計(jì)的主流領(lǐng)域。

也正是因此,直到今天,當(dāng)我們談及網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的時(shí)候,卡通插畫也會(huì)是我們最容易想到的一個(gè)趨勢(shì)發(fā)展方向。插畫,是一位設(shè)計(jì)師自由創(chuàng)作發(fā)揮的通行證,而卡通插畫,是最容易帶著設(shè)計(jì)飛翔的一個(gè)設(shè)計(jì)技術(shù)。

卡通插畫足夠靈活,裝飾性非常強(qiáng),在題材和風(fēng)格足夠切合的情況下,能夠更快和用戶構(gòu)成情緒上的紐帶,可以說是非常強(qiáng)大了。

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2、3D 和景深效果

當(dāng)然,不止是在這一篇文章里面強(qiáng)調(diào)過,3D 的重要性和作為趨勢(shì)的流行程度。從文字排版到視覺圖像,3D 在視覺領(lǐng)域的快速增長(zhǎng)和市場(chǎng)需求是大家有目共睹的。

值得一提的是,在網(wǎng)頁(yè)這個(gè)領(lǐng)域,除了諸多視覺元素的視覺設(shè)計(jì)之外,有一個(gè)非常突出的趨勢(shì),就是運(yùn)用 3D 來構(gòu)建視覺景深,渲染出層次,這非常強(qiáng)大。

這種景深和 3D 元素所構(gòu)建出來的沉浸感使得整個(gè)網(wǎng)頁(yè)充滿了吸引力,結(jié)合色彩,陰影、高光,在高清晰度的屏幕上,這些都成為了將用戶留下來的理由。看看下面的案例,你就明白我說的意思。

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

3、失真和故障效果

失真和故障效果則是另外一個(gè)重要的趨勢(shì)。視覺噪音,隨機(jī)的元素,缺陷,故障,模糊,低保真的元素,粗野主義式的設(shè)計(jì),這些在這個(gè)以精致細(xì)膩為上的時(shí)代,制造出了一種反主流的聲音。

并非它們必須這樣,但是這樣的視覺風(fēng)格確實(shí)更容易在成堆的精致細(xì)膩設(shè)計(jì)當(dāng)中脫穎而出——當(dāng)然前提是你的故障和失真效果能夠做的足夠「好」。

奇怪的配色,反直覺的排版,明顯的錯(cuò)位,看起來怪誕但是有趣的設(shè)計(jì),這樣的設(shè)計(jì)通常需要設(shè)計(jì)師更好地在對(duì)錯(cuò)好壞之間拿捏平衡。

感覺,感覺很重要,你明白嘛?這不是反邏輯也不是反設(shè)計(jì),是特立獨(dú)行??纯聪旅娴陌咐?。

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

4、90年代復(fù)古風(fēng)

懷舊也一直在流行,你知道的。但是如何懷舊?90年代,數(shù)字化設(shè)計(jì)剛剛從像素開始向著更加細(xì)致的未來前進(jìn),這個(gè)階段,有大膽的嘗試,有快速更迭,這些介乎新舊之間的數(shù)字設(shè)計(jì),是我們對(duì)于 90 年代設(shè)計(jì)的美好回憶。

相比于 80 年代的粗陋(圖形化界面還在艱難普及中),90年代是騰飛的階段,從界面到游戲,在擬物化走到之前,那種介乎精致和復(fù)古之間的微妙感覺,是非常有趣的。

對(duì)于新世紀(jì)才出生的 Z 世代而言,90年代是陌生的,但是這個(gè)時(shí)代又是很容易可以被追溯到的,這也是使得 90 年代的數(shù)字風(fēng)情有著能夠打通不同年齡段用戶的奇妙氣場(chǎng),它的逐步流行,并不令人意外。

你總能在這些設(shè)計(jì)當(dāng)中,get 到到某些東西,然后微微一笑。

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

5、微交互和微動(dòng)效

嚴(yán)格意義上來說,微動(dòng)效和微交互并不是趨勢(shì)那么簡(jiǎn)單,在如今的 UI 和 UX 設(shè)計(jì)當(dāng)中,它是必不可少的組成部分,它已經(jīng)從過去的「加分項(xiàng)」變成了如今的「基本要求」。

微交互和微動(dòng)效通常不會(huì)做得特別的顯著,但是它們會(huì)深入到 UI 界面的各個(gè)地方,按鈕,小圖標(biāo),行為召喚式的文本,翻頁(yè)按鈕,光標(biāo),產(chǎn)品圖,彈出框,等等等。

微交互和微動(dòng)效從最初的只需要確??捎眯?,到如今需要好看易用又有趣,可以說要求是比以往有明顯提高了。在接下來的 2021 年可以預(yù)測(cè)的是,微動(dòng)效會(huì)更加強(qiáng)調(diào)趣味性和交互性。

如果你正在考慮這部分的設(shè)計(jì),看看下方的設(shè)計(jì)參考吧。

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

6、實(shí)驗(yàn)性配色

在關(guān)于網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的文章當(dāng)中,不探討配色是不完整的。2021年的年度流行色是什么?不妨等等潘通下個(gè)月月初公布的2021年年度色。那 2021 年的在配色方法上的趨勢(shì)是什么?是實(shí)驗(yàn)性配色。

在以往追求協(xié)調(diào)配色的時(shí)代,和諧的搭配是最主要訴求。不過現(xiàn)如今,用戶、品牌乃至于設(shè)計(jì)師都在尋求一些更加新鮮獨(dú)特的東西,實(shí)驗(yàn)性的配色就是在這樣的訴求之下,逐漸流行起來。

這些實(shí)驗(yàn)性的配色通常會(huì)帶有一些漸變的特質(zhì),一些反習(xí)慣和反邏輯的搭配方式,飽和度較高的藍(lán)色、紫色和紅色的融合,一些更為黯淡或者更為刺眼的搭配方式,強(qiáng)烈的視覺實(shí)驗(yàn)仿佛是在探索用戶的接受極限在哪里。對(duì)于如何落地,多看看那些優(yōu)秀而微妙的已有的范例吧。

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

7、超粗字體樣式

如果說有什么趨勢(shì)在 2021 年是非常明顯的話,我只能說,是更為大膽的排版和更為粗壯的字體筆觸。當(dāng)然,這些設(shè)計(jì)本身是要具備相當(dāng)?shù)囊曈X美感和愉悅性的。懟到出血位乃至于版面之外的文本,快速切換的字體效果是「注意力經(jīng)濟(jì)」催生的一種設(shè)計(jì)策略。所有的一切——尤其是文本——仿佛在大聲地吼叫著:看我看我看我!

這大概就是這種設(shè)計(jì)趨勢(shì)誕生的本質(zhì)。不過如果你設(shè)計(jì)的足夠炫酷、炸裂或者優(yōu)雅,誰又會(huì)去責(zé)怪你呢?

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

8、手作的質(zhì)感和風(fēng)格

我們似乎開始厭倦橫平豎直均分的網(wǎng)格,那些并不那么精準(zhǔn),帶著手工制作的「不夠」的元素,對(duì)于越來越多的用戶而言,似乎是更好、更加易于親近的東西。因?yàn)檫@樣看起來更加個(gè)性,似乎給網(wǎng)頁(yè)賦予了某種真實(shí)質(zhì)感,甚至可以腦補(bǔ)出這些手寫、手繪、手撕的視覺元素背后,站著一個(gè)有血有肉真實(shí)存在的人。

這大概才是手作感真正讓人開始沉迷的重要原因。你可以開始嘗試一下這種這些自由的、非正規(guī)的、甚至有錯(cuò)漏但是顯得非常友好的視覺元素,字體,插畫,排版方式,裝飾元素,等等等等。

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

9、3D插畫和動(dòng)畫

其實(shí)我們?cè)谇懊嬉呀?jīng)反復(fù)提及了3D的部分,不過現(xiàn)在再做一個(gè)匯總:走出平面2D的領(lǐng)域,來試試有趣的 3D 設(shè)計(jì),無論是好玩逼真的建模和陰影、有趣的材質(zhì)和細(xì)節(jié)、腦洞大開的動(dòng)畫、充滿縱深的轉(zhuǎn)場(chǎng)和強(qiáng)化的交互,都能夠讓網(wǎng)頁(yè)的設(shè)計(jì),在2021 年更加吸引人。

因?yàn)殪趴岜旧砭妥銐蛭肆瞬皇菃幔?

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!

10、極簡(jiǎn)主義風(fēng)格

極簡(jiǎn)主義最后還是要提及一下。雖然總體來說是老生常談,但是它依然是很多設(shè)計(jì)師熱衷、很多用戶喜歡的一種主流的風(fēng)格,也是值得追隨的趨勢(shì)。

必須說的是,還有很多厭倦了各種流行樣式的用戶可能會(huì)擁抱極簡(jiǎn)主義,它會(huì)作為一種持續(xù)的「趨勢(shì)」而存在。這也是極簡(jiǎn)主義最讓人著迷的地方:將你需要的必要的部分呈現(xiàn)出來,且只呈現(xiàn)這部分東西,沒有過度裝飾,沒有無效信息,簡(jiǎn)單直接。

2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!


2021年,這10種網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)值得關(guān)注!
藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)




炫酷大數(shù)據(jù)可視化界面設(shè)計(jì)賞析(九)

周周

節(jié)能環(huán)保是符合可持續(xù)發(fā)展戰(zhàn)略的一個(gè)課題。在節(jié)能環(huán)保方面界面設(shè)計(jì)都有哪些風(fēng)格呢?

下面給您展示兩種風(fēng)格界面:清新明快和深色沉穩(wěn)。


WechatIMG352.jpeg

綠色和黃色為主的色調(diào)給人一種清新自然,富有生機(jī)與活力的印象。圖形以圓形為主,比較有親和力,同時(shí)圓形也是今年UI設(shè)計(jì)的流行趨勢(shì)。


WechatIMG351.png

紫色和粉紅色漸變?yōu)楸尘?,明快有活力,容易吸引人眼球。綠色、黃色、藍(lán)色作為輔助色,增加頁(yè)面的靈動(dòng)感。圖標(biāo)簡(jiǎn)潔清晰,辨識(shí)度高。


WechatIMG348.jpeg

黑白色調(diào)是一種低調(diào)雅致的配色,配以簡(jiǎn)潔的線條,更符合節(jié)能環(huán)保的主題。


WechatIMG350.jpeg

這款A(yù)PP界面采用深灰色底色,沉穩(wěn)大氣,有現(xiàn)代科技感,界面采用卡片式布局。配以粉紅和橘黃作為點(diǎn)綴,讓界面不因深色而顯得呆板。


WechatIMG349.jpeg界面采用深藍(lán)和灰色為主的配色,大面積留白??ㄆ讲季?,配以曲線圖表,扁平風(fēng)格圖標(biāo)。簡(jiǎn)潔清晰,表意明確。讓人對(duì)節(jié)能的理念一目了然。




(圖片均來源于網(wǎng)絡(luò))


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


更多精彩文章:


   大數(shù)據(jù)可視化界面設(shè)計(jì)賞析(一)

   大數(shù)據(jù)可視化界面設(shè)計(jì)賞析(二)

   大數(shù)據(jù)可視化界面設(shè)計(jì)賞析(三)

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析(四)

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析(五)

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析(六)

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析(七)

  大數(shù)據(jù)可視化界面設(shè)計(jì)賞析(八)



web表格設(shè)計(jì)解析

資深UI設(shè)計(jì)者

為大家梳理一個(gè)web表格設(shè)計(jì)框架,希望能夠給大家?guī)硗暾牟灰粯拥膬?nèi)容。全文12,598字 ,預(yù)計(jì)閱讀30分鐘,建議收藏。


在網(wǎng)頁(yè)或桌面端為載體的B端產(chǎn)品和生產(chǎn)力工具中,越來越多的設(shè)計(jì)師需要和數(shù)據(jù)打交道,查詢和處理數(shù)據(jù)的能力是當(dāng)前正在設(shè)計(jì)的大多數(shù)產(chǎn)品的關(guān)鍵要求之一,表格被公認(rèn)為是展現(xiàn)數(shù)據(jù)最為清晰、的形式之一,也是世界上最常用的用戶界面工具,其重要性不言而喻。



表格,展示行列數(shù)據(jù),既是一種可視化交流模式,又是一種整理數(shù)據(jù)的手段。表格幫助我們組織和展示信息,同時(shí)保證信息的可讀性,從大量信息中找到所需內(nèi)容;通過合理布局,感知不同信息間的關(guān)聯(lián)與區(qū)別,進(jìn)行分析和比較;對(duì)數(shù)據(jù)進(jìn)行排序、搜索、分頁(yè)、自定義操作等復(fù)雜行為。


1.1 表格的布局

表格的行元素和列元素行和相交就會(huì)形成一個(gè)簡(jiǎn)單的二維表,行,列元素的空間組合就確定了一個(gè)個(gè)單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局,分別強(qiáng)調(diào)行、列、單元格。


水平型會(huì)弱化列的存在,強(qiáng)調(diào)行信息的連貫性,適用于用戶閱讀信息時(shí)是從左到右,然后自上而下逐條掃描。垂直型是通過強(qiáng)化列的視覺特征來突出不同列信息的對(duì)比。矩陣型的表格有均勻統(tǒng)一的分割線,單元格比較明顯,適用于列信息較多而沒有足夠空間用留白來分割信息的表格,同時(shí)我認(rèn)為單元格合并的情況也屬于矩陣型。


還有比較常用的表格類型層級(jí)型:


層級(jí)表

是表達(dá)結(jié)構(gòu)性關(guān)系的表格,表現(xiàn)得如同樹的分支,所以又叫樹列表。每一個(gè)條目可展開或折疊包含的更詳細(xì)的行信息,也包含嵌套子表格。

層級(jí)表并不如矩陣表直觀,但通過結(jié)構(gòu)化的組織方式逐級(jí)展示表的數(shù)據(jù)內(nèi)容,讓整體信息架構(gòu)一目了然,非常適合大型數(shù)據(jù)表。

結(jié)合層級(jí)表的使用場(chǎng)景,多以查看為主,編輯需求較少。


同時(shí)還有特殊的表格類型,圖表型與卡片型:


圖表型

除了在單元格中引用圖表之外,很多時(shí)候都會(huì)提供圖表/表格視圖切換,便于用戶從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。有時(shí)也會(huì)有“圖表+表格”的形式,這時(shí)候,表格往往只作為明細(xì)放在頁(yè)面底部。大量的表格也會(huì)導(dǎo)致視覺的單調(diào)。


卡片型

可以用卡片的形式來展示信息,將信息以組的概念呈現(xiàn),單張卡片內(nèi)的信息按優(yōu)先級(jí)進(jìn)行排列。此外,卡片彼此之間又形成一個(gè)整體。

卡片是一種承載信息的容器,對(duì)可承載的內(nèi)容類型無過多限制,它讓一類信息集中化,增強(qiáng)區(qū)塊感的同時(shí)更易于操作;卡片通常以網(wǎng)格或矩陣的方式排列,傳達(dá)相互之間的層級(jí)關(guān)系。適合較為輕量級(jí)和個(gè)性化較強(qiáng)的信息區(qū)塊展示。


注:在有限的表格空間內(nèi)需注意卡片信息之間的間距,若卡片信息過長(zhǎng)可做截?cái)嗵幚怼?


在實(shí)際工作中,上述表格類型還有可能互相結(jié)合,以更好的達(dá)到相應(yīng)的分析目的。

比如垂直–層級(jí),矩陣–數(shù)據(jù)立體表等。



1.2 表格的構(gòu)成

從視覺結(jié)構(gòu)的表現(xiàn)角度,個(gè)人將“表格”的構(gòu)成分為:標(biāo)題、表上方篩選操作區(qū)、表頭、表體、底欄。由表頭、表體構(gòu)成內(nèi)部區(qū)域,由標(biāo)題、篩選操作、底欄構(gòu)成外部區(qū)域。


標(biāo)題

標(biāo)題是對(duì)表格信息內(nèi)容的整體概括,可包含數(shù)據(jù)來源及屬性(日期、地區(qū)等),以便用戶對(duì)表格內(nèi)容有整體認(rèn)知。給數(shù)據(jù)表格起一個(gè)清晰簡(jiǎn)明的標(biāo)題,與其他的設(shè)計(jì)同等重要。有了好的標(biāo)題,表格就可以獨(dú)立使用,如果導(dǎo)航菜單層級(jí)清晰,同樣能起到標(biāo)題的作用。標(biāo)題作為最重要的識(shí)別元素,默認(rèn)展示在左上角。


篩選操作區(qū)域

這里特指位于表頭的上方的操作區(qū)域,包含篩選,操作按鈕等其他操作。篩選區(qū)包含模糊搜索和條件篩選,按鈕分為增刪改和其它業(yè)務(wù)處理操作,合理設(shè)計(jì)篩選區(qū)可以大大提高用戶的效率。


表頭

表頭對(duì)數(shù)據(jù)性質(zhì)的歸類。表頭按慣例要對(duì)數(shù)據(jù)的簡(jiǎn)況做出反映,如被調(diào)查者的性別、年齡、學(xué)歷、收入、家庭成員組成、政治背景、經(jīng)濟(jì)狀況等。表頭的字段名稱應(yīng)當(dāng)符合人們的思維習(xí)慣,保證用戶理解。如果有需要解釋,則在字段名稱旁邊加說明小圖標(biāo)(小問號(hào))。表頭在這里也能指列行標(biāo)簽,是對(duì)所屬行或列數(shù)據(jù)的描述。


除了容納行/列標(biāo)簽之外,表頭也可以進(jìn)行排序、搜索、篩選等。


表體

表體是表格的主體內(nèi)容,具體信息數(shù)據(jù)內(nèi)容的填充區(qū)域,由一個(gè)個(gè)基礎(chǔ)的單元格組成,單元格是表格呈現(xiàn)數(shù)據(jù)信息的基本單位,可以是計(jì)數(shù)、百分比、均值、"-"等任何數(shù)據(jù)。表體包含數(shù)據(jù),分割線,背景,單元格數(shù)據(jù)可進(jìn)行點(diǎn)擊操作,如鏈接跳轉(zhuǎn)(項(xiàng)目或者商品等)、展開嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。

表尾一般是統(tǒng)計(jì)類數(shù)據(jù),例如合計(jì)、平均數(shù)等。表尾使用頻率較少,且重要性明顯不如表頭,我就把它歸到表體這類。


底欄

底欄在表格最下方,主要展示正文中的數(shù)據(jù)量或單頁(yè)數(shù)據(jù)的概覽信息,也常提供統(tǒng)計(jì)功能,供用戶了解總體進(jìn)展。底欄一般放統(tǒng)計(jì)信息、分頁(yè)控件、備注說明、操作按鈕(加載更多)等內(nèi)容。


底欄最常見的元素就是分頁(yè),分頁(yè)可以放在頭部或底部,常見的還是放到底部,分頁(yè)固定能省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩。分頁(yè)可分為整體頁(yè)碼平鋪式、全功能版、簡(jiǎn)易版等,需要根據(jù)不同的場(chǎng)景選擇最優(yōu)的設(shè)計(jì)方案,比如有的時(shí)候并不需要定點(diǎn)跳轉(zhuǎn)。
















無限滾動(dòng)可以替代分頁(yè),但對(duì)于功能優(yōu)先的應(yīng)用未必適用。下圖為查看更多按鈕,比較少見:


同時(shí),在選中操作的下,操作按鈕也可以位于底欄,在未選中時(shí)操作置灰。





采用格式一致外觀,突出有利于對(duì)象識(shí)別的關(guān)鍵信息。


2.1 視覺標(biāo)準(zhǔn)

填充與邊距

合適的填充和邊距對(duì)于視覺設(shè)計(jì)至關(guān)重要,既包括保證數(shù)據(jù)單元格之間的留白,又包括單元格內(nèi)部留白,以保證易讀性,當(dāng)創(chuàng)建表格設(shè)計(jì)規(guī)范并嚴(yán)格遵循后,就可以創(chuàng)建視覺一致的表。表格本身應(yīng)具有最小寬度,在不同畫面中寬度應(yīng)可以增長(zhǎng)到整個(gè)空間,所以每個(gè)列也需具備最小寬度。如果頁(yè)面寬度小于表格,那么表格應(yīng)水平可拖拽。


對(duì)齊方式

數(shù)據(jù)合適的位置排列能夠提升數(shù)據(jù)的瀏覽效率和準(zhǔn)確度。對(duì)齊能夠很好的形成視覺引導(dǎo)線,會(huì)讓表格更加規(guī)范易理解,給用戶視覺上的統(tǒng)一感,視線流動(dòng)更順暢,讓用戶快速的捕捉到所需內(nèi)容。


正如連續(xù)律所描述的,人們傾向于把那些經(jīng)歷最小變化或阻斷的直線或圓滑曲線知覺為一個(gè)整體,傾向于使知覺對(duì)象的直線繼續(xù)成為直線,使曲線繼續(xù)成為曲線。在界面設(shè)計(jì)中,將元素進(jìn)行對(duì)齊,既符合用戶的認(rèn)知特性,也能引導(dǎo)視覺流向,讓用戶更流暢地接收信息。


數(shù)字應(yīng)該右對(duì)齊

在表格中,諸如金額、數(shù)量等數(shù)值排列時(shí),通常采用“右對(duì)齊”方式,既方便用戶快捷讀取數(shù)據(jù),還可以使用戶進(jìn)行縱向數(shù)據(jù)對(duì)比。數(shù)字是從右向左讀的,是因?yàn)槲覀儗?duì)比數(shù)字時(shí),首先看個(gè)位,然后十位、百位。當(dāng)個(gè)位數(shù)值對(duì)齊時(shí),我們就可以快速查看前面的數(shù)值,比較多個(gè)數(shù)據(jù)的大小。因此,表格的數(shù)字應(yīng)當(dāng)右對(duì)齊。

當(dāng)我們常用的字體如果不同數(shù)字寬度不一致時(shí),會(huì)導(dǎo)致千位分隔符不在一條直線上,所以要選擇數(shù)字等寬的字體,等寬的數(shù)字在同一豎線時(shí)更容易對(duì)比。


文字信息左對(duì)齊

因?yàn)槲覀冮喿x文字信息是從左向右讀,如果不采用左對(duì)齊,會(huì)降低瀏覽文字的效率。


混合型文本左對(duì)齊

當(dāng)數(shù)字、文字、字母組成混合數(shù)據(jù)時(shí),標(biāo)題和正文左對(duì)齊,使用了一個(gè)視覺起點(diǎn)。


在實(shí)際工作中,主流框架組件,表格列數(shù)據(jù)對(duì)齊同時(shí)針對(duì)分割線,雖不是完美中的對(duì)齊,但開發(fā)成本低。


不論何種對(duì)齊方式,都需要考慮到該字段可能存在的極端情況。如:普通文本若過長(zhǎng),可在鼠標(biāo)懸停狀態(tài)時(shí)單元格展開列出全部字段信息。



色彩

一般表格具有的顏色盡可能少。顏色和可讀性是密切相關(guān)的,要合理的使用顏色,普通表盡量使用簡(jiǎn)單的背景色和點(diǎn)綴色。背景色方面,除了行/列交替顏色(可以區(qū)隔內(nèi)容,引導(dǎo)視線)、懸停高亮底色(便于準(zhǔn)確辨別光標(biāo)所在行)等處理方法,還可以對(duì)表頭表尾進(jìn)行視覺區(qū)分。但不能增加過多顏色以引起混亂。


分割線顏色盡量不要與背景色相差太大。當(dāng)字體選擇深灰色,背景為淺白色時(shí),邊框選擇淺灰色,這樣可以減少我們視覺疲勞,不會(huì)使表格看起來令人生畏。


2.2 表頭的優(yōu)化

表頭標(biāo)簽應(yīng)該簡(jiǎn)煉準(zhǔn)確,以達(dá)到節(jié)省表頭空間和減輕視覺壓力的作用,讓用戶注意力聚焦在數(shù)據(jù)本身。當(dāng)然對(duì)于產(chǎn)品而言,先能把事情說清楚,再考慮文字的簡(jiǎn)潔性。


當(dāng)數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時(shí)候,使用多級(jí)表頭來體現(xiàn)表頭與數(shù)據(jù)的層次關(guān)系,如下圖:

當(dāng)數(shù)據(jù)有看不懂或生僻的信息時(shí),用戶期望有人告訴他為什么會(huì)這樣,就需要在表頭標(biāo)簽后加上小問號(hào),鼠標(biāo)懸停彈出說明文字的提示框。


不需要表頭

如果表格數(shù)據(jù)可以自我解釋,表頭就可以不需要。電子郵件的表格是一個(gè)好例子,郵件主題,發(fā)送者,發(fā)送日期都區(qū)別度高不會(huì)混淆的。當(dāng)然有的情況表頭是不能去掉的,例如有兩個(gè)不明確的日期,這時(shí)候你就需要定義一個(gè)表頭。


2.3 行的優(yōu)化

默認(rèn)排序

所有行按邏輯排序,比如按風(fēng)險(xiǎn)由小到大,將最安全的操作放最前面;或按照信息時(shí)間排序,由新到舊,以創(chuàng)建時(shí)間進(jìn)行排序,即創(chuàng)建的排在最前面。


合適的行高

行高是非常重要的參數(shù),直接影響著閱讀體驗(yàn)。較小的行高承載更多信息,讓用戶無需滾動(dòng)鼠標(biāo)即可看到更多數(shù)據(jù),但會(huì)降低掃描效果,導(dǎo)致視覺解析錯(cuò)誤。適宜的行高使得數(shù)據(jù)更易于被閱讀,但這不代表行高越大越利于閱讀。

設(shè)置行高的原則:

A.單行數(shù)據(jù)顯示時(shí),數(shù)據(jù)顯示緊湊、有序。

B.多行數(shù)據(jù)顯示時(shí),弱化表格形式,提供豐富的視覺展現(xiàn)。


因此,對(duì)于單行顯示的表格,建議行高為字體高度的2.5倍到3倍;對(duì)于多行顯示的表格,建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度。當(dāng)然,也可以提供切換按鈕讓用戶自己控制顯示密度。


橫向斑馬線

斑馬線又稱作間行換色、隔行變色、行的交替樣式。它能讓行間界限更為明顯,同時(shí)加強(qiáng)視覺流的橫向引導(dǎo),避免在閱讀表格時(shí)出現(xiàn)迷失情況,要注意兩種顏色不能反差過大。另外,可以根據(jù)實(shí)際情況選擇是否與邊框同時(shí)使用。


行的強(qiáng)調(diào)

有時(shí)為了強(qiáng)調(diào)行內(nèi)信息的連續(xù)性,可去掉單元格的縱向分割線,僅使用橫向分割線和底色分割,使橫向信息更加連續(xù)通暢,以提升閱讀效率。


表格還可以通過顏色來指示狀態(tài),顏色指示可以幫助用戶識(shí)別哪些行可能需要特別注意的行數(shù)據(jù)。

同時(shí)可以對(duì)行內(nèi)信息進(jìn)行擴(kuò)充,進(jìn)一步弱化表格形式,豐富各類信息的視覺呈現(xiàn),同時(shí)兼顧行與行之間的關(guān)鍵信息的對(duì)比,如上文表格布局提到的圖表的使用。


2.4 列的優(yōu)化

減少列的數(shù)量

盡量減少列的數(shù)量,關(guān)注用戶需要的必要信息。當(dāng)數(shù)據(jù)列過多時(shí),要分清主次列,非重點(diǎn)、輔助性信息可以通過次級(jí)入口來解決,如固定重要列(主體名稱/操作列),次級(jí)列在表格中間區(qū)域左右拖動(dòng)。


合適的列寬

列寬嚴(yán)謹(jǐn)?shù)奶幚矸绞接腥N。第一,通過柵格,由列的數(shù)量決定列寬,主流框架組件一般是這種;第二,可以固定部分列的寬度,其余列則按百分比處理;第三,在固定寬度的基礎(chǔ)上,允許用戶自由拖動(dòng)調(diào)整列寬的大小。(當(dāng)然我覺得不要太拘泥這個(gè),合適就好)


列的強(qiáng)調(diào)

為便于用戶對(duì)數(shù)據(jù)進(jìn)行對(duì)比分析,可以在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化等數(shù)據(jù)處理結(jié)果,減少用戶數(shù)據(jù)加工的過程,直達(dá)用戶獲取信息的目標(biāo)(需要明確用戶目標(biāo)),提高用戶的閱讀速度。

一般列的強(qiáng)調(diào)是配合列排序功能使用的,如點(diǎn)擊率、訪問量的排序。有時(shí)會(huì)使用不同粗細(xì)的縱向分割線或不同底色對(duì)列信息進(jìn)行區(qū)隔,增加同類信息的對(duì)比性。


2.5 單元格數(shù)據(jù)展示

度量單位的使用

其中的關(guān)鍵區(qū)別在于數(shù)字的大小。數(shù)據(jù)的度量單位無需重復(fù),一般在表頭標(biāo)識(shí)清楚即可。

空白單元格處理

一般指空數(shù)據(jù)或零數(shù)據(jù)的情況,空白單元格容易造成用戶困惑甚至誤解,用戶會(huì)搞不清楚到底是沒有數(shù)據(jù),還是數(shù)值為零?正確做法是,對(duì)于數(shù)據(jù)為零的單元格,要填上0,且小數(shù)點(diǎn)后位數(shù)、單位,都要與上下數(shù)據(jù)格式保持一致;對(duì)于沒有數(shù)據(jù)的單元格,通常是用“-”表示。


B端后臺(tái)數(shù)據(jù)類型較多,最好能為空數(shù)據(jù)做出釋義,可以在“列標(biāo)簽”或底欄給出解釋文案。


數(shù)據(jù)過多

單元格的寬度根據(jù)列中字符的長(zhǎng)短自動(dòng)變化寬度,超過該列寬可以省略顯示,末尾以"..."顯示,鼠標(biāo)懸停時(shí)出現(xiàn)氣泡顯示完整內(nèi)容。


關(guān)鍵屬性標(biāo)識(shí)

比如用戶重點(diǎn)關(guān)注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等,可用符號(hào)進(jìn)行標(biāo)識(shí),幫助用戶快速定位到目標(biāo)信息。


2.6 分隔線

水平分隔線,能顯著減輕表格在垂直方向的視覺重量,內(nèi)容更加條理清晰,便于用戶對(duì)比查看數(shù)據(jù)。

垂直分隔線,在表格中使用適合的對(duì)齊方式后,那么就可以省略;數(shù)據(jù)量級(jí)比較大的表格,列之間過于緊密時(shí)建議保留,可以使用較淡的分隔線,將不同列數(shù)據(jù)區(qū)分開來,提升瀏覽速度。


下圖采用了同時(shí)使用水平和垂直分隔線:

如果在表格中使用適合的對(duì)齊方式,分隔線就是多余的。但由于表格數(shù)據(jù)量級(jí)不同,即使要用,分隔線也要淡,不能妨礙快速瀏覽。



2.7 分頁(yè)及翻頁(yè)

在web端,表格的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時(shí)需要提供翻頁(yè)功能,這個(gè)“數(shù)量”由表頭的高度、表格的行間距、目標(biāo)用戶群體的顯示設(shè)備的配置等因素來決定,原則是不要超過一屏,考慮到每個(gè)用戶的使用習(xí)慣,可以讓用戶自定義每頁(yè)的顯示的數(shù)量。相比于跨屏翻頁(yè)而言,向下滾屏?xí)憷?,在下?strong style="outline:0px;margin:0px;padding:0px;">控制表內(nèi)容中展開比較了無線滾動(dòng)與分頁(yè)。


分頁(yè)控件內(nèi)容 :用戶自定義每頁(yè)顯示的數(shù)量,當(dāng)前頁(yè)碼(行數(shù)),全部數(shù)據(jù)的頁(yè)數(shù)(行數(shù)),向前翻頁(yè),向后翻頁(yè),到達(dá)第一頁(yè),到達(dá)最后一頁(yè)等。

當(dāng)用戶的數(shù)據(jù)未超過一頁(yè)時(shí),可以隱藏翻頁(yè)控件。翻頁(yè)按鈕不可用時(shí),須給出置灰態(tài)或不可點(diǎn)擊。


分頁(yè)控件做為篩選數(shù)據(jù)的一種方式,通??梢越Y(jié)合排序、篩選等其它控件一起使用,來提升用戶的操作效率,如網(wǎng)易的郵箱,翻頁(yè)與日歷結(jié)合使用,對(duì)于有大量郵件數(shù)據(jù)的用戶來說,查閱郵件的效率更高。

除了無限滾動(dòng),還有第三種翻頁(yè)方式,鼠標(biāo)點(diǎn)擊“加載更多”按鈕以查看更多數(shù)據(jù)。



2.8 簡(jiǎn)化表格

干凈的表格使人愉悅。特別是在處理大量數(shù)據(jù)時(shí),巨大的數(shù)據(jù)量會(huì)增加用戶的壓力,因此要減少視覺干擾。刪除不必要的分隔符與背景,去除陰影等。信息內(nèi)容的有效傳達(dá)是表格設(shè)計(jì)的本質(zhì),讓用戶注意力聚焦在核心內(nèi)容上。所以,做減法設(shè)計(jì)就顯得可貴了。


實(shí)現(xiàn)簡(jiǎn)化的方法是適當(dāng)刪減。如果畫面視覺很糟糕,請(qǐng)刪除輔助信息、不常用的控件和分散注意力的樣式,但要小心刪除必要內(nèi)容。“簡(jiǎn)單并不意味著沒有雜亂,這是簡(jiǎn)單的結(jié)果。簡(jiǎn)單性在某種程度上基本上描述了對(duì)象和產(chǎn)品的目的和位置。想設(shè)計(jì)出一個(gè)井然有序的產(chǎn)品。這并不簡(jiǎn)單?!?- Jonathan Ive


減少分隔線

這必須是在數(shù)據(jù)允許的情況下。水平分隔線能顯著減輕長(zhǎng)表格在垂直方向的視覺重量,加快數(shù)值的對(duì)比效率。但如果在表格中使用適合的對(duì)齊方式,豎直分隔線就是多余的。它們最大的貢獻(xiàn)就是縮減元素之間的距離,明確了單元格范圍。即使要用垂直分割線,也要淡,不能妨礙快速瀏覽。


不使用斑馬線,使用不同底色區(qū)分指示不同類型的數(shù)據(jù)是有必要的,但是用來區(qū)分同一類數(shù)據(jù),斑馬線在很多時(shí)候又是沒有必要的,因?yàn)樗椒指罹€已經(jīng)明顯區(qū)隔了。

省去分隔線,對(duì)于較小的,動(dòng)態(tài)性較小的表,可以省去所有分隔線,并獲得醒目的外觀。當(dāng)然,這更多是數(shù)據(jù)量不大且易分辨的情況。


盡量以黑白為主

運(yùn)用彩色表達(dá)組織或含義可能會(huì)增加誤解,并且引發(fā)視覺障礙者的易用性問題。普通表格一般使用顏色代表狀態(tài)或進(jìn)度。


克制圖形元素的使用

其他圖形元素,如星號(hào)、三角、圓點(diǎn)、對(duì)勾、叉等,雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達(dá)信息,但要注意數(shù)量,物極必反,要注意克制這些元素的使用。





優(yōu)秀的表格交互給予用戶操控感,不讓其迷失在數(shù)據(jù)中。提供便捷的過濾篩選組件,配合鼠標(biāo)懸停、點(diǎn)擊、框選等操作,方便用戶查看更多數(shù)據(jù)信息,快速定位目標(biāo)數(shù)據(jù),或根據(jù)特定規(guī)律對(duì)數(shù)據(jù)進(jìn)行排序、突出、降維等處理。當(dāng)我們將這些組件與交互動(dòng)作結(jié)合,用一些習(xí)以為常的交互去操縱表格時(shí),用戶將更清晰、有信心、提效率。


3.1 篩選與搜索

篩選和搜索是用戶目標(biāo)數(shù)據(jù)的好方法,這是一項(xiàng)基本功能,可讓用戶從默認(rèn)的表格數(shù)據(jù)輕松獲取要查找的內(nèi)容,在數(shù)據(jù)量較大的表中特別有用,一般位于表上方的操作區(qū)域或表頭區(qū)域。


表上方

當(dāng)表格的數(shù)據(jù)量較大時(shí),可在表上方操作區(qū)域增加對(duì)象搜索或數(shù)據(jù)分類來提升用戶查找效率,且能同時(shí)使用。提供多維的篩選和排序,是增加用戶效率的有效方式。


輸入搜索框輸入用戶關(guān)心的內(nèi)容,既可以實(shí)時(shí)篩選,也可以點(diǎn)擊觸發(fā),一般須支持模糊查詢,否則用戶必須記住所有內(nèi)容,才能查出要找的目標(biāo)項(xiàng),成本過高。也有特殊情況,如保密性較高的賬號(hào)密碼列表查詢需輸入。


無論手動(dòng)查詢還是自動(dòng)查詢,如果查詢條件是組合的幾個(gè),那么一般是填好全部篩選條件再讓用戶點(diǎn)擊查詢按鈕。因?yàn)槿绻脩粢樵兊谋砀駭?shù)據(jù)具有多個(gè)屬性且相互聯(lián)系時(shí),組合條件的查詢顯然是更合理的。


如果篩選操作是單個(gè)條件獨(dú)立查詢,各個(gè)篩選條件都是相互獨(dú)立的,那么最好填好一個(gè)條件便自動(dòng)查詢。

篩選條件有時(shí)候既需要匯總數(shù)據(jù)的,又需看單一條件下的數(shù)據(jù),比如狀態(tài)包含“待付款、待發(fā)貨和待收貨等”,此時(shí)則是做成Tab單選較好,如下圖所示。


表頭

放置在表頭標(biāo)簽上的篩選,受列內(nèi)容的影響,一般做單次篩選。通過對(duì)表頭標(biāo)簽旁按鈕的點(diǎn)擊,使用戶更快捷進(jìn)入到自己的篩選條件中。通常,表單越左的列數(shù)據(jù)越重要的,也是篩選頻率與需求最高的,因此高頻的篩選場(chǎng)景基本可以得到滿足。


3.2 滾動(dòng)與固定

垂直滾動(dòng)固定表頭

垂直滾動(dòng)時(shí),固定表頭可以讓用戶明白當(dāng)前單元格數(shù)據(jù)信息的屬性和含義,體現(xiàn)界面友好性。當(dāng)數(shù)據(jù)列差異不大,用戶不能直接根據(jù)表格數(shù)據(jù)分辨類型時(shí),尤其需要固定表頭。當(dāng)表頭有操作時(shí),固定表頭更能提升使用效率。


數(shù)據(jù)列表相當(dāng)龐大而復(fù)雜的時(shí)候,使用固定表頭可以幫助用戶區(qū)分列與屬性。


水平滾動(dòng)列固定

當(dāng)呈現(xiàn)大量數(shù)據(jù)時(shí),表包含的列數(shù)超出了該表的最大寬度,水平滾動(dòng)就無法避免。第一列(前幾列)或操作列固定能更方便信息的對(duì)比與操作?;谖覀冏x取信息的方式,從左到右放置關(guān)鍵列。最左側(cè)的列會(huì)引起最多的關(guān)注,當(dāng)我們感興趣時(shí),才會(huì)查看其他列,它會(huì)影響用戶閱讀所需時(shí)間與精力。


在大型表格中,我們才可以水平滾動(dòng),最好是尋找可替代方案。表格中文本為什么這么長(zhǎng)?能減少字?jǐn)?shù)嘛?可以將文本換至第二行以減少水平寬度嗎?能否為過長(zhǎng)的文字選擇別名嗎?可否用圖形條目取代?是否可以采取工具提醒?是否可以安排在窗口或?qū)υ捒蚶铮?


一般有兩個(gè)解決辦法:文本換行,對(duì)它縮排;在單元格區(qū)域截?cái)辔谋?,在提示中顯示完整文本。方法一意味著我們要增加表格高度,且每行高度可能不同;方法二,如果不同文本內(nèi)容的頭幾個(gè)字一樣就存在問題了。但這兩種方法都比水平滾動(dòng)好。



3.3 排序

表格初始有一個(gè)默認(rèn)排序,也叫初始排序。但有時(shí),用戶希望將表格中某一行位置換到另一位置。


拖曳排序

拖放似乎很簡(jiǎn)單。就是抓住某個(gè)元素把它放到另一個(gè)地方而已。可是,事實(shí)上,拖放過程涉及到了大量細(xì)節(jié),在拖放期間,需要處理許多特定的狀態(tài)。


用戶在拖動(dòng)模塊時(shí),頁(yè)面整體布局基本保持不變。因?yàn)橐苿?dòng)的不是模塊,而是插入條。插入條指明了放置模塊時(shí)的目標(biāo)位置。常用于數(shù)據(jù)量較小,有拖曳排序需求的場(chǎng)景。又可以運(yùn)用在多個(gè)表一起的情況。


穿梭表格

就是多表格拖拽的情況。比如左側(cè)的表格內(nèi)容可拖拽至右側(cè)列表框,同時(shí)支持表內(nèi)上下拖拽更換位置順序,也可直接選中對(duì)象在兩欄中按鈕移動(dòng),完成拖拽行為。


那如何讓用戶知道可拖拽呢?

增加意向符號(hào);改變光標(biāo)樣式;增加被拖拽對(duì)象臨時(shí)性底色,突出顯示。


如何讓用戶知道怎么拖拽到哪里?

被拖入?yún)^(qū)域應(yīng)增加插入位置符號(hào),可以明確指出放置模塊的目標(biāo)位置,減少用戶困惑,也可以對(duì)放置操作發(fā)生后的頁(yè)面外觀提前給出預(yù)覽。同時(shí)設(shè)計(jì)時(shí)考慮上下左右兩個(gè)方向的拖拽運(yùn)動(dòng)分別可以觸發(fā)什么結(jié)果,超出表格范圍拖拽對(duì)象消失。


被拖動(dòng)對(duì)象應(yīng)呈現(xiàn)為輕微透明的樣式?應(yīng)該顯示為完全不透明?或者改為使用縮略圖表示?我認(rèn)為這三種方法都可以。透明效果也會(huì)讓更多表格內(nèi)容對(duì)用戶可見,有助于用戶預(yù)覽最終放置后的結(jié)果。從而方便用戶查看頁(yè)面,也會(huì)表明該模塊處于一種特殊模式中。透明可以表明相應(yīng)被拖拽對(duì)象尚未定位,或者說正處于過渡狀態(tài)。


表頭排序

排序又分為降序和升序,比如,事件相關(guān)的表格,默認(rèn)時(shí)間降序排列;風(fēng)險(xiǎn)相關(guān)的表格,默認(rèn)安全降序排序。


表頭排序可以輔助用戶快速挖掘出需要關(guān)注的信息,發(fā)現(xiàn)數(shù)據(jù)信息之間的關(guān)系,一般可按數(shù)字大小、文字拼音順序、字母順序等其它數(shù)據(jù)特征進(jìn)行排序。如果表格中不是所有數(shù)據(jù)都能排序時(shí),則需要標(biāo)識(shí)出可排序操作的列,一般采用三角箭頭做為標(biāo)識(shí),實(shí)時(shí)反饋當(dāng)前操作狀態(tài)。



3.4 控制表內(nèi)容

控制列

可伸縮列

由于存在多個(gè)數(shù)據(jù)標(biāo)題和列,我們只能根據(jù)表格的寬度來展示數(shù)據(jù)。在某些情況下,表格可允許用戶選擇他們關(guān)注的列,在其固定寬度基礎(chǔ)上,讓用戶可以自由拖動(dòng)列寬邊緣以調(diào)整列寬。


自定義選擇列

由于數(shù)據(jù)報(bào)表,往往需要滿足各種不同的角色在不同場(chǎng)景下的需求,因而在表格數(shù)據(jù)顯示上,一般采取寧多勿少的原則,即盡可能提供詳細(xì)的數(shù)據(jù),由此會(huì)數(shù)據(jù)指標(biāo)過多,難以在表內(nèi)完整展示,導(dǎo)致需要水平拉伸,降低了表格的可讀性。

針對(duì)上面這個(gè)問題上,可將所有的指標(biāo)名稱羅列在表格上方,并提供多選操作,在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)(如下圖)。這樣能讓用戶在表格上方看到所有指標(biāo)名稱,避免了原來需要水平拖拽而導(dǎo)致指標(biāo)瀏覽不全的情況。其次,用戶可以根據(jù)自己的需要,自由的選擇顯示所需指標(biāo),隱藏不必要指標(biāo),減少干擾。

B端后臺(tái)通常會(huì)對(duì)應(yīng)不同的角色及不同的需求,可讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序。同時(shí)系統(tǒng)應(yīng)記住用戶上一次自定義列的設(shè)置。


控制行

控制行高

較小的行高讓用戶無需滾動(dòng)頁(yè)面就能查看到更多的數(shù)據(jù),但可掃描性的效果易導(dǎo)致視覺迷失。這就是為什么許多成功的數(shù)據(jù)表設(shè)計(jì)包含了控制行高(顯示密度)的功能。


樹形表

行也可以結(jié)構(gòu)化分為不同的類別,前面提到了層級(jí)表/樹形表,可以嵌套子表格,展開和折疊??刹僮靼粹o一般位于各級(jí)行標(biāo)題左側(cè),具有獨(dú)特的視覺效果并具有擴(kuò)展或折疊的功能。單擊表中的類別標(biāo)題會(huì)在類別的展開或折疊狀態(tài)之間切換。展開與折疊也將極大的影響行內(nèi)容顯示。


分頁(yè)

分頁(yè)可以將表內(nèi)容信息劃分成獨(dú)立的頁(yè)面來顯示。


優(yōu)點(diǎn):

1.良好轉(zhuǎn)換:當(dāng)用戶是在結(jié)果列表中查找特定信息而不僅僅瀏覽信息流時(shí),分頁(yè)就是好的選擇。你會(huì)知道表格總量與當(dāng)前頁(yè)的準(zhǔn)確數(shù)量,能夠決定在哪里停下或者去哪里。

再次尋找特定數(shù)據(jù)時(shí),分頁(yè)方案讓我們能夠大概定向到目標(biāo)數(shù)據(jù)位置。用戶可能難以記錄目標(biāo)數(shù)據(jù)頁(yè)數(shù)字,但一般能記錄大概范圍,而頁(yè)碼鏈接能讓用戶更容易到達(dá)那里。


2.掌控感:無限滾動(dòng)就像個(gè)無止境空間——無論你滾動(dòng)多久,你會(huì)感覺永遠(yuǎn)結(jié)束不了。當(dāng)用戶知道可用行數(shù)量時(shí),他們可以自己主觀做出決定而不是被動(dòng)滾動(dòng)。同樣的,當(dāng)用戶能夠看到結(jié)果的數(shù)量時(shí),他們將能夠預(yù)估他們查看表數(shù)據(jù)大概要花費(fèi)多長(zhǎng)時(shí)間。


缺點(diǎn):

額外的動(dòng)作:在分頁(yè)方案中,用戶要到達(dá)下一頁(yè)表內(nèi)容,就必須點(diǎn)擊分頁(yè)控件上的按鈕跳轉(zhuǎn),等待表格新內(nèi)容的加載。


無限滾動(dòng)

表格無限下拉加載使用戶在數(shù)據(jù)內(nèi)容面前一直滾動(dòng)查看。向下滾動(dòng)的時(shí)候不斷加載新內(nèi)容,雖然十分方便與誘人,但不是什么場(chǎng)景都適用。


優(yōu)點(diǎn):

1.瀏覽:無線滾動(dòng)提供了一個(gè)的方法讓用戶瀏覽表數(shù)據(jù)信息,而不必等待表格新內(nèi)容的加載。當(dāng)用戶并不特意尋找特定的內(nèi)容時(shí),他們需要通過查看大量?jī)?nèi)容找到自己中意的信息。


2.體驗(yàn)更好:用戶使用滾動(dòng)能獲得比點(diǎn)擊分頁(yè)有更好的體驗(yàn)。滾動(dòng)行為要比點(diǎn)擊更快更容易,對(duì)于那些連續(xù)且冗長(zhǎng)的內(nèi)容,無限滾動(dòng)要比把分頁(yè)的有更好的易用性。尤其在表格區(qū)域狹小時(shí),使用無線滾動(dòng)更能節(jié)省空間。


缺點(diǎn):

1.受限性能:頁(yè)面加載速度是良好體驗(yàn)的一切。尤其是表格計(jì)算數(shù)據(jù)時(shí)需注意使用無限滾動(dòng),緩慢的加載速度會(huì)造成用戶的不耐煩與離開。用戶在一個(gè)表格頁(yè)面中越向下滾動(dòng),就會(huì)加載更多的內(nèi)容,當(dāng)數(shù)據(jù)量過大時(shí),結(jié)果就是頁(yè)面性能越來越低。


2.位置丟失:無線滾動(dòng)同分頁(yè)相比,沒法標(biāo)記當(dāng)前位置且不能再隨意回到之前位置。一旦離開,就會(huì)丟失當(dāng)前的瀏覽記錄,如果要回到上次的位置,必須得重新滾動(dòng)去尋找。當(dāng)用戶有這種行為的話,無線滾動(dòng)就會(huì)讓用戶產(chǎn)生困擾厭煩。尤其當(dāng)你刷新頁(yè)面時(shí)發(fā)現(xiàn)自己又回到表格頂部,不得不重新滾動(dòng)等待結(jié)果的加載以繼續(xù)查看。


3.信息缺失:滾動(dòng)條并沒有反映出實(shí)際數(shù)據(jù)量。假設(shè)快要接近底部了,當(dāng)受到引誘滾動(dòng)條再滾動(dòng)一點(diǎn)點(diǎn)時(shí),結(jié)果卻會(huì)發(fā)現(xiàn)表格數(shù)據(jù)量又刷新了。從一個(gè)可用性的角度來說,打破滾動(dòng)條的正常使用規(guī)則對(duì)用戶來講是糟糕的。


一般來說,無限滾動(dòng)適用于在數(shù)據(jù)有限且信息重復(fù)的表格,有利于內(nèi)容探索。分頁(yè)則適用用戶在尋找特定信息及瀏覽記錄,易快速訪問。



3.5 查看次要信息

表格內(nèi)容的取舍要建立在對(duì)業(yè)務(wù)的了解之上,盡量精簡(jiǎn)指標(biāo),隱藏不必要信息,減少干擾,避免無主次的鋪出所有信息。不要讓用戶一次性接收過于龐大的信息量,建議默認(rèn)只展示用戶所必須的信息,其他次要信息通過展開下拉等方式展示,為輔助信息提供深層入口。


展開行

展開行允許用戶無需打開新頁(yè)面在表格內(nèi)即可查看附加信息,防止用戶迷失。


子表格

表格中打開表格,表格組節(jié)把相關(guān)的行組合在一起,并且能夠收縮和展開,各組節(jié)層級(jí)要有樣式區(qū)別。如有需要,在每個(gè)組節(jié)里可以顯示數(shù)據(jù)概要信息。


彈窗

包括模態(tài)彈窗和非模態(tài)彈窗,模態(tài)彈窗是僅支持打開一個(gè)彈窗進(jìn)行詳細(xì)查看,非模態(tài)彈窗是可以同時(shí)打開多個(gè),并允許拖動(dòng)彈窗位置進(jìn)行信息對(duì)比。

模態(tài)允許用戶留在表格視圖中,且更多地關(guān)注附加信息和操作:


非模態(tài)彈窗對(duì)于主動(dòng)使用的用戶來說可能很有用,可以通過一系列操作,比較不同行數(shù)據(jù)的細(xì)節(jié):


視圖切換

可以通過視圖切換查看更多細(xì)節(jié),比如在“表格”和“左列表+右詳情”之間切換,或者提供“只看文本,看文本和縮略圖,只看縮略圖”幾種查看方式。相比彈窗減少了頁(yè)面層級(jí)和隔離感。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項(xiàng)目和右側(cè)的其他詳細(xì)信息,這讓用戶能夠解析大型數(shù)據(jù)集,而且在涉及到多個(gè)項(xiàng)目時(shí)不會(huì)丟失位置。


3.6 數(shù)據(jù)的編輯操作

編輯表格數(shù)據(jù)在大眾化的Web應(yīng)用程序中并不常見。不過,在企業(yè)級(jí)Web應(yīng)用程序中,表格則占據(jù)統(tǒng)治地位。此時(shí),最常見的用戶需求,就是想要像使用Excel一樣實(shí)現(xiàn)表格編輯。畢竟Excel早已成為編輯網(wǎng)格數(shù)據(jù)的一種標(biāo)準(zhǔn)。


表格數(shù)據(jù)的操作大體可分為顯性與隱性。顯性操作,指操作選項(xiàng)顯示在行內(nèi),直觀明了;隱性操作,當(dāng)鼠標(biāo)懸停時(shí)或勾選才顯示操作選項(xiàng),界面簡(jiǎn)潔明快,可減輕空間壓力,減少干擾。


單行操作和批量操作

操作項(xiàng)一般存在于行數(shù)據(jù)最后,為固定列,或表上方位置,兩者對(duì)應(yīng)多種操作場(chǎng)景。


單行數(shù)據(jù)操作

文字按鈕操作項(xiàng)一般不多于三個(gè)時(shí),圖標(biāo)按鈕不多于四個(gè)時(shí),操作項(xiàng)跟在行條目后面;當(dāng)超過時(shí),建議將操作折疊收起,點(diǎn)擊更多彈出多個(gè)操作選項(xiàng)。當(dāng)操作按鈕致灰時(shí),鼠標(biāo)選中可顯示原因。

如果行操作不那么重要,或者說行操作過于啰嗦影響用戶閱讀時(shí),可使用隱形操作,鼠標(biāo)在行區(qū)域懸停時(shí),可對(duì)當(dāng)前行背景作出區(qū)分,或放大懸停區(qū)域,同時(shí)行尾出現(xiàn)可操作按鈕,進(jìn)行行操作。如谷歌郵箱:


批處理操作

對(duì)于數(shù)據(jù)批量操作的場(chǎng)景,建議將操作放到表格上方,與復(fù)選框操作配合使用。批處理操作模式允許用戶對(duì)一行或多行對(duì)象執(zhí)行操作,并在選中復(fù)選框后激活表上方操作按鈕,如刪除、批準(zhǔn)、拒絕、復(fù)制之類的操作,這將節(jié)省用戶時(shí)間,避免重復(fù)對(duì)多行進(jìn)行相同操作。


表格上方的所有篩選或搜索按鈕可能會(huì)因操作按鈕出現(xiàn)過多而暫時(shí)隱藏,如果空間限制導(dǎo)致操作按鈕排列不下,則使用“更多操作”按鈕。


二次確認(rèn)提示:對(duì)于用戶操作結(jié)果給出提示窗反饋,用戶點(diǎn)擊「刪除」后,直接操作;出現(xiàn)提示框告知用戶操作成功,并提供用戶「撤銷」的按鈕;用戶進(jìn)行下一個(gè)操作或者15s內(nèi)不進(jìn)行任何操作,提示框消失,用戶無法再「撤銷」。


在執(zhí)行某些無法撤銷的操作時(shí),點(diǎn)擊刪除后,出現(xiàn)模態(tài)彈窗進(jìn)行二次確認(rèn),在當(dāng)前頁(yè)面完成任務(wù)。同時(shí)禁止濫用模態(tài)彈窗進(jìn)行二次確認(rèn),就既打斷用戶心流(無法將上下文帶到彈出框中),也無法避免失誤的發(fā)生。


單選、多選和全選

數(shù)據(jù)較多時(shí),單個(gè)選擇數(shù)據(jù)費(fèi)時(shí)費(fèi)力。單選框是只能單選,而復(fù)選框是能選擇單個(gè)、多個(gè)或全部選擇項(xiàng),而實(shí)際上純粹的單選很少見,所以建議一般場(chǎng)景下在表格最左側(cè)加上復(fù)選框,如前面說到的批量操作,多選后,就可以批量操作。點(diǎn)擊選框所在行的局部能讓整行被選中,每個(gè)選定的行都接受突出顯示處理,這種做法可增大點(diǎn)擊區(qū)域減少界面的混亂。


具體設(shè)計(jì)時(shí),可以按照數(shù)據(jù)類型進(jìn)行選擇,如郵件已讀、未讀等。


可進(jìn)行選擇的表格需告知用戶已選數(shù)據(jù)量,在翻頁(yè)時(shí)是否允許跨頁(yè)選擇;全選是當(dāng)前頁(yè)視圖中的所有項(xiàng)目還是選擇表格中的所有項(xiàng)目。


單元格編輯、行編輯與表格編輯

針對(duì)于需要進(jìn)行數(shù)據(jù)編輯的表格。表內(nèi)編輯能使數(shù)據(jù)更具可操作性,表內(nèi)編輯一般優(yōu)于彈窗。要啟動(dòng)編輯功能,必須通過鼠標(biāo)單擊,而非鼠標(biāo)懸停。這樣就能確保整潔的網(wǎng)格顯示效果。假如是通過鼠標(biāo)懸停來觸發(fā),鼠標(biāo)每經(jīng)過一個(gè)單元格就得顯示一個(gè)編輯框,那這種編輯模式就會(huì)干擾到不同單元格間的切換,會(huì)有多么煩人。


單元格編輯:針對(duì)單個(gè),不連續(xù)的可編輯的單元格,為了讓功能更容易被發(fā)現(xiàn),可以在單元格數(shù)據(jù)旁放置編輯圖標(biāo),這樣可編輯和不可編輯的單元格視覺對(duì)比就十分明顯。單擊該圖標(biāo)即可觸發(fā)編輯,單元格內(nèi)出現(xiàn)輸入框,保存數(shù)據(jù)并退出。有了這個(gè)隨時(shí)可見的鏈接后,編輯功能就更容易被注意到了。


單元格編輯時(shí),也可以設(shè)置整個(gè)單元格為熱區(qū),以便用戶觸發(fā)。


覆蓋層編輯:點(diǎn)擊編輯圖標(biāo)觸發(fā);通過在頁(yè)面上方添加一層來放置編輯數(shù)據(jù)。雖然編輯期間也不會(huì)離開當(dāng)前頁(yè)面,但卻不是在頁(yè)面中直接實(shí)現(xiàn)編輯。而是把一個(gè)輕量級(jí)的彈出式覆蓋層(如對(duì)話框)作為編輯窗口。

選擇覆蓋層編輯而非行內(nèi)編輯的原因也很多。有時(shí)候,不可能把某個(gè)復(fù)雜的編輯任務(wù)安排在同一個(gè)頁(yè)面中完成,如果嵌入頁(yè)面的編輯區(qū)域太大,會(huì)因?yàn)榘褍?nèi)容過多地推向下方而損害頁(yè)面的整體感。


而其他情況下,也可以選擇中斷當(dāng)前頁(yè)面流,尤其是被編輯的信息本身非常重要時(shí)。覆蓋層能夠?yàn)橛脩籼峁┟鞔_的編輯空間。提示如果有必要占用專門的屏幕空間放置編輯窗格,而且頁(yè)面的上下文對(duì)編輯任務(wù)也不重要,就可以考慮使用覆蓋層編輯。


行編輯:針對(duì)同一行標(biāo)簽下的數(shù)據(jù)編輯。新增數(shù)據(jù)行后,視圖定位到新增的行并高亮顯示,讓用戶快速聚焦。幾秒后高亮消失,以免過度干擾用戶。


不過,表內(nèi)編輯圖標(biāo)會(huì)涉及平衡頁(yè)面中視覺干擾的問題,如果功能及其提示在頁(yè)面中的數(shù)量過多,很可能造成功能的利用率下降。如果一行有多個(gè)編輯選項(xiàng),則可以適當(dāng)使用彈窗編輯數(shù)據(jù);如果表格有大部分單元格數(shù)據(jù)需要編輯,則可以全局編輯。 


全局表格編輯:點(diǎn)擊表格編輯按鈕,當(dāng)前表格所有可編輯的數(shù)據(jù)單元格內(nèi)顯示文本修改框或類似XLSX的角標(biāo),進(jìn)入一種特殊得編輯狀態(tài),不會(huì)給人直覺造成混亂。這一功能基本用于大面積需要填寫和修改時(shí),如大型填寫報(bào)表。

大型數(shù)據(jù)表由于支持編輯數(shù)據(jù)處多,這種方法的另一個(gè)問題是容易填錯(cuò)單元格,想象單元格的密集,用戶意外編輯錯(cuò)誤也時(shí)有發(fā)生,這樣的話需要編輯/暫存/提交三個(gè)操作。如果發(fā)現(xiàn)編輯的內(nèi)容報(bào)錯(cuò)可被更正,應(yīng)直接引導(dǎo)用戶更正;如果報(bào)錯(cuò)內(nèi)容不可被更正,則告知用戶原因。


大型數(shù)據(jù)表如需減少與表格無關(guān)的視覺干擾,提供表格的沉浸式閱讀體驗(yàn),可提供全屏查看的入口,但應(yīng)注意可以讓用戶便捷的退出。全屏模式可以直接屏蔽掉頁(yè)面其它內(nèi)容,只留下表格區(qū)域,用戶通過ESC鍵或按鈕隨時(shí)退出全屏模式,學(xué)習(xí)成本較低。


當(dāng)表格數(shù)據(jù)為空時(shí),在表格的空白內(nèi)容處加入可創(chuàng)建的快捷入口,引導(dǎo)用戶新建表格數(shù)據(jù),或者導(dǎo)入數(shù)據(jù)。如下圖郵箱已發(fā)送郵箱為空時(shí):

當(dāng)沒有創(chuàng)建訴求的,直接告之暫無數(shù)據(jù)。如數(shù)據(jù)是系統(tǒng)產(chǎn)生的,不是由用戶創(chuàng)建的,直接告之暫無數(shù)據(jù),話術(shù)的表述則需與后臺(tái)文案的整體風(fēng)格保持一致。




后記

個(gè)人關(guān)于web表格設(shè)計(jì)的看法基本寫完了,在總結(jié)歸納中也發(fā)現(xiàn)了自己平常設(shè)計(jì)表格中的其他問題。大多表格設(shè)計(jì)在不同場(chǎng)景中需要隨機(jī)應(yīng)變,沒有絕對(duì)的規(guī)范,只有相對(duì)的規(guī)范。我們要理解規(guī)范背后的原則,推導(dǎo)出適應(yīng)其他場(chǎng)景的規(guī)范。


文章來源:站酷    作者:小龍哈

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

Apple 的設(shè)計(jì)哲學(xué):網(wǎng)頁(yè)篇

周周


Apple 致力于讓每件產(chǎn)品都賞心悅目,與其說官網(wǎng)是產(chǎn)品展示平臺(tái),倒不如說它是蘋果產(chǎn)品分支的延續(xù)。從 Apple.com 找設(shè)計(jì)靈感是每一位設(shè)計(jì)師都做過的事,那它到底有何魅力?文章對(duì)Apple的網(wǎng)頁(yè)設(shè)計(jì)展開了梳理分析,與大家分享。


一、沉浸與交互式體驗(yàn)

每當(dāng)有新產(chǎn)品發(fā)布時(shí),我們都會(huì)被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段時(shí)間發(fā)布的 iPad Pro 也一樣。

這背后是 Apple 基于 webGL 技術(shù),創(chuàng)造的一種沉浸與交互式產(chǎn)品體驗(yàn)。

1. 連續(xù)性

我們?cè)诋a(chǎn)品介紹頁(yè)可以看到,蘋果使用了大量的滾動(dòng) scroll 來體現(xiàn)連續(xù)性。

一方面,滾動(dòng)作為大多數(shù) Web 用戶最自然的操作,學(xué)習(xí)成本極低。

另一方面,在冗長(zhǎng)的頁(yè)面下,滾動(dòng)能讓產(chǎn)品特性保持更自然的轉(zhuǎn)場(chǎng)銜接。

iPad Pro 的連續(xù)性

2. 趣味性

另外,采用了大量的動(dòng)畫式轉(zhuǎn)換(animated transition),即操作時(shí)展示的動(dòng)態(tài)效果,以此來增加趣味性。

伴隨著豐富的、若隱顯現(xiàn)的章節(jié)文案,就像電影的旁白一樣,娓娓道來。

通過滾動(dòng)的方式增加交互性,這是明智之舉。試想一下,如果只放置已渲染的演示視頻,那么用戶的操作會(huì)受到限制,只能在視頻中前進(jìn)或后退,毫無樂趣可言。

AirPods的趣味性

二、言之有序

1. 秩序感

說到言之有序,我們看 iPad 的頁(yè)面介紹。四款產(chǎn)品,分別是:iPad Pro、iPad Air、iPad、iPad mini。

拍攝角度的秩序感,可謂妙不可言。

iPad的秩序感

  • iPad Pro 的拍攝角度接近于正側(cè)面。
  • iPad Air 是四分之三側(cè)面。
  • iPad 是正面。
  • iPad mini 是俯視。

如此一來,即顯得有序,也不會(huì)導(dǎo)致視覺疲勞。

2. 設(shè)計(jì)語(yǔ)言

其次,官網(wǎng)與 iOS 保持協(xié)同的設(shè)計(jì)語(yǔ)言,給用戶呈現(xiàn)了一致的感官體驗(yàn)。

從 iOS 11 開始,蘋果就采用了 Large Title 大標(biāo)題的字體風(fēng)格。字重也從 Regular + Light 的組合,轉(zhuǎn)向的 Medium + Bold ,以此增強(qiáng)信息傳播中的識(shí)別力。

HomePod

另外,高斯模糊的標(biāo)題欄背景、產(chǎn)品的投影等設(shè)計(jì)語(yǔ)言也保持系統(tǒng)一貫的風(fēng)格。我們可以很清晰的看到 Web 設(shè)計(jì)的同步轉(zhuǎn)變。

三、層次

1. 視差

第三是視差帶來的層次感。

蘋果奉行包豪斯的無裝飾和極簡(jiǎn)的理念。當(dāng)然,它不是那種附庸的美觀及外表的光鮮,而是將復(fù)雜難懂的技術(shù)以簡(jiǎn)潔的形式傳達(dá)給用戶。

Mac Pro 視差滾動(dòng)

在信息層次方面,Apple 的編排設(shè)計(jì)由淺入深,猶如抽絲剝繭。很好的利用了視差滾動(dòng),傳達(dá)圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。

2. 視覺張力

不僅如此,樣式上富有視覺張力。或擴(kuò)張、或收縮、或吸引、或排斥之感覺,呈現(xiàn)刺激與震撼。舉兩個(gè)例子:

A13芯片的擴(kuò)張力

擴(kuò)張力:整個(gè)畫面以 A13芯片 為視覺中心點(diǎn),元素和布局圍繞這個(gè)視覺中心點(diǎn)向外擴(kuò)張。采用發(fā)散式的視覺引導(dǎo),視覺張力就出現(xiàn)了,讓人感覺巍峨壯觀。

Pro級(jí)攝像頭的排斥力

排斥力:通過元素的大小對(duì)比,可以形成一定強(qiáng)度的視覺排斥力。Pro級(jí)攝像頭 輔以大特寫,傳達(dá)空間意識(shí)。視覺上被其構(gòu)圖、美感觸動(dòng)。

四、高級(jí)感

再聊聊蘋果的高級(jí)感是怎么來的?

1. 視覺降噪

我們都知道,高飽和度的色彩,會(huì)影響人的情緒波動(dòng)。相反,低飽和度的配色,對(duì)人眼的刺激較弱,會(huì)有一種冷靜且克制的高級(jí)感。

iMac Pro 高級(jí)感

回過頭來看蘋果官網(wǎng)的大部分頁(yè)面,除了產(chǎn)品界面色彩 和 按鈕藍(lán) 之外,其他的文字、背景、控件一律采用黑白灰色系,以此營(yíng)造高級(jí)感。

甚至是 iPhone 11 Pro 新出的暗夜綠,也是高級(jí)灰中加了一點(diǎn)點(diǎn)綠而已。

換言之,減少使用顏色的數(shù)量,降低色彩的飽和度都能削減色彩對(duì)人的情緒,起到提升產(chǎn)品高級(jí)感的效果。

iPad 留白

除此之外,恰當(dāng)?shù)牧舭卓梢愿油怀霎a(chǎn)品內(nèi)容,讓重要的信息更準(zhǔn)確的傳達(dá)。并且能營(yíng)造出廣闊的空間感,讓畫面得到延伸,呈現(xiàn)一種意境美。

所以我們做設(shè)計(jì)時(shí)應(yīng)當(dāng)多做減法,避免無意義的視覺元素堆砌,反而能讓你的設(shè)計(jì)更有高級(jí)的氣質(zhì)。

這又印證了現(xiàn)代主義建筑大師密斯·凡德羅的那句話:Less Is More。

2. 配圖

當(dāng)然,只有留白是不夠的。既然是做宣傳,那么一份高分辨率、精致的配圖就顯得尤為重要。

蘋果官網(wǎng)大部分的產(chǎn)品都是采用實(shí)拍+后期修圖,而非渲染圖。目的就是為了反映真實(shí)產(chǎn)品的質(zhì)感、以及材質(zhì)光影效果,這一點(diǎn)能看到蘋果對(duì)于品質(zhì)的追求。

Designed by Apple in California

不僅如此,蘋果產(chǎn)品圣經(jīng)《Designed by Apple in California》,以及壁紙同樣是由攝影師拍攝完成。有興趣的同學(xué)可以看下面這個(gè)幕后制作視頻,相當(dāng)硬核。

3. 蘋果式文案

做過英文 Web 的設(shè)計(jì)師都知道,英文往往比中文更好設(shè)計(jì),相同的布局英文出來的效果也更好看。

這不是崇洋媚外,心理學(xué)有個(gè)詞叫做「母語(yǔ)羞澀」。簡(jiǎn)單來說就是,中文對(duì)于我們來說,太常見了會(huì)讓人產(chǎn)生一種廉價(jià)感(實(shí)際上是羞澀感)的心理感受。

老外也一樣,你可以看到美國(guó)企業(yè):蘋果、麥當(dāng)勞、星巴克都是使用圖形 Logo,而日本企業(yè)不用母語(yǔ),而是用英文,比如 SONY、TOYOTA、Canon。

你的下一臺(tái)電腦,何必是電腦。

回到蘋果官網(wǎng),我們看到一部分文案是英文產(chǎn)品名稱,這個(gè)不會(huì)感覺羞澀。

那中文部分怎么辦呢?比較有意思的是,Apple 的本土化團(tuán)隊(duì)用了完全不對(duì)仗但押韻、奇怪的排比、雙關(guān)、重復(fù)等修辭手法。雖然語(yǔ)感很差,但基本上能明白字面意思。

其實(shí)這樣做的目的就是為了創(chuàng)造一種陌生感、一種獨(dú)特的語(yǔ)言風(fēng)格,來凸品牌氣質(zhì)。舉幾個(gè)例子:

  • 重復(fù):比如說 iPad Pro「你的下一臺(tái)電腦,何必是電腦?!?/span>
  • 雙關(guān):比如說 AppleWatch 的「它會(huì)時(shí)時(shí)關(guān)心你的心?!?/span>
  • 排比:比如說 iMac的「從極速,到神速,任你提速?!?/span>
  • 押韻:比如說 配件 的「可重復(fù)充電,又可圈可點(diǎn)。」
  • 對(duì)比:比如說 iPad mini 的「身量小,能量大?!?/span>

4. 儀式感

最后一點(diǎn)。生活要有儀式感,蘋果官網(wǎng)也有儀式感。

國(guó)際婦女節(jié)專題

在一些特殊的日子里,例如三八節(jié)當(dāng)天,友商選擇打廣告促銷。而蘋果推出了國(guó)際婦女節(jié)專題,致敬女性的偉大,這一做法頗具人文情懷。

不過話又說回來,感動(dòng)歸感動(dòng),還是參與友商的打折活動(dòng)香。

#相關(guān)閱讀#

Apple 的設(shè)計(jì)哲學(xué):交互篇

Apple 的設(shè)計(jì)哲學(xué):UI 篇

Apple 的設(shè)計(jì)哲學(xué):聲音篇


文章來源:人人都是產(chǎn)品經(jīng)理           作者:阿洋


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

資深UI設(shè)計(jì)者

近年來暗黑模式的設(shè)計(jì)趨勢(shì)開始一點(diǎn)點(diǎn)明顯,Ant Design 在這次 4.0 的升級(jí)中也對(duì)這類暗黑場(chǎng)景化的設(shè)計(jì)開始進(jìn)行初步的探索,接下來就讓我們一起來看下 Ant Design 這一針對(duì)企業(yè)級(jí)的設(shè)計(jì)體系是如何設(shè)計(jì)暗黑模式的。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

什么是暗黑模式

暗黑模式是指把所有 UI 換成黑色或者深色的一個(gè)模式。

需要說明的是,暗黑模式不只夜間模式:

暗黑模式更多的目的是希望使用者更加專注自己的操作任務(wù),所以對(duì)于信息內(nèi)容的表達(dá)會(huì)更注重視覺性;

而夜間模式則更多是出于在夜間或暗光環(huán)境使用下的健康角度考慮,避免在黑暗環(huán)境中長(zhǎng)時(shí)間注視高亮光源帶來的視覺刺激,所以在保證可讀性的前提下,會(huì)采用更弱的對(duì)比來減少屏幕光對(duì)眼睛的刺激。

同時(shí),從使用場(chǎng)景上來說,暗黑模式既可以在黑暗環(huán)境,也可以在亮光環(huán)境下使用,可以理解為是對(duì)淺色主題的一種場(chǎng)景化補(bǔ)充,而夜間模式只建議在黑暗環(huán)境下使用,在亮光環(huán)境使用時(shí)很可能并不保證信息可讀性。

為什么 Ant Design 要做暗黑模式

1. 更加專注內(nèi)容

試想一下,我們?cè)陔娪霸嚎措娪皶r(shí),為什么要全場(chǎng)關(guān)燈?甚至有些 APP,在影片的下方也會(huì)又一個(gè)模擬關(guān)燈效果的操作,來讓整個(gè)手機(jī)屏幕變黑,只剩下視屏畫面的部分,這都幫助我們可以更專注、更沉浸在當(dāng)前的內(nèi)容下。

色彩具有層級(jí)關(guān)系,深色會(huì)在視覺感官上自動(dòng)后退,淺色部分則會(huì)向前延展,這樣對(duì)比強(qiáng)烈的層次關(guān)系可以讓用戶更注重被凸顯出來的內(nèi)容和交互操作;尤其在信息負(fù)責(zé)界面內(nèi)層級(jí)關(guān)系的合理拉開對(duì)操作效率都有明顯的促進(jìn)作用。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

2. 在暗光環(huán)境下更加適用

如今社會(huì)我們身處黑夜使用手機(jī)、電腦、iPad等設(shè)備的次數(shù)越來越多,環(huán)境光與屏幕亮度的明暗差距在夜間會(huì)被放大 ,亮度對(duì)比帶來視覺刺激也更加明顯,使用暗色模式可以縮小屏幕顯示內(nèi)容與環(huán)境光強(qiáng)度的差距,同時(shí)也可以為設(shè)備的續(xù)航帶來積極影響,可以保證使用者在暗光環(huán)境下使用 OLED 設(shè)備的舒適度。

3. 大眾喜愛

黑色一直以來就可以給人以高級(jí)、神秘的語(yǔ)義象征,相比于淺色模式,暗色模式藏著更多可能性。

設(shè)計(jì)原則

在這次暗黑模式的設(shè)計(jì)中主要遵循以下兩大設(shè)計(jì)原則

1. 內(nèi)容的舒適性

不論是顏色還是文字或是組件本身,在暗色環(huán)境下的使用感受應(yīng)當(dāng)是舒適的,而不是十分費(fèi)力的,如果一個(gè)顏色在淺色下使用正常,在暗色下卻亮的刺眼或根本看不見,那必然不夠舒適也不可讀;所以在顏色的處理上不建議直接使用,這樣會(huì)讓界面變得到處都是「亮點(diǎn)」,讓眼睛不適的同時(shí),也會(huì)帶來許多誤操作。

2. 信息的一致性

暗黑模式下的信息內(nèi)容需要和淺色模式保持一致性,不應(yīng)該打破原有的層級(jí)關(guān)系。舉個(gè)例子,在淺色模式下越深的顏色,與界面背景色對(duì)比度越大,也就越容易被人注意,視覺層級(jí)越高,比如 tooltip;在暗黑模式下我們同樣需要遵循這一規(guī)律,所以對(duì)應(yīng)所使用的顏色也就越淺,反之則會(huì)越深。

如何設(shè)計(jì)

1. 界面層級(jí)

在大量的企業(yè)級(jí)產(chǎn)品界面中,我們通常用只用一個(gè)白色背景結(jié)合分割線就可以搞定所有界面的板塊層級(jí),因?yàn)樵跍\色模式下有投影可以借助,然而暗黑模式中投影將不足以起到如此功效,我們需要通過顏色來區(qū)分層級(jí)關(guān)系。

在經(jīng)過對(duì)螞蟻企業(yè)級(jí)頁(yè)面的典型布局結(jié)構(gòu)評(píng)估后,我們?cè)谥行陨性黾恿巳齻€(gè)梯度,將中性色擴(kuò)展至 13 個(gè)

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

并定義出通用情況下頁(yè)面中的框架層次,主要分為三大塊:

  • 應(yīng)用框架:也就是我們平時(shí)定義的導(dǎo)航欄,也是在大結(jié)構(gòu)中最上層的一部分
  • 內(nèi)容組件:指頁(yè)面中的具體內(nèi)容,通常情況下以區(qū)塊的形式存在,作為第二層級(jí)
  • 頁(yè)面容器:顧名思義,指頁(yè)面級(jí)別的容器盒子,可容納頁(yè)面中的所有內(nèi)容,可以理解為是一個(gè)背景板,也就是最末層

在目前的暗黑體系下,我們分別為這三大塊從淺到深定義了#1F1F1F、#141414、#000000 三個(gè)顏色,在實(shí)際應(yīng)用中,你也可以根據(jù)自身業(yè)務(wù)的需求,從中性色板中直接選用或是依據(jù)透明度的思路自定義出合適的中性色彩。當(dāng)定義出較為明確的框架層次和顏色后,也對(duì)后續(xù)系統(tǒng)中組件的顏色配置有著重要的指導(dǎo)意義。我們需要考慮組件出現(xiàn)在不同顏色背景下的可能性及其表現(xiàn),盡量保持一致性。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

2. 色彩

眾所周知,暗黑模式與淺色模式最大的不同就在色彩的處理上,在暗黑模式中,我們并不想打破淺色模式下基礎(chǔ)色板的配置規(guī)律及色值,當(dāng)一個(gè)應(yīng)用或站點(diǎn)深淺模式并存時(shí),希望在色彩上有一定延續(xù)和關(guān)聯(lián),而不是毫不相關(guān)的兩套色板,這樣一是避免開發(fā)及后續(xù)的維護(hù)成本,二是實(shí)際切換和使用時(shí),可以保證一致性,這意味著需要借助一定規(guī)則。

這里分享一下我們的處理思路:

基于 Ant Design 自然的設(shè)計(jì)價(jià)值觀,我們先從自然界中尋找靈感,如果說淺色模式如同初升時(shí)的朝陽(yáng),那暗黑模式就是落日下的晚霞,各有各的韻味,同一片天,唯一不同的是,受光線亮度的影響,晚霞整體會(huì)暗一些。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

所以我們大體的設(shè)計(jì)思路也是基于淺色的基礎(chǔ)色板,通過結(jié)合透明度的轉(zhuǎn)換,去得到一套暗黑模式下的色彩。這樣的好處是,深淺模式下的色彩根基是同一個(gè),在這樣的基礎(chǔ)上經(jīng)過透明度的變換得到的結(jié)果也會(huì)相對(duì)和諧,同時(shí)也符合我們一致性的原則。

這里我們借助下面這兩個(gè)概念對(duì)透明度進(jìn)行轉(zhuǎn)換:

對(duì)比度極性

對(duì)比度極性分為正極性和負(fù)極性。

  • 對(duì)比度正極性:指在電子文本中文本為深色,背景色為淺色
  • 對(duì)比度負(fù)極性:指在電子文本中文本為淺色,背景色為深色

這里可以給大家分享對(duì)比度查閱的一個(gè)工具:WebAIM,只要輸入色值就可以看到具體的值,十分方便。

正負(fù)極性差值

顧名思義便是正負(fù)兩者的差值,這里取的是絕對(duì)值。

根據(jù)一致性原則,我們嘗試通過對(duì)比一套顏色的正負(fù)極性變化趨勢(shì)來找到轉(zhuǎn)換規(guī)律。

首先可以看下,如果一個(gè)顏色在不做任何修改的前提下直接使用,它的正負(fù)極性趨勢(shì)以及差值趨勢(shì)的走勢(shì)和關(guān)系是怎么樣的,我們嘗試描繪出這樣的曲線,他們的變化規(guī)律也將作為我們規(guī)則轉(zhuǎn)換的參考標(biāo)準(zhǔn)。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

經(jīng)過對(duì)比,可以發(fā)現(xiàn)一些變化規(guī)律:

首先來說下「差值趨勢(shì)」,橫向?qū)Ρ瓤梢园l(fā)現(xiàn),不同顏色的正負(fù)極性走勢(shì)是很不一樣的,可以看到在黃綠色段差值曲線達(dá)到一個(gè)變化峰值,這是由于黃綠色本身由于明度、飽和度值相比其他顏色偏高,所以總是有種刺眼的感覺,生活中也會(huì)用它來作為警示、提醒的作用,所以在深淺背景下的對(duì)比度有一個(gè)比較大的差異,可以說這個(gè)變化是正常的。

這點(diǎn)也可以從「正負(fù)對(duì)比度極性趨勢(shì)」兩者間的相對(duì)關(guān)系反應(yīng)出來,從紅色到洋紅,綠線一開始從逐漸在藍(lán)線的上方一點(diǎn),開始逐漸上移,最后在峰值處開始慢慢下移,在「極客藍(lán)」這個(gè)色相中接近重疊,在洋紅處又慢慢下移,說明淺色下越深的顏色,在深色中越亮,反之則越暗。

縱向比對(duì)單個(gè)色板,可以發(fā)現(xiàn),其斜率變化主要受顏色的明度、飽和度影響,可以反應(yīng)一個(gè)顏色的不同梯度在黑白背景下的變化規(guī)律。

有了這個(gè)大的變化規(guī)律,我們便可做到心中有數(shù)。首先以 Ant Design 的品牌色「破曉藍(lán)」為例,經(jīng)過在多個(gè)業(yè)務(wù)、場(chǎng)景中不斷嘗試與調(diào)整,我們得到一個(gè)透明度轉(zhuǎn)換規(guī)則:

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

并將這個(gè)規(guī)則應(yīng)用在其他 11 套色板中,驗(yàn)證其可用性。這個(gè)過程確實(shí)沒有什么快捷通道,唯一的辦法就是不斷嘗試。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

最后,我們將經(jīng)過規(guī)則轉(zhuǎn)換的實(shí)色與常規(guī)顏色的變化趨勢(shì)做對(duì)比:

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

可以看到在大趨勢(shì)走向上左右兩側(cè)圖基本一致,這代表兩個(gè)色板在變化規(guī)律接近一致,基本可以證明規(guī)則的合理性。區(qū)別在于,對(duì)比度負(fù)極性和差值相對(duì)于右側(cè)未經(jīng)處理的值明顯有所下降。這是由于透明度的處理讓暗色下的顏色在明度、飽和度上有所下降導(dǎo)致。

再仔細(xì)觀察可以發(fā)現(xiàn),在左側(cè)的常規(guī)顏色中,從破曉藍(lán)-洋紅這段偏冷色系幾個(gè)顏色中,差值趨勢(shì)變化最平緩的是「極客藍(lán)」這顏色,這說明該顏色在深淺背景下的表現(xiàn)較為穩(wěn)定,起伏不大,當(dāng)基于一個(gè)統(tǒng)一的透明度規(guī)則前提下,會(huì)讓它在暗色下的對(duì)比度減弱,所以反而會(huì)導(dǎo)致差值趨勢(shì)變大,所以我們會(huì)發(fā)現(xiàn)差值趨勢(shì)變化較小的顏色轉(zhuǎn)移到了「破曉藍(lán)」、「洋紅」中,也是一個(gè)正?,F(xiàn)象。

最后可以看到顏色在調(diào)整過后實(shí)際應(yīng)用的效果

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

在官網(wǎng)中點(diǎn)擊「切換」即可預(yù)覽:

如果上述 12 個(gè)色板不滿足你的業(yè)務(wù)需求,你也可以在官網(wǎng)上自己選擇顏色,我們會(huì)根據(jù)規(guī)則幫你生成一個(gè)暗色色板。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

另外,如果在實(shí)際應(yīng)用過程中,你選了色相在 225~325 間的深冷色系作為主色或強(qiáng)調(diào)色使用,建議適當(dāng)提高透明度的值,避免在暗色界面上引起閱讀障礙。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

3. 文字

暗黑模式中,文字的使用與淺色模式基本一致,依舊從 85%-65%-45%,唯一不同的地方在 disable 的狀態(tài),其透明度值提升為 30%,避免顏色過淡真的「不可見」。另外,對(duì)于 #FFFFFF 的純白色文字,盡量避免大面積使用,尤其對(duì)于表格、列表這類偏閱讀瀏覽的場(chǎng)景,如有需要,做小范圍強(qiáng)調(diào)即可。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

4. 陰影

暗黑模式中的陰影規(guī)則與淺色模式基本保持一致,但由于本身的界面背景較深,在陰影色值上也有所加深,幫助層次更好的體現(xiàn),整體將色值擴(kuò)大到原先的 4 倍,但在陰影的位移、擴(kuò)展上均保持不變。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

5. 分割線

分割線在暗黑模式中建議根據(jù)界面中常用的背景色,通過透明度換算成實(shí)色使用,Ant Design 中分割線主要有 #434343 和 #303030 兩種顏色,分別對(duì)應(yīng)淺色模式下的 #D9D9D 和 #F0F0F0,這樣做的目的主要是為了避免帶來額外的交錯(cuò)疊加,尤其對(duì)于表格類以及很多帶有 border 屬性的組件,實(shí)色會(huì)更為穩(wěn)妥便于記憶。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

適應(yīng)性

適應(yīng)性方面,Ant Design 的暗黑模式可以與海兔及可視化資產(chǎn)進(jìn)行無縫銜接,使用時(shí)可以任意組合拖拽,你可以下載 Kitchen 插件,獲取海量資產(chǎn)。

大廠如何做好暗黑模式設(shè)計(jì)?來看 Ant Design 的規(guī)范文檔

結(jié)語(yǔ)

暗黑模式最近越來越受到人們的關(guān)注,與某一特定產(chǎn)品的暗黑設(shè)計(jì)不同,Ant Design 的暗黑模式更多以設(shè)計(jì)體系的角度考慮企業(yè)級(jí)這個(gè)大場(chǎng)景下的內(nèi)容,在易用性、擴(kuò)展度、復(fù)用度等方面還有許多需要完善和繼續(xù)研究探索的地方,我們會(huì)在未來的迭代中逐步進(jìn)行,先完成再完善。希望上述內(nèi)容能對(duì)大家在暗黑模式的設(shè)計(jì)上有所幫助。

文章來源:優(yōu)設(shè)    作者:AlibabaDesign

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

常見的網(wǎng)頁(yè)設(shè)計(jì)、文章設(shè)計(jì)錯(cuò)誤

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


常見的網(wǎng)頁(yè)設(shè)計(jì)、文章設(shè)計(jì)錯(cuò)誤
本文來自阮一峰分享


 1.內(nèi)容未按邏輯分成塊

用戶可以根據(jù)邏輯塊輕易的獲取信息。

具體做法為:將padding設(shè)置為120px-180px,同時(shí)不同的邏輯塊使用不同的背景。


2.每個(gè)邏輯塊的空白大小不一致 

對(duì)于每個(gè)邏輯塊,需要設(shè)置同等大小且適宜的空白。否則網(wǎng)頁(yè)看起來會(huì)很混亂,作者不會(huì)對(duì)每個(gè)邏輯塊同等對(duì)待。



 

3.Padding不能設(shè)置過小,否則用戶無法將內(nèi)容分為邏輯塊

 為了這點(diǎn),插入大的空白(至少120px),以使內(nèi)容按邏輯塊分開。





4.背景圖片和文字 應(yīng)該對(duì)比鮮明

 


5.在一頁(yè)中,樣式過多

太多不同 的排版和樣式將會(huì)使得頁(yè)面不太專業(yè)以及難以閱讀。

解決的方法是,以字體為例,設(shè)置一種字體,字體為正?;虼煮w(保證在兩種不同樣式之內(nèi))



 

6.背景顏色塊過于狹窄




7. 在一個(gè)狹窄的列中,放入了過多的文字

這導(dǎo)致用戶閱讀需跳很多行,整體看起來也不行。推薦的做法為,減少列的數(shù)量,精煉文字。



藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

設(shè)計(jì)師的名片就應(yīng)該這樣設(shè)計(jì)

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

名片,是品牌傳遞的重要工具,但往往被人忽視。雖然紙質(zhì)的名片幾乎已被微信媒介所取代,但是作為設(shè)計(jì)師更不應(yīng)該放棄這種貌似不重要的設(shè)計(jì)。

相反,越簡(jiǎn)單的設(shè)計(jì),更考驗(yàn)設(shè)計(jì)能力。一張名片,可以看出一個(gè)人是否真的懂得設(shè)計(jì),因?yàn)槔锩姘嗷竟α?。如果連一張簡(jiǎn)單的名片都做不好,更不要說其他的設(shè)計(jì)了。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

2019草莓音樂節(jié)的主視覺設(shè)計(jì)太贊了!

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

2019草莓音樂節(jié)的主題是“循環(huán)世界Circular World”。

摩登天空聯(lián)合世界自然基金會(huì)(WWF)發(fā)起今年的音樂節(jié)主題“循環(huán)世界”,以環(huán)保為核心理念,攜手海內(nèi)外環(huán)保機(jī)構(gòu)對(duì)草莓音樂節(jié)進(jìn)行多方位環(huán)保實(shí)踐,并聚合知乎、摩拜等多平臺(tái)力量影響年輕人,讓環(huán)保成為青年生活方式的一部分。

今年的主視覺海元素是被三個(gè)箭頭環(huán)繞的草莓星球,表達(dá)了“循環(huán)世界”的主題。風(fēng)格延續(xù)了去年的樣式,色彩略有調(diào)整,并加入了太空元素。

今年的主視覺當(dāng)然仍由摩登天空的當(dāng)家工作室——MVM design label_工作室操刀。

這張是今年的主視覺海報(bào)。今年,MVM特地為各城市舉辦的2019草莓音樂節(jié)單獨(dú)設(shè)計(jì)了專門的海報(bào),一樣的版式,不一樣的內(nèi)容,既統(tǒng)一又包含新意。

2019草莓音樂節(jié)武漢站

2019草莓音樂節(jié)成都站

2019草莓音樂節(jié)西安站

2019草莓音樂節(jié)上海站

2019草莓音樂節(jié)長(zhǎng)沙站

在今年3月30日的“地球一小時(shí)”公益活動(dòng)中,草莓音樂節(jié)把自己的參與定義為“草莓星球一小時(shí)”。

而武漢OYO酒店與摩登天空聯(lián)合主辦的活動(dòng)中,一張以“音樂滿房”為主題的插畫也分外有趣——原來大家為了迎接音樂節(jié),都關(guān)上門在房間里引吭高歌呀…

音樂節(jié)配套周邊產(chǎn)品的銷售,推廣視覺設(shè)計(jì)也很有意思。

即使不是音樂迷,設(shè)計(jì)師對(duì)這樣的設(shè)計(jì)也無法抗拒吧!

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

輕量級(jí)的時(shí)尚主題

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

目前從官方介紹來看,UI組件還相當(dāng)齊全,可用它來快速搭建漂亮、時(shí)尚的網(wǎng)頁(yè)和UI設(shè)計(jì)作品,下面一起來看看介紹。

bootstrap 4 主題:shards

關(guān)于 Shards 這個(gè)主題雖然免費(fèi),但并不代表它只有「表面」,制作者還為性能性能考慮,壓縮版僅12KB大小,實(shí)在太好了,以這樣的大小,制作出來的網(wǎng)頁(yè)直接能秒開。

它并不是直接使用 Bootstrap 的設(shè)計(jì)樣式,所有的組件都是重新設(shè)計(jì),以便得到統(tǒng)一的風(fēng)格!

著陸頁(yè)演示

這是非常不錯(cuò)的UI KIT素材 ,它還包含了10個(gè)額外的自定義組件,可以讓使用者快事制作著陸頁(yè)。

演示地址:https://designrevision.com/demo/shards/extra/app-promo.html

演示地址:https://designrevision.com/demo/shards/extra/agency-landing.html

UI 組件演示

Shards 含有豐富的 UI 組件,網(wǎng)頁(yè)端常用的元素幾乎包含了,大方便用戶自由定制。

顏色:

字體

圖標(biāo)支持900+ Material icons 和 Font awesome 兩大圖標(biāo)庫(kù)!

表單上的細(xì)節(jié),也不容忽視:

還有日期組件的設(shè)計(jì):

卡片

按鈕

導(dǎo)航菜單

我想這些漂亮的元素,已經(jīng)足夠你設(shè)計(jì)一般的網(wǎng)頁(yè),即使不夠,也完全可以自己利用 Sketch 源文件或 HTML 模板再創(chuàng)作。

藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

可讀性在網(wǎng)頁(yè)設(shè)計(jì)中的重要性

用心設(shè)計(jì)

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

當(dāng)我們打開一個(gè)網(wǎng)站,我們會(huì)看網(wǎng)站界面是否美觀,交互是否符合人性化,布局是否合理等等,這些因素對(duì)網(wǎng)站起到一定的影響作用,但最根本影響一個(gè)網(wǎng)站的是整個(gè)網(wǎng)站的可讀性。
良好的設(shè)計(jì)應(yīng)該都是可讀的設(shè)計(jì),如果信息都無法正常而清晰的傳達(dá),那么設(shè)計(jì)就失去了意義。設(shè)計(jì)的可讀性和排版設(shè)計(jì)息息相關(guān),與此同時(shí),對(duì)比度的控制也是其中的核心。想要提升內(nèi)容的可讀性,讓內(nèi)容以更加順暢、更符合邏輯的形式呈現(xiàn)在用戶面前,可以通過以下幾種方式來提高網(wǎng)頁(yè)的可讀性。

1.文字的可讀性

要讓文字提高可讀性,可以通過調(diào)整字體樣式、外邊距、內(nèi)邊距、顏色和對(duì)比度等參數(shù)來提高文字的可讀性。

  • 字體樣式:字體的樣式會(huì)影響可讀性。


  • 行長(zhǎng)度:每行的字符個(gè)數(shù)對(duì)于整體的可讀性起著主要作用。如果文字段落非常寬,閱讀性差。同理,每行文字太短也不行,會(huì)給讀者的眼睛帶來壓力,造成混亂。

  • 外邊距和內(nèi)邊距:和行距一樣,元素周邊和之間的空隙也影響著用戶閱讀文字本身。

  • 顏色與對(duì)比度:文字顏色與相應(yīng)背景也至關(guān)重要。如果在綠色背景上寫綠色文字,就難以閱讀了。設(shè)計(jì)師選擇淺色字深色背景,或是深色字淺色背景,都是有原因的。對(duì)比使得字符容易閱讀。

目前文章內(nèi)容流行的字體是14PX(像素),這樣不容易造成視覺疲勞??梢越y(tǒng)一去設(shè)置全局的字體大小,包括行距。

除此,文字鏈接最好用顏色或是其他樣式跟正文區(qū)分開來,這樣讀者可以清楚的知道哪里可以點(diǎn)擊。例如:可以給a標(biāo)簽寫個(gè)下劃線代碼text-decoration: underline;。

2.段落的可讀性

段落的可讀性一樣可以用過文字和圖片來提高。文字方面跟上面提到的,可以通過字體樣式、外邊距、內(nèi)邊距、顏色和對(duì)比度等參數(shù)來調(diào)整之外,還可以通過段落行距來調(diào)整字段間距。

  • 行距:每行文字間的間距也同樣重要??纯催@篇文章,如果每行文字都與上下兩行粘在一起,你就無法理解這些句子。

可以從上圖看出,文字段落之間不留白可讀性不高。右邊的標(biāo)題和段落之間、行與行之間和段落與段落之間都留了一定的距離,所以整體會(huì)顯得更為整潔和可讀性高,這些在網(wǎng)站當(dāng)中用Margin、Padding和Line-height可以來調(diào)整留白的大小。切記,行距大小不是越大越好,一定要適當(dāng)。


在通篇文字的文章當(dāng)中也可以考慮適當(dāng)?shù)拇┎逡粌蓮垐D片進(jìn)去,配圖可以提高文章的可讀性。

3.區(qū)塊的可讀性

區(qū)塊間也要有一定的間距才能提高區(qū)塊的可讀性。

區(qū)塊留白這個(gè)有點(diǎn)類似上面的文字段落留白,在網(wǎng)頁(yè)當(dāng)中,每個(gè)區(qū)塊與區(qū)塊之間也要適當(dāng)?shù)牧舭祝@個(gè)留白主要還是體現(xiàn)在Margin和Padding上。如果取消兩個(gè)區(qū)塊的Margin和Padding,那兩個(gè)區(qū)塊的內(nèi)容會(huì)聚集在一起,這樣不利于觀者去區(qū)分區(qū)塊之間的關(guān)系,也不利于閱讀。所以一般我們?cè)诮o網(wǎng)站做界面的時(shí)候,都會(huì)設(shè)置一定的間距,就像蟬知系統(tǒng)中默認(rèn)的間距是7px,當(dāng)然,這個(gè)間距的大小都是可以調(diào)整的,看你怎么去設(shè)計(jì)這個(gè)頁(yè)面和頁(yè)面的整體風(fēng)格是否和諧而定。

可以看到上圖左側(cè)區(qū)塊之間的間距為0,整體區(qū)塊和區(qū)塊之間看不出間隙,給人擁堵的感覺。但是右側(cè)留有一定的間隙,所以看起來比較舒暢,可讀性也相對(duì)高很多。

4.圖片的可讀性

為什么說圖片也具有可讀性,要知道一張好的幻燈片設(shè)計(jì)可以起到一定的作用,大部分的網(wǎng)站第一眼看的就是幻燈片,所以圖片的設(shè)計(jì)也不能忽視。
圖片的設(shè)計(jì)可以通過對(duì)比來設(shè)計(jì),比如色彩對(duì)比、字體對(duì)比等。切記勿用復(fù)雜的背景來當(dāng)幻燈片,這樣標(biāo)題在畫面上就不夠突出。

上面的例子,顯而易見,當(dāng)圖片背景比較復(fù)雜的時(shí)候,文字的閱讀性就差一點(diǎn)。第一張圖的背景比較簡(jiǎn)潔大方,加上不用設(shè)計(jì)的字體,自然而然的主題就凸顯出來了。

5.導(dǎo)航的可讀性

說到導(dǎo)航,這個(gè)其實(shí)是整個(gè)網(wǎng)站架構(gòu)當(dāng)中最重要的,所以我也把這點(diǎn)放到最后來講。網(wǎng)站一定要有清晰的導(dǎo)航,方便讀者瀏覽和了解整個(gè)網(wǎng)站的架構(gòu)。所以在設(shè)計(jì)導(dǎo)航的時(shí)候一定要考慮到瀏覽者的習(xí)慣。

  • 導(dǎo)航要簡(jiǎn)單明了,避免奇怪的布局。

上面這個(gè)導(dǎo)航不是說做得不好看,而是找交互的設(shè)計(jì)用起來讓用戶會(huì)有點(diǎn)不舒服,導(dǎo)航下拉時(shí),除頭部?jī)?nèi)容整個(gè)頁(yè)面整體下移,這也可能就是設(shè)計(jì)師特意做的效果,但是很明顯,效果不是特別出彩。

  • 導(dǎo)航點(diǎn)擊狀態(tài)下的樣式和普通樣式需要有明顯區(qū)別。

上面的這個(gè)導(dǎo)航,點(diǎn)擊狀態(tài)下和正常顯示的樣式效果區(qū)別不大,所以識(shí)別性不夠高。

  • 導(dǎo)航的層級(jí)關(guān)系設(shè)計(jì)簡(jiǎn)單點(diǎn),最好不要超過三級(jí)。

現(xiàn)在很多導(dǎo)航設(shè)計(jì)都將二級(jí)導(dǎo)航和三級(jí)導(dǎo)航放在一起,這樣受眾在瀏覽的時(shí)候也可以更清晰網(wǎng)站的架構(gòu)。


優(yōu)秀的網(wǎng)站,通常在用戶體驗(yàn)上非常用心,而網(wǎng)站良好的客戶體驗(yàn)除了優(yōu)秀的界面設(shè)計(jì)、合理簡(jiǎn)潔的框架布局,還有一點(diǎn)至關(guān)重要——網(wǎng)頁(yè)的可讀性。


藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

日歷

鏈接

個(gè)人資料

存檔