做交互應(yīng)該知道的視覺(jué)幾件事

偶爾會(huì)聽(tīng)到產(chǎn)品經(jīng)理和交互設(shè)計(jì)抱怨，視覺(jué)設(shè)計(jì)稿和最初規(guī)劃差別太大，我自己也遇到過(guò)類(lèi)似狀況。究其原因，大多還是溝通中出現(xiàn)了問(wèn)題。

　　有效溝通，信息的對(duì)等是很重要的。這個(gè)對(duì)等，既包括讓視覺(jué)設(shè)計(jì)盡早了解產(chǎn)品需求，獲得與其他人員對(duì)等的信息;也包括交流雙方知識(shí)領(lǐng)域的對(duì)等，彼此多了解對(duì)方領(lǐng)域內(nèi)容，才能更好地溝通。

　　對(duì)于交互設(shè)計(jì)師來(lái)說(shuō)，視覺(jué)設(shè)計(jì)是合作最多的一環(huán)，交互原型終歸要以視覺(jué)的形式呈現(xiàn)在用戶(hù)眼前。因此，懂些視覺(jué)設(shè)計(jì)，更易于將交互方案?jìng)鬟f給用戶(hù)。同時(shí)，交互設(shè)計(jì)作為多學(xué)科交匯的職位，懂些視覺(jué)更是自己能力的提高。諸葛亮有句話(huà)說(shuō)的好，什么都略懂一點(diǎn)，生活會(huì)多彩一些。

　　切入正題，逐一向各位介紹一些視覺(jué)原則，為了更好理解，我都舉微博的例子。

通過(guò)字體表達(dá)產(chǎn)品風(fēng)格

　　視覺(jué)設(shè)計(jì)中，字體的選擇對(duì)于產(chǎn)品風(fēng)格的表現(xiàn)是作用明顯的，同一段文字，用不同字體寫(xiě)出，感覺(jué)確實(shí)千差萬(wàn)別。

　　微博中最常用的發(fā)布框，上方“有什么新鮮事想告訴大家”采用了華康娃娃體，體現(xiàn)出微博隨時(shí)隨地發(fā)布，很輕松的產(chǎn)品感覺(jué)。如果把字體換成“華文新魏體”和“微軟雅黑體”，不是感覺(jué)像人民網(wǎng)，就是完全沒(méi)有風(fēng)格，體驗(yàn)就差多了。

　　勛章館首頁(yè)這段煽情的文字通過(guò)手寫(xiě)體(FZJingLeiS-R-GB)，以日記的形式，表達(dá)出勛章記錄生活、記錄成長(zhǎng)的產(chǎn)品感覺(jué)，若換成一般字體，感覺(jué)也就沒(méi)了。

通過(guò)配色展示產(chǎn)品定位

　　通過(guò)配色來(lái)展示產(chǎn)品定位，也是設(shè)計(jì)師必用的方法。視覺(jué)設(shè)計(jì)前期調(diào)研階段，常常通過(guò)情緒版提煉適合目標(biāo)用戶(hù)的顏色，形成一整套的配色方案。

　　紫色，關(guān)鍵詞：優(yōu)雅、高貴、女性、莊重、神圣、成熟、深度、神秘、時(shí)尚。微音樂(lè)作為音樂(lè)首發(fā)平臺(tái)的定位，紫色更加彰顯時(shí)尚魅力。

 

　　紅色，關(guān)鍵詞：藝術(shù)、熱烈、開(kāi)放、激情、積極、活力、喜慶、生命、成熟。微直播要體現(xiàn)直播的盛況，充滿(mǎn)激情的紅色就非常適合。

 

　　藍(lán)色，關(guān)鍵詞：理智、知性、公正、商務(wù)、科技、嚴(yán)格、細(xì)致、嚴(yán)謹(jǐn)、公式化。投票的公正性，以及微數(shù)據(jù)的理性、嚴(yán)謹(jǐn)，注定產(chǎn)品要以藍(lán)色為主色調(diào)。

 

　　橙色，關(guān)鍵詞：陽(yáng)光、輝煌、活動(dòng)、溫暖、記憶、家庭、健康、快樂(lè)。微活動(dòng)的參與感、風(fēng)云榜的輝煌，當(dāng)然也少不了橙色調(diào)的烘托。

 

　　綠色，關(guān)鍵詞：成長(zhǎng)、樸素、公益、生命、安全、新鮮、和平、春天、大自然。微博達(dá)人是面向草根用戶(hù)的一款產(chǎn)品，他們通過(guò)在微博上的行為，一點(diǎn)點(diǎn)成為某個(gè)領(lǐng)域的草根明星，綠色的配色很符合這種成長(zhǎng)的感覺(jué)，微公益就不多說(shuō)了，肯定綠色最適合啦。

 

營(yíng)造統(tǒng)一的品牌形象

　　品牌形象是一個(gè)很大的領(lǐng)域，具體到某個(gè)微博產(chǎn)品的品牌感，更多的還是通過(guò)視覺(jué)形象來(lái)傳達(dá)。這就需要視覺(jué)設(shè)計(jì)師制定一套系統(tǒng)的視覺(jué)體系，讓用戶(hù)看一眼，就能清晰地辨認(rèn)。

　　微群的品牌形象很受大家認(rèn)可，項(xiàng)目規(guī)劃時(shí)，希望能表現(xiàn)人與群、人與人的關(guān)系，以及群的歸屬感。視覺(jué)設(shè)計(jì)師采用了星球、飛船和人的視覺(jué)元素，講述了“每個(gè)群都是一個(gè)星球，大家有著共同愛(ài)好”的故事。整個(gè)網(wǎng)站以深藍(lán)為主色調(diào)，營(yíng)造星空的感覺(jué)，當(dāng)用戶(hù)看到了這種配色和元素，就知道自己來(lái)到了微群的頁(yè)面。

　　內(nèi)測(cè)時(shí)啟動(dòng)了這套體系，飛船上的人發(fā)現(xiàn)了適合自己的星球，馬上就要降落了。

 

　　新手引導(dǎo)中，也巧妙地將這種元素融入進(jìn)來(lái)，既形象，又增強(qiáng)了品牌感。

　　群的等級(jí)，用星球上的樹(shù)木來(lái)體現(xiàn)，等級(jí)越高，樹(shù)木越茂盛。

　　幫助頁(yè)、個(gè)人頁(yè)、發(fā)布頁(yè)等等… 就不一一介紹了，總之大家自己觀察，就會(huì)發(fā)現(xiàn)微群處處都有體現(xiàn)。

造型讓產(chǎn)品更有沖擊力

　　視覺(jué)設(shè)計(jì)中，夸張的造型對(duì)用戶(hù)的沖擊力非常大，很容易一下抓住用戶(hù)，這種設(shè)計(jì)常出現(xiàn)在專(zhuān)題頁(yè)面和個(gè)性皮膚中。

　　《帶著微博去旅行》這個(gè)專(zhuān)題，設(shè)計(jì)師在頭圖設(shè)計(jì)中用了斜線(xiàn)處理，就連部分按鍵也是傾斜的，這就和下面規(guī)整的模塊形成了對(duì)比。我們交互設(shè)計(jì)的原型稿，布局上往往是橫平豎直的，有時(shí)視覺(jué)表現(xiàn)上打破這種規(guī)則，會(huì)起到好的效果。

 

　　《微博有愛(ài)》專(zhuān)題也是個(gè)很好的例子，緊握的雙手與標(biāo)題形成了倒三角形，“獲取情人節(jié)勛章”放在三角形尖部，一下就把主題和最重要的操作，推到了用戶(hù)眼前。

 

　　《微身份勛章》和《2012來(lái)了》專(zhuān)題中，感覺(jué)就要跳出屏幕的模特和大船，也是表現(xiàn)頁(yè)面沖擊力很好的例子。

重要內(nèi)容留在首屏

　　這是視覺(jué)和交互設(shè)計(jì)師中都要注意的，有時(shí)往往原型中放在了首屏，視覺(jué)設(shè)計(jì)時(shí)由于一些原因(加模塊或是加高頭圖)又被擠到了下面，這點(diǎn)大家在視覺(jué)審核與測(cè)試中要格外注意。

　　大家看下圖，大屏幕是一個(gè)反面教材，首屏居然放了一個(gè)廣告，而微博桌面做得就好多了。

 

　　由于用戶(hù)顯示器大多還是1024*768以及1280*800的分辨率，除去瀏覽器高度，重要內(nèi)容還是盡量放在600高以?xún)?nèi)吧。

讓頁(yè)面有層次有重點(diǎn)

　　交互設(shè)計(jì)師完成頁(yè)面布局設(shè)計(jì)，突出頁(yè)面重點(diǎn)，方便用戶(hù)瀏覽信息、完成任務(wù)。視覺(jué)設(shè)計(jì)階段，好的設(shè)計(jì)稿對(duì)于延續(xù)前期交互理念，引導(dǎo)用戶(hù)操作是非常有幫助的。

　　先看微博主站的例子。視覺(jué)設(shè)計(jì)師通過(guò)色塊把頁(yè)面中的左導(dǎo)、主內(nèi)容區(qū)和右側(cè)模塊區(qū)分開(kāi)，用戶(hù)瀏覽微博信息時(shí)，視線(xiàn)不會(huì)被兩側(cè)干擾。而同樣布局的微博相冊(cè)就差一些，淡灰色左導(dǎo)很不清晰，右側(cè)和主內(nèi)容區(qū)也沒(méi)有一個(gè)清晰的分界，用戶(hù)瀏覽時(shí)很難發(fā)現(xiàn)重點(diǎn)。

   

　　再看微直播首頁(yè)，最重要是頁(yè)面上方的推薦區(qū)，設(shè)計(jì)師用延展的紅色模塊，與下方的淺灰色形成對(duì)比，一下就把重點(diǎn)突出了。

 

模擬現(xiàn)實(shí)世界匹配用戶(hù)心智模型

　　原型設(shè)計(jì)中常說(shuō)，操作方式要符合用戶(hù)的心智模型，其實(shí)視覺(jué)設(shè)計(jì)也一樣。把一些現(xiàn)實(shí)元素拿來(lái)，模擬真實(shí)世界，會(huì)給用戶(hù)身臨其境的感覺(jué)。

 

　　微電臺(tái)首頁(yè)中，節(jié)目下方的刻度就模擬了收音機(jī)的調(diào)頻設(shè)計(jì)。而音樂(lè)盒的設(shè)計(jì)更精彩，唱片機(jī)的樣式與轉(zhuǎn)動(dòng)效果，讓用戶(hù)感覺(jué)真的在聽(tīng)唱片一樣。

 

插圖讓產(chǎn)品更有情感

　　插圖在微博中很多，我這里只舉錯(cuò)誤頁(yè)的例子。大家都有感觸，錯(cuò)誤的體驗(yàn)是非常不好的，但設(shè)計(jì)師卻用一張張插圖，讓這種挫敗和焦躁的感覺(jué)降到了最低。毛衣針斷掉的尷尬、面面相覷的活動(dòng)氣球和投票柱子，都幽默地化解了用戶(hù)的負(fù)面情緒，同時(shí)產(chǎn)品也更有味道了。

　　值得一提的是微群的設(shè)計(jì)，前面我們說(shuō)到，微群的品牌元素是：星球、飛船和人。在這個(gè)品牌定位下，幾種錯(cuò)誤情況就很好表現(xiàn)啦，我不說(shuō)，大家自己看吧。

巧用Icon，頁(yè)面更精彩

　　Icon設(shè)計(jì)是視覺(jué)設(shè)計(jì)非常重要的一部分，很多晦澀難懂的內(nèi)容，配上Icon圖形化解釋?zhuān)瑫?huì)更容易理解。相反，如果圖標(biāo)的設(shè)計(jì)元素不合適，或是將圖標(biāo)將背景亂用，也會(huì)干擾用戶(hù)理解。

　　微博大屏幕首頁(yè)，設(shè)計(jì)師用了3個(gè)Icon，配合文案解釋了什么是大屏幕。

　　各產(chǎn)品幫助頁(yè)，也常常出現(xiàn)Icon。幫助頁(yè)類(lèi)似于產(chǎn)品的說(shuō)明書(shū)，很多內(nèi)容堆在里面，通過(guò)圖標(biāo)的區(qū)分，用戶(hù)很容易按類(lèi)別查找到所需要的信息。

柵格化提升用戶(hù)體驗(yàn)和開(kāi)發(fā)成本

　　柵格化在視覺(jué)設(shè)計(jì)中，越來(lái)越受重視，究其原來(lái)，主要是三點(diǎn)：一是可以統(tǒng)一頁(yè)面的布局，提升用戶(hù)的瀏覽操作體驗(yàn);二是將頁(yè)面模塊的尺寸標(biāo)準(zhǔn)化，降低開(kāi)發(fā)和維護(hù)的成本;最后，柵格化也是網(wǎng)頁(yè)設(shè)計(jì)專(zhuān)業(yè)度的體現(xiàn)。

　　微博主站的設(shè)計(jì)中采用了柵格化體系，柵格寬度為20px，間隙為10px(整個(gè)頁(yè)面寬為950px)。寫(xiě)博文時(shí)，我翻看了一下各產(chǎn)品的遵循情況，大多不錯(cuò)，其中最好的應(yīng)該是微公益。

　　至此，視覺(jué)設(shè)計(jì)原則講完了。

　　說(shuō)了這么多，最后簡(jiǎn)單談?wù)勛鳛榻换ピO(shè)計(jì)師的我們?cè)撛趺醋霭伞Ｋ伎歼@個(gè)問(wèn)題之前，還請(qǐng)大家把以上的原則再?gòu)?fù)習(xí)一遍：

1. 通過(guò)字體表達(dá)產(chǎn)品風(fēng)格

2. 通過(guò)配色展示產(chǎn)品定位

3. 營(yíng)造統(tǒng)一的品牌形象

4. 造型讓產(chǎn)品更有沖擊力

5. 重要內(nèi)容留在首屏

6. 讓頁(yè)面有層次有重點(diǎn)

7. 模擬現(xiàn)實(shí)世界匹配用戶(hù)心智模型

8. 插圖讓產(chǎn)品更有情感

9. 巧用Icon頁(yè)面更精彩

10. 柵格化提升用戶(hù)體驗(yàn)和開(kāi)發(fā)成本

　　總的來(lái)說(shuō)，我們可以把這10個(gè)內(nèi)容歸成兩類(lèi)，一個(gè)完全是視覺(jué)設(shè)計(jì)師的領(lǐng)域，以溝通為主;另一個(gè)，交互可以和視覺(jué)設(shè)計(jì)配合完成，溝通以外注重交付物的傳遞。

　　第一類(lèi)包括：通過(guò)字體表達(dá)產(chǎn)品風(fēng)格、通過(guò)配色展示產(chǎn)品定位、營(yíng)造統(tǒng)一的品牌形象、造型讓產(chǎn)品更有沖擊力、模擬現(xiàn)實(shí)世界匹配用戶(hù)心智模型。

　　了解這些內(nèi)容，了解視覺(jué)設(shè)計(jì)師能做哪些提升體驗(yàn)的事情，才能更好地和他們溝通。讓視覺(jué)設(shè)計(jì)師提早了解需求，獲得對(duì)等的產(chǎn)品信息，才能更好地發(fā)揮設(shè)計(jì)的力量。

　　第二類(lèi)包括：重要內(nèi)容留在首屏、讓頁(yè)面有層次有重點(diǎn)、插圖讓產(chǎn)品更有情感、巧用Icon頁(yè)面更精彩、柵格化提升用戶(hù)體驗(yàn)和開(kāi)發(fā)成本。

　　這類(lèi)原則，除了和視覺(jué)設(shè)計(jì)師有效溝通，最好在自己的交付物——原型以及講解中有所體現(xiàn)。比如原型中通過(guò)不同灰度色塊表現(xiàn)設(shè)計(jì)重點(diǎn)、注重各個(gè)組件的柵格化、為重點(diǎn)內(nèi)容設(shè)置插圖和Icon的占位符等等。通過(guò)這種對(duì)視覺(jué)設(shè)計(jì)的理解、交付物形式的傳遞，配合視覺(jué)設(shè)計(jì)師做出更符合產(chǎn)品需求以及用戶(hù)體驗(yàn)的產(chǎn)品。

分享名稱(chēng)：做交互應(yīng)該知道的視覺(jué)幾件事
分享網(wǎng)址：http://bm7419.com/news/166186.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、手機(jī)網(wǎng)站建設(shè)、域名注冊(cè)、網(wǎng)站排名、ChatGPT

廣告

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