扁平化設(shè)計(jì)與可訪問(wèn)性(5)
這里的共用元素是使用大而清晰的高對(duì)比色字體增強(qiáng)可讀性(比較像Sans-Serifs)
此外,清晰的大字體可用于基本元素中以創(chuàng)建Web和UI中強(qiáng)對(duì)比色的按鈕,從而幫助用戶輕易地識(shí)別指定元素的功能并將之與別的元素區(qū)分開(kāi)來(lái)。說(shuō)道元素,這些扁平化的元素在設(shè)計(jì)過(guò)程中變得真的很重要,因?yàn)樗鼈冇兄诮o于扁平化設(shè)計(jì)流程個(gè)性和強(qiáng)度,從而構(gòu)建更好的所有按鈕和界面元素的表現(xiàn)、可見(jiàn)性和清晰性。
基本形狀、實(shí)色和簡(jiǎn)單的圖標(biāo)組成了這個(gè)優(yōu)秀的iPhone皮膚的一部分,它展示了最好的扁平化UI元素。
實(shí)色與高對(duì)比色
到現(xiàn)在為止,我們討論了應(yīng)用于大字體和圖標(biāo)的高對(duì)比色。現(xiàn)在,讓我們看下細(xì)節(jié)方面。在網(wǎng)頁(yè)設(shè)計(jì)中使用高對(duì)比色不是一個(gè)新的理念。事實(shí)上,多年來(lái),高對(duì)比色被用于為網(wǎng)頁(yè)設(shè)計(jì)中特定的關(guān)鍵元素提供更好的視覺(jué)效果。
網(wǎng)上由很多出色的教程和工具來(lái)幫助你創(chuàng)建精確的色彩組合。比如,
Color Scheme Designer向你展示單色、雙色、三色、四色、以此類推的色盤(pán),并讓你更多了解某個(gè)特定顏色如何與別的顏色相互影響。
Color Scheme Designer, 一個(gè)很贊的工具,可以查看顏色混合時(shí)的表現(xiàn),然后用其結(jié)果作為創(chuàng)建高對(duì)比色的扁平化設(shè)計(jì)的參考。
同時(shí),高對(duì)比色也可以被用于顏色之外,比如形狀、分派、高度、線性、紋理和字的粗細(xì)。事實(shí)上,玩轉(zhuǎn)這些所有元素及其相應(yīng)的對(duì)比度能提升你的設(shè)計(jì)的表現(xiàn),并使你的設(shè)計(jì)讓視弱的人更易用。
高對(duì)比色網(wǎng)站及其灰度實(shí)例
這里是一些高對(duì)比色網(wǎng)站及其灰度版本,有的做了負(fù)反轉(zhuǎn),展示出漂亮的設(shè)計(jì)是如何天然的兼容了可用性和易用性理念的。
bigtop.it. 使用了大的字體和元素,暖色和溫和的顏色之間的軟對(duì)比。他們定義的對(duì)比度恰到好處。
aaugh.it 極簡(jiǎn)主義帶來(lái)的簡(jiǎn)易的優(yōu)勢(shì)和適度的對(duì)比度
cheesesurvivalkit.com 有個(gè)漂亮的灰、白、紅三色,提供了強(qiáng)對(duì)比度并提升了可讀性和元素識(shí)別度。
metaphiziks.com 很完美的提升了內(nèi)容顯示。
Symb.ly是一個(gè)使用了極簡(jiǎn)樣式來(lái)讓你專注于內(nèi)容的高對(duì)比度網(wǎng)站。
本文地址:http://m.pkvc.cn/tutorial/ui1366.html
您可能還喜歡
- 經(jīng)典網(wǎng)頁(yè)配色方案之無(wú)色系
- 對(duì)齊!框框框!ps中對(duì)齊和參考線詳解
- banner實(shí)戰(zhàn)技巧-版式平衡構(gòu)圖
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏大視
- 如何成功運(yùn)用扁平化設(shè)計(jì)與色彩趨勢(shì)
- 做有思想的網(wǎng)頁(yè)設(shè)計(jì)-banner實(shí)例講解
- [圖趣]色彩搭配的核心原則和聯(lián)想
- 扁平化設(shè)計(jì)與可訪問(wèn)性
- 網(wǎng)頁(yè)設(shè)計(jì)專題技巧淺析
- WEB設(shè)計(jì)中的排版
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏