扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性(4)
一致性
通過(guò)使用通用的UI元素和樣式,你可以幫助用戶(hù)了解什么是可以期待的,然后使得更容易使用你的應(yīng)用。
對(duì)比
可點(diǎn)擊元素和非可點(diǎn)擊元素之間要有適當(dāng)?shù)膶?duì)比。這可以通過(guò)顏色、大小、位置以及樣式來(lái)實(shí)現(xiàn)。
布局
使用一個(gè)網(wǎng)格布局,比如960gs,是為你的設(shè)計(jì)建立一些可視的指南的好的方法。視線(xiàn)會(huì)自然的準(zhǔn)從由內(nèi)容創(chuàng)建的線(xiàn)條和比例,所以理解和使用一個(gè)網(wǎng)格是一個(gè)強(qiáng)化視覺(jué)平衡的好辦法。
層級(jí)
我更傾向于將此理解為“用戶(hù)行為”,我會(huì)寫(xiě)一篇關(guān)于這個(gè)話(huà)題的文章,但是實(shí)現(xiàn)最通用的用戶(hù)行為(有時(shí)被稱(chēng)為用例)容易發(fā)現(xiàn),而去掉不太通用的行為是簡(jiǎn)化用戶(hù)界面從而使它更好用的好方法。作為通用準(zhǔn)則,最重要的要比不太重要的更醒目。
扁平化元素
擬物化設(shè)計(jì)模仿顏色、紋理、形狀甚至實(shí)際生活中特定的實(shí)際形狀,因此能對(duì)不喜歡新技術(shù)和更喜歡仿現(xiàn)實(shí)環(huán)境的人非常有幫助。然而,對(duì)視障用戶(hù)能有多少用戶(hù)呢?堅(jiān)持這種設(shè)計(jì)方法對(duì)他們會(huì)有價(jià)值嗎?好吧,和擬物化設(shè)計(jì)相對(duì)應(yīng)的,扁平化設(shè)計(jì),有很多優(yōu)勢(shì)可以幫助到這些特殊需求。因?yàn)楸馄交O(shè)計(jì)使用基本的形狀,比如,正規(guī)/不正規(guī)的多邊形,它們更容易識(shí)別。
在上圖中,左邊的,扁平化設(shè)計(jì)展示了方形/矩形元素和高對(duì)比色的按鈕。而右側(cè)的擬物化計(jì)算器,使用了低對(duì)比色和大量的立體和陰影元素。
扁平化和擬物化的兩個(gè)計(jì)算器對(duì)比展示了兩種技術(shù)之間的不同。扁平化設(shè)計(jì)給予按鈕本身較小的重要性同時(shí)增強(qiáng)了內(nèi)容(本例中的數(shù)字和數(shù)學(xué)符號(hào))。另一方面,擬物化設(shè)計(jì)通過(guò)給予按鈕更大的重要性而使得它們很突出,而內(nèi)容卻因?yàn)榈蛯?duì)比度而不太醒目了。
上面的例子展示了扁平化設(shè)計(jì)如何提升和給予內(nèi)容更大的重要性,從而能證明對(duì)視障用戶(hù)是有幫助的。
大字體和小圖標(biāo)
不只是在扁平化設(shè)計(jì)中,極簡(jiǎn)主義設(shè)計(jì)也一樣,大字體元素是最重要的一種表現(xiàn)。字體能讓用戶(hù)聚焦在內(nèi)容,從而成為設(shè)計(jì)流程中最重要的一部分。當(dāng)前設(shè)計(jì)中的趨勢(shì)包括高對(duì)比色的大字體、清晰的自定義字體和平衡的段落的使用——基本上就是,把傳統(tǒng)印刷排版帶到Web中來(lái)。這些原則增強(qiáng)了易讀性和可讀性,提高了易用性的另一個(gè)方面
本文地址:http://m.pkvc.cn/tutorial/ui1366.html
您可能還喜歡
- 經(jīng)典網(wǎng)頁(yè)配色方案之無(wú)色系
- 對(duì)齊!框框框!ps中對(duì)齊和參考線(xiàn)詳解
- 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ì)與可訪(fǎng)問(wèn)性
- 網(wǎng)頁(yè)設(shè)計(jì)專(zhuān)題技巧淺析
- WEB設(shè)計(jì)中的排版
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(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ì)系列文章(二):全屏