今天,天祺網(wǎng)絡(luò)科技跟大家分享一篇網(wǎng)站設(shè)計(jì)文章。
我們說(shuō),將網(wǎng)站界面中的色彩,對(duì)比和內(nèi)容放在一起構(gòu)成3C要素,并不僅僅是因?yàn)樗鼈兊膯卧~開頭都是字母C,而是它們本身在UI設(shè)計(jì)中都占據(jù)這足夠突出的地位,有著無(wú)與倫比的重要性。
第一個(gè)部分天祺網(wǎng)絡(luò)科技先給大家講色彩(Color)因素,色彩是絕大多數(shù)設(shè)計(jì)給用戶傳遞的最顯著的視覺(jué)元素之一。設(shè)計(jì)師和非設(shè)計(jì)師都會(huì)常常聊到色彩,對(duì)于不同色彩的大家有著不同的感受和體驗(yàn)。色彩本身常常就能夠創(chuàng)造出獨(dú)特的情感體驗(yàn),即使沒(méi)有其他的元素。任何可見(jiàn)的色彩,呈現(xiàn)在任何人面前,幾乎都能夠獲得反饋。這也使得色彩在設(shè)計(jì)中有著獨(dú)特的地位。
天祺網(wǎng)絡(luò)科技告誡各位設(shè)計(jì)師,色彩強(qiáng)大,可以成就設(shè)計(jì),也能毀掉設(shè)計(jì)。色彩在界面當(dāng)中影響著許多不同的功能和屬性:
色彩會(huì)影響到網(wǎng)站的可用性和可讀性,品牌認(rèn)知度和品牌意識(shí) 用戶視覺(jué)和交互 信息組織和用戶流程 設(shè)計(jì)的整體體驗(yàn) 設(shè)計(jì)師可以使用色彩創(chuàng)建清晰易懂的導(dǎo)航、直觀的交互、為整個(gè)項(xiàng)目設(shè)定情緒、創(chuàng)建強(qiáng)大的可供調(diào)用的元素、呈現(xiàn)設(shè)計(jì)的主題,營(yíng)造氛圍 但是這并不是意味著將不同的色彩簡(jiǎn)單的混合到一起。
配色方案是控制設(shè)計(jì)當(dāng)中不同色彩組合的合集。設(shè)計(jì)師通過(guò)創(chuàng)建配色方案,系統(tǒng)地對(duì)品牌和UI界面的色彩進(jìn)行管理,這確保了品牌和UI 在色彩的運(yùn)用上保持著高度的一致。配色方案中的具體搭配是植根于色彩理論的。色彩從來(lái)都不是越多越好,通常配色方案當(dāng)中,色彩數(shù)量要控制在3種左右。
另外,天祺網(wǎng)絡(luò)科技還要給大家講的另外一種策略,是基于黑白兩色來(lái)構(gòu)建整個(gè)設(shè)計(jì),然后再加入更多的其他色彩,將整個(gè)配色方案豐富起來(lái)。黑白兩色確保了整個(gè)設(shè)計(jì)的輪廓足夠清晰,不過(guò)在后續(xù)加入配色的時(shí)候,要注意色彩的數(shù)量,以及色彩之間的對(duì)比度。
而這也正好牽涉到第二個(gè)“C”,也就是 Contrast,對(duì)比,元素之間的差異往往能夠借助對(duì)比來(lái)凸顯。創(chuàng)建富有層次的視覺(jué)結(jié)構(gòu),讓內(nèi)容的可讀性更強(qiáng),讓信息更容易被用戶所理解和吸收。對(duì)比強(qiáng)烈的元素讓用戶輕松地注意到構(gòu)成對(duì)比的元素,創(chuàng)造自然的視覺(jué)模式和用戶流程。
天祺網(wǎng)絡(luò)科技認(rèn)為,對(duì)比度的重要性之所以如此之高,很大程度上是因?yàn)樗鼜V泛的適用性和顯著的實(shí)用性。在控制對(duì)比度的時(shí)候,你需要明確對(duì)比度通常所涉及的元素類型和屬性:色彩對(duì)比、尺寸對(duì)比、方向?qū)Ρ?、空間對(duì)比、形狀對(duì)比等,在探討UI的可訪問(wèn)性的時(shí)候,對(duì)比度始終是關(guān)鍵性的因素。
另外,空間上的對(duì)比營(yíng)造也很有技巧,使用不同的留白來(lái)營(yíng)造疏密對(duì)比。如果你想讓某一部分內(nèi)容更容易吸引用戶的注意力,不妨讓它周圍有更多的留白。
簡(jiǎn)而言之,對(duì)比是通過(guò)對(duì)立的差異化來(lái)創(chuàng)造吸引力??此撇煌脑貙?shí)際上可以搭配起來(lái),達(dá)到一目了然的效果。 要知道對(duì)比是否達(dá)到了你的預(yù)期效果,在查看屏幕上元素的時(shí)候,不妨考慮下面的幾個(gè)因素:
可讀性:文本和圖形是否都清晰可識(shí)別?
清晰度:一個(gè)元素和另外一個(gè)元素之間能否輕松分辨?
可訪問(wèn)性:你的設(shè)計(jì)是否能夠服務(wù)更多的用戶?
上下文環(huán)境:用戶是否能在特定的地點(diǎn)特定的場(chǎng)合明白你的設(shè)計(jì)?
3C要素中最后的一個(gè)組成部分就是內(nèi)容(Content)。天祺網(wǎng)絡(luò)科技認(rèn)為,用戶界面中的內(nèi)容非常豐富,涵蓋了從圖像、文字、圖標(biāo)、品牌等所有相關(guān)的信息。內(nèi)容還包括視頻以及各種微文案甚至UI控件上的說(shuō)明和標(biāo)簽。
所有的這些元素匯聚到了一起,構(gòu)成用戶界面,甚至讓設(shè)計(jì)變得優(yōu)秀和特別。為什么用戶會(huì)停留在這個(gè)界面而不是去別的地方?原因就是內(nèi)容。
只有內(nèi)容是不夠的,內(nèi)容本身要足夠精彩。高分辨率的圖片,涵蓋有用信息的文本,和你的競(jìng)爭(zhēng)對(duì)手的內(nèi)容相比,你所創(chuàng)建的內(nèi)容必須更加優(yōu)秀,更加有料,更加突出。必然是一個(gè)艱巨的任務(wù)。
天祺網(wǎng)絡(luò)科技告誡大家,一定要讓用戶看到內(nèi)容的真實(shí),和你的情感產(chǎn)生共鳴。