中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

設(shè)計(jì)師中的三要素

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

僅從基礎(chǔ)層面來看,在我看來優(yōu)秀的視覺交互設(shè)計(jì)有三個(gè)部分組成,或者說需要滿足三個(gè)要素。每個(gè)部分的滿足程度將直接影響整體作品的質(zhì)量。如果都滿足了,作品就達(dá)到了最好的境界;如果只是一兩個(gè)滿足了,作品質(zhì)量也就馬馬虎虎;如果沒有一個(gè)滿足,那東西肯定稀爛。這三個(gè)部分便是:

?清晰的界面元素 ?元素間的關(guān)聯(lián) ?作品各部分的組成效果 清晰的界面元素指的是每個(gè)元素都清楚的表達(dá)了自己的功能和可交互性(或者affordances,譯注:可以理解為”可供性”,在此推薦ID公社的一篇文章)。這些元素是否容易看到,其中文本是否易于辨別?按鈕是否看起來就像按鈕,并且用戶是否知道它可以點(diǎn)擊(可以交互)?列表看起來是不是像列表,且用戶是否明白這些項(xiàng)的類型?控件喊的圖標(biāo)(icon)是否有辨讀性?每一個(gè)交互元素,都以不同的清晰度呈現(xiàn)給用戶它們各自能夠做什么以及如何使用。

元素間的關(guān)聯(lián)是指類似于元素組合起來將內(nèi)容組織成一個(gè)有一定含義的單元,或者元素將對(duì)比、尺寸的變化來構(gòu)建一種視覺層級(jí),以此來引導(dǎo)用戶的注意。文本中有標(biāo)題,或者列表緊靠這標(biāo)題,就是為了讓其意有所指;按鈕中一定會(huì)有的文本是將其作為標(biāo)注從而讓按鈕易于理解;一組有關(guān)聯(lián)的項(xiàng)必須很明確的和其他無關(guān)聯(lián)的項(xiàng)隔開,就是為了讓其能夠理解為它們是一組;最重要的控件和內(nèi)容一定要讓它們作為首要元素脫穎于頁面,等等。設(shè)計(jì)師通過使用顏色、對(duì)比和空間來組織界面,以此讓用戶很容易地交互與理解。

最后,我們將各部分有機(jī)地結(jié)合起來。將界面作為一個(gè)有機(jī)的整體而不是獨(dú)立部分呈現(xiàn)會(huì)給用戶美感的印象。因?yàn)閱蝹€(gè)元素在扮演各自的角色的同時(shí)以某種有意義的方式和其他元素連接,所有元素結(jié)合起來可以作為一個(gè)單元,一個(gè)統(tǒng)一的界面。建筑師裝飾單獨(dú)的窗戶、門廊、墻壁以及屋頂并這些有機(jī)組合為一間房間,而訪客則會(huì)將這些部分作為整體參觀和體驗(yàn),并會(huì)對(duì)這些效果做出評(píng)價(jià)。統(tǒng)一的界面將前面的兩個(gè)部分以一種巧妙地有特定目的方式結(jié)合,這樣也就達(dá)到美感的效果1。

上面的解釋,例如,為什么許多網(wǎng)站的可用性很好,界面卻很丑陋。設(shè)計(jì)師只關(guān)心可用性而不管美感,或許是確保了每個(gè)元素能夠清楚的表達(dá)其功能;或許是沒有使用icon,取而代之的是清晰的文本標(biāo)簽;或許是為理解力低的用戶增加了引導(dǎo)的描述;或許使用了明顯的對(duì)比巨大的字體;或許將頁面根據(jù)不同意義分組依次來吸引眼球到重要的內(nèi)容,也就導(dǎo)致了整體界面完全缺乏美感,使整個(gè)界面看起來像一個(gè)造型丑陋功能完備的聯(lián)合收割機(jī)而不是一個(gè)有著優(yōu)雅的流線型外殼的小轎車。明晰的元素并不能確保整體界面的美觀。要做到美觀,頁面上所有不同的元素需要和諧連接在一起,這樣才能使之變成一個(gè)有機(jī)的整體性的界面。 --------------------------------------------------------------------------------

于此相反的是,許多好的看的站點(diǎn)的易用性很差。當(dāng)你只想要建立一個(gè)整體美觀的效果,讓元素協(xié)調(diào)而統(tǒng)一就不難實(shí)現(xiàn)。現(xiàn)今的許多設(shè)計(jì)師喜歡使用蒙著的,淺灰色的字體,但這些字體通??勺x性很差。他們這樣做的原因是,他們將文本僅僅是作為構(gòu)建整體頁面的基礎(chǔ)材料而不是需要著重處理的關(guān)鍵元素。他們使用漂亮的大字標(biāo)題,有趣的大圖(hero image),新穎的菜單作為站點(diǎn)的全部組合,然后才順便處理下文字,為了不影響他們美麗的設(shè)計(jì),又讓字體變得又小又淺,最后為了美觀犧牲了可用性。

另一個(gè)形式大于功能的例子是,使用意思不明確的icon。icon比文本標(biāo)簽更小也更優(yōu)雅,單從可用性考慮,它們卻不是一個(gè)很好的考慮。人們通常不是很清楚icon代表了什么,還需要花時(shí)間去鼠標(biāo)移到按鈕來閱讀工具提示(tooltip),除非這些icon非常普遍。icon大都被設(shè)計(jì)成有著相同長寬的方形圖案,對(duì)視覺設(shè)計(jì)師來說它們是構(gòu)建作品的理想選擇。設(shè)計(jì)師玩玩會(huì)沉迷于icon所帶來的視覺效果,因?yàn)槲谋緲?biāo)簽尺寸不可控轉(zhuǎn)而擁抱簡介的優(yōu)雅的icon,同樣為了美觀犧牲了可用性。

這三點(diǎn)的順序也非常重要。一個(gè)華而不實(shí)的作品比不上一個(gè)丑陋卻好用的作品(除非,它的功能就是變得美觀)。因此我們首先得保證所有界面元素都是明晰的,然后確保元素之間的有著良好的關(guān)聯(lián),最后再確保作品是一個(gè)美觀的整體。所有這些過程都是同時(shí)發(fā)生——例如,你在裝飾單個(gè)元素的同時(shí)你會(huì)創(chuàng)建它們之間的關(guān)聯(lián),同時(shí)一開始你便確定了你最后想要的達(dá)到的視覺效果——但是,這三個(gè)點(diǎn)的完成順序卻影響了最終作品的是否表現(xiàn)的恰如其分。

最終,當(dāng)所有的三點(diǎn)都很好的實(shí)現(xiàn),所有的元素都很清晰,元素間定義了良好的關(guān)聯(lián),整體構(gòu)造成一種栩栩如生的審美形象,我們便完成了一個(gè)好看而又好用的界面2;一個(gè)能夠表達(dá)自己功能同時(shí)有著統(tǒng)一的樣式和視覺印象的界面。

1.有時(shí)候或許會(huì)這樣,當(dāng)我們完成第二點(diǎn)的時(shí)候第三點(diǎn)恰好也滿足了——例如,一旦你解決了元素將的關(guān)聯(lián),和諧的整體自然而然的形成了。是的,一種協(xié)調(diào)的感覺達(dá)到了,但是我們想要的不僅僅是這些。我們?cè)谧詈笠徊叫枰_(dá)到的是一種美感的效果,是一種設(shè)計(jì)師想要達(dá)到的視覺樣式。舉個(gè)例子,許多的新聞網(wǎng)站,它們都有著十分相同的內(nèi)容單元(最新標(biāo)題列表,鏈接部分,等等),并且各自都有著明晰的定義,但是每一個(gè)網(wǎng)站最終都需要與其他的區(qū)別開來——你有機(jī)會(huì)組合你的作品讓人欲罷不能。 2.我的意思是美麗優(yōu)雅和諧的感覺,而這些感覺來自于良好組織的設(shè)計(jì),設(shè)計(jì)中的每個(gè)元素服務(wù)于其他的一切卻并不出格。有些設(shè)計(jì)可以通過增加樣式和裝飾來錦上添花,有些就不行,就需要保持其簡介的形式。

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

文章題目:設(shè)計(jì)師中的三要素
本文鏈接:http://www.rwnh.cn/news0/312050.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站導(dǎo)航、用戶體驗(yàn)、營銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化做網(wǎng)站、定制開發(fā)

廣告

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

成都網(wǎng)站建設(shè)
台北市| 宾阳县| 尤溪县| 霍林郭勒市| 澳门| 武强县| 资溪县| 府谷县| 岳池县| 天长市| 招远市| 定西市| 临泉县| 开封市| 山阴县| 嘉峪关市| 五华县| 漳浦县| 禹州市| 东城区| 洛南县| 新昌县| 江源县| 辽宁省| 蓬安县| 佛学| 上蔡县| 曲水县| 社会| 句容市| 马尔康县| 上林县| 阿巴嘎旗| 乌兰县| 贵定县| 临邑县| 中阳县| 巧家县| 泰兴市| 卫辉市| 鲜城|