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

做交互應該知道的視覺幾件事

2022-06-11    分類: 網(wǎng)站建設

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

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

  對于交互設計師來說,視覺設計是合作最多的一環(huán),交互原型終歸要以視覺的形式呈現(xiàn)在用戶眼前。因此,懂些視覺設計,更易于將交互方案傳遞給用戶。同時,交互設計作為多學科交匯的職位,懂些視覺更是自己能力的提高。諸葛亮有句話說的好,什么都略懂一點,生活會多彩一些。

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

通過字體表達產(chǎn)品風格

  視覺設計中,字體的選擇對于產(chǎn)品風格的表現(xiàn)是作用明顯的,同一段文字,用不同字體寫出,感覺確實千差萬別。

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

  勛章館首頁這段煽情的文字通過手寫體(FZJingLeiS-R-GB),以日記的形式,表達出勛章記錄生活、記錄成長的產(chǎn)品感覺,若換成一般字體,感覺也就沒了。

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

  通過配色來展示產(chǎn)品定位,也是設計師必用的方法。視覺設計前期調(diào)研階段,常常通過情緒版提煉適合目標用戶的顏色,形成一整套的配色方案。

  紫色,關鍵詞:優(yōu)雅、高貴、女性、莊重、神圣、成熟、深度、神秘、時尚。微音樂作為音樂首發(fā)平臺的定位,紫色更加彰顯時尚魅力。

 

  紅色,關鍵詞:藝術、熱烈、開放、激情、積極、活力、喜慶、生命、成熟。微直播要體現(xiàn)直播的盛況,充滿激情的紅色就非常適合。

 

  藍色,關鍵詞:理智、知性、公正、商務、科技、嚴格、細致、嚴謹、公式化。投票的公正性,以及微數(shù)據(jù)的理性、嚴謹,注定產(chǎn)品要以藍色為主色調(diào)。

 

  橙色,關鍵詞:陽光、輝煌、活動、溫暖、記憶、家庭、健康、快樂。微活動的參與感、風云榜的輝煌,當然也少不了橙色調(diào)的烘托。

 

  綠色,關鍵詞:成長、樸素、公益、生命、安全、新鮮、和平、春天、大自然。微博達人是面向草根用戶的一款產(chǎn)品,他們通過在微博上的行為,一點點成為某個領域的草根明星,綠色的配色很符合這種成長的感覺,微公益就不多說了,肯定綠色最適合啦。

 

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

  品牌形象是一個很大的領域,具體到某個微博產(chǎn)品的品牌感,更多的還是通過視覺形象來傳達。這就需要視覺設計師制定一套系統(tǒng)的視覺體系,讓用戶看一眼,就能清晰地辨認。

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

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

 

  新手引導中,也巧妙地將這種元素融入進來,既形象,又增強了品牌感。

  群的等級,用星球上的樹木來體現(xiàn),等級越高,樹木越茂盛。

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

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

  視覺設計中,夸張的造型對用戶的沖擊力非常大,很容易一下抓住用戶,這種設計常出現(xiàn)在專題頁面和個性皮膚中。

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

 

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

 

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

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

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

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

 

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

讓頁面有層次有重點

  交互設計師完成頁面布局設計,突出頁面重點,方便用戶瀏覽信息、完成任務。視覺設計階段,好的設計稿對于延續(xù)前期交互理念,引導用戶操作是非常有幫助的。

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

 
 

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

 

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

  原型設計中常說,操作方式要符合用戶的心智模型,其實視覺設計也一樣。把一些現(xiàn)實元素拿來,模擬真實世界,會給用戶身臨其境的感覺。

 

  微電臺首頁中,節(jié)目下方的刻度就模擬了收音機的調(diào)頻設計。而音樂盒的設計更精彩,唱片機的樣式與轉(zhuǎn)動效果,讓用戶感覺真的在聽唱片一樣。

 

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

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

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

巧用Icon,頁面更精彩

  Icon設計是視覺設計非常重要的一部分,很多晦澀難懂的內(nèi)容,配上Icon圖形化解釋,會更容易理解。相反,如果圖標的設計元素不合適,或是將圖標將背景亂用,也會干擾用戶理解。

  微博大屏幕首頁,設計師用了3個Icon,配合文案解釋了什么是大屏幕。

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

柵格化提升用戶體驗和開發(fā)成本

  柵格化在視覺設計中,越來越受重視,究其原來,主要是三點:一是可以統(tǒng)一頁面的布局,提升用戶的瀏覽操作體驗;二是將頁面模塊的尺寸標準化,降低開發(fā)和維護的成本;最后,柵格化也是網(wǎng)頁設計專業(yè)度的體現(xiàn)。

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

  至此,視覺設計原則講完了。

  說了這么多,最后簡單談談作為交互設計師的我們該怎么做吧。思考這個問題之前,還請大家把以上的原則再復習一遍:

1. 通過字體表達產(chǎn)品風格

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

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

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

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

6. 讓頁面有層次有重點

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

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

9. 巧用Icon頁面更精彩

10. 柵格化提升用戶體驗和開發(fā)成本

  總的來說,我們可以把這10個內(nèi)容歸成兩類,一個完全是視覺設計師的領域,以溝通為主;另一個,交互可以和視覺設計配合完成,溝通以外注重交付物的傳遞。

  第一類包括:通過字體表達產(chǎn)品風格、通過配色展示產(chǎn)品定位、營造統(tǒng)一的品牌形象、造型讓產(chǎn)品更有沖擊力、模擬現(xiàn)實世界匹配用戶心智模型。

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

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

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

文章名稱:做交互應該知道的視覺幾件事
分享路徑:http://m.rwnh.cn/news36/166186.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、網(wǎng)站排名、營銷型網(wǎng)站建設、面包屑導航、關鍵詞優(yōu)化網(wǎng)站導航

廣告

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

營銷型網(wǎng)站建設
滁州市| 滕州市| 乌兰浩特市| 合水县| 龙胜| 江孜县| 社旗县| 靖州| 林芝县| 清镇市| 繁峙县| 象山县| 海口市| 岑巩县| 城步| 碌曲县| 泰兴市| 岐山县| 伊金霍洛旗| 苏尼特左旗| 孝义市| 湖南省| 钟山县| 嵊泗县| 醴陵市| 含山县| 米泉市| 海晏县| 攀枝花市| 克东县| 海淀区| 息烽县| 安多县| 金秀| 栾城县| 灵丘县| 宁波市| 钟山县| 新源县| 福清市| 印江|