衡陽網(wǎng)站建設(shè)設(shè)計三要素

申請免費試用、咨詢電話：400-8352-114

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

清晰的界面元素指的是每個元素都清楚的表達了自己的功能和可交互性（或者affordances，譯注：可以理解為”可供性”，在此推薦ID公社的一篇文章）。這些元素是否容易看到，其中文本是否易于辨別？按鈕是否看起來就像按鈕，并且用戶是否知道它可以點擊（可以交互）？列表看起來是不是像列表，且用戶是否明白這些項的類型？控件喊的圖標（icon）是否有辨讀性？每一個交互元素，都以不同的清晰度呈現(xiàn)給用戶它們各自能夠做什么以及如何使用。

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

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

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

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

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

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

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

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