網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性發(fā)布者：本站 時(shí)間：2022-01-07 09:01:34
這幾年互聯(lián)網(wǎng)變化好多，我們?cè)诰W(wǎng)上瀏覽的方式也一樣。在本文中，我們將看一下最近扁平化設(shè)計(jì)帶來(lái)的可訪(fǎng)問(wèn)性提升以及使得互聯(lián)網(wǎng)或多或少更開(kāi)放和可用性。
扁平化元素
擬物化設(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í)別。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
在上圖中，左邊的，扁平化設(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è)方面。畢竟，高對(duì)比色的自定義字體能提升可訪(fǎng)問(wèn)性是一個(gè)眾所周知的事實(shí)。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
這里的共用元素是使用大而清晰的高對(duì)比色字體增強(qiáng)可讀性(比較像Sans-Serifs)
此外，清晰的大字體可用于基本元素中以創(chuàng)建Web和UI中強(qiáng)對(duì)比色的按鈕，從而幫助用戶(hù)輕易地識(shí)別指定元素的功能并將之與別的元素區(qū)分開(kāi)來(lái)。說(shuō)道元素，這些扁平化的元素在設(shè)計(jì)過(guò)程中變得真的很重要，因?yàn)樗鼈冇兄诮o于扁平化設(shè)計(jì)流程個(gè)性和強(qiáng)度，從而構(gòu)建更好的所有按鈕和界面元素的表現(xiàn)、可見(jiàn)性和清晰性。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
基本形狀、實(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向你展示單色、雙色、三色、四色、以此類(lèi)推的色盤(pán)，并讓你更多了解某個(gè)特定顏色如何與別的顏色相互影響。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
Color Scheme Designer, 一個(gè)很贊的工具，可以查看顏色混合時(shí)的表現(xiàn)，然后用其結(jié)果作為創(chuàng)建高對(duì)比色的扁平化設(shè)計(jì)的參考。
同時(shí)，高對(duì)比色也可以被用于顏色之外，比如形狀、分派、高度、線(xiàn)性、紋理和字的粗細(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ì)是如何天然的兼容了可用性和易用性理念的。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
bigtop.it. 使用了大的字體和元素，暖色和溫和的顏色之間的軟對(duì)比。他們定義的對(duì)比度恰到好處。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
aaugh.it 極簡(jiǎn)主義帶來(lái)的簡(jiǎn)易的優(yōu)勢(shì)和適度的對(duì)比度
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
cheesesurvivalkit.com 有個(gè)漂亮的灰、白、紅三色，提供了強(qiáng)對(duì)比度并提升了可讀性和元素識(shí)別度。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
metaphiziks.com 很完美的提升了內(nèi)容顯示。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
Symb.ly是一個(gè)使用了極簡(jiǎn)樣式來(lái)讓你專(zhuān)注于內(nèi)容的高對(duì)比度網(wǎng)站。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
Odopod.com展示了一個(gè)漂亮的使用了粉色、白色和高規(guī)格圖片的溫和的對(duì)比色。當(dāng)轉(zhuǎn)換到灰度版本，所有元素都完全可識(shí)別。
詳細(xì)解析網(wǎng)頁(yè)扁平化設(shè)計(jì)與可訪(fǎng)問(wèn)性,PS教程,
unfold.no 是一個(gè)使用了高雅、簡(jiǎn)單設(shè)計(jì)和清晰內(nèi)容的網(wǎng)站。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話(huà)：021-58370032
關(guān)鍵詞標(biāo)簽：上海網(wǎng)站建設(shè) 上海網(wǎng)站制作 網(wǎng)站優(yōu)化 小程序開(kāi)發(fā)