詳細(xì)解析網(wǎng)頁扁平化設(shè)計與可訪問性

2024-02-24    分類: 網(wǎng)站建設(shè)

這幾年互聯(lián)網(wǎng)變化好多,我們在網(wǎng)上瀏覽的方式也一樣。在本文中,我們將看一下最近扁平化設(shè)計帶來的可訪問性提升以及使得互聯(lián)網(wǎng)或多或少更開放和可用性。

扁平化元素

擬物化設(shè)計模仿顏色、紋理、形狀甚至實際生活中特定的實際形狀,因此能對不喜歡新技術(shù)和更喜歡仿現(xiàn)實環(huán)境的人非常有幫助。然而,對視障用戶能有多少用戶呢?堅持這種設(shè)計方法對他們會有價值嗎?好吧,和擬物化設(shè)計相對應(yīng)的,扁平化設(shè)計,有很多優(yōu)勢可以幫助到這些特殊需求。因為扁平化設(shè)計使用基本的形狀,比如,正規(guī)/不正規(guī)的多邊形,它們更容易識別。

扁平化和擬物化的兩個計算器對比展示了兩種技術(shù)之間的不同。扁平化設(shè)計給予按鈕本身較小的重要性同時增強(qiáng)了內(nèi)容(本例中的數(shù)字和數(shù)學(xué)符號)。另一方面,擬物化設(shè)計通過給予按鈕更大的重要性而使得它們很突出,而內(nèi)容卻因為低對比度而不太醒目了。

上面的例子展示了扁平化設(shè)計如何提升和給予內(nèi)容更大的重要性,從而能證明對視障用戶是有幫助的。

大字體和小圖標(biāo)

不只是在扁平化設(shè)計中,極簡主義設(shè)計也一樣,大字體元素是最重要的一種表現(xiàn)。字體能讓用戶聚焦在內(nèi)容,從而成為設(shè)計流程中最重要的一部分。當(dāng)前設(shè)計中的趨勢包括高對比色的大字體、清晰的自定義字體和平衡的段落的使用——基本上就是,把傳統(tǒng)印刷排版帶到Web中來。這些原則增強(qiáng)了易讀性和可讀性,提高了易用性的另一個方面。畢竟,高對比色的自定義字體能提升可訪問性是一個眾所周知的事實。

這里的共用元素是使用大而清晰的高對比色字體增強(qiáng)可讀性(比較像Sans-Serifs)

此外,清晰的大字體可用于基本元素中以創(chuàng)建Web和UI中強(qiáng)對比色的按鈕,從而幫助用戶輕易地識別指定元素的功能并將之與別的元素區(qū)分開來。說道元素,這些扁平化的元素在設(shè)計過程中變得真的很重要,因為它們有助于給于扁平化設(shè)計流程個性和強(qiáng)度,從而構(gòu)建更好的所有按鈕和界面元素的表現(xiàn)、可見性和清晰性。

基本形狀、實色和簡單的圖標(biāo)組成了這個優(yōu)秀的iPhone皮膚的一部分,它展示了最好的扁平化UI元素。

實色與高對比色

到現(xiàn)在為止,我們討論了應(yīng)用于大字體和圖標(biāo)的高對比色?,F(xiàn)在,讓我們看下細(xì)節(jié)方面。在網(wǎng)頁設(shè)計中使用高對比色不是一個新的理念。事實上,多年來,高對比色被用于為網(wǎng)頁設(shè)計中特定的關(guān)鍵元素提供更好的視覺效果。

網(wǎng)上由很多出色的教程和工具來幫助你創(chuàng)建精確的色彩組合。比如,

Color Scheme Designer向你展示單色、雙色、三色、四色、以此類推的色盤,并讓你更多了解某個特定顏色如何與別的顏色相互影響。

Color Scheme Designer, 一個很贊的工具,可以查看顏色混合時的表現(xiàn),然后用其結(jié)果作為創(chuàng)建高對比色的扁平化設(shè)計的參考。

同時,高對比色也可以被用于顏色之外,比如形狀、分派、高度、線性、紋理和字的粗細(xì)。事實上,玩轉(zhuǎn)這些所有元素及其相應(yīng)的對比度能提升你的設(shè)計的表現(xiàn),并使你的設(shè)計讓視弱的人更易用。

高對比色網(wǎng)站及其灰度實例

這里是一些高對比色網(wǎng)站及其灰度版本,有的做了負(fù)反轉(zhuǎn),展示出漂亮的設(shè)計是如何天然的兼容了可用性和易用性理念的。

bigtop.it. 使用了大的字體和元素,暖色和溫和的顏色之間的軟對比。他們定義的對比度恰到好處。

aaugh.it 極簡主義帶來的簡易的優(yōu)勢和適度的對比度

cheesesurvivalkit.com 有個漂亮的灰、白、紅三色,提供了強(qiáng)對比度并提升了可讀性和元素識別度。

metaphiziks.com 很完美的提升了內(nèi)容顯示。

Symb.ly是一個使用了極簡樣式來讓你專注于內(nèi)容的高對比度網(wǎng)站。

Odopod.com展示了一個漂亮的使用了粉色、白色和高規(guī)格圖片的溫和的對比色。當(dāng)轉(zhuǎn)換到灰度版本,所有元素都完全可識別。

unfold.no 是一個使用了高雅、簡單設(shè)計和清晰內(nèi)容的網(wǎng)站

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司!

當(dāng)前標(biāo)題:詳細(xì)解析網(wǎng)頁扁平化設(shè)計與可訪問性
轉(zhuǎn)載來源:http://www.muchs.cn/news39/318689.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、響應(yīng)式網(wǎng)站定制網(wǎng)站、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)