2012-12-29 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源: http://www.54xiaomeng.com/?p=66
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
在日常工作中,我們經(jīng)常會(huì)遇到一些設(shè)計(jì)的很”漂亮”的圖片不被用戶(hù)認(rèn)可,點(diǎn)擊率很低,這時(shí)候我們會(huì)暗地里抱怨,可卻沒(méi)明白問(wèn)題究竟出在哪?
網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)究竟有啥區(qū)別,我們主觀的為頁(yè)面添加元素的時(shí)候是否有章可循,博主以前曾是一名視覺(jué)設(shè)計(jì)菜鳥(niǎo),以自己的切身體會(huì)談?wù)勗赪eb頁(yè)面設(shè)計(jì)中的一些體會(huì)。
下面我們先看一個(gè)專(zhuān)題的banner:
第一眼看上去,畫(huà)面感好像還行,但細(xì)看后會(huì)發(fā)現(xiàn)整個(gè)畫(huà)面沒(méi)有一個(gè)視覺(jué)中心,這張圖片究竟想表達(dá)什么也沒(méi)有說(shuō)清楚,看看上面的元素:女人,模特架,燈光,展廳,衣服。好像表達(dá)了很多,其實(shí)除了設(shè)計(jì)師本人知道這是衣服與配件專(zhuān)題的banner,其他人都一頭霧水。
那我們?cè)倏纯赐瑯又黝}的banner:
畫(huà)面中心的”fashion apparel”告訴我們是賣(mài)時(shí)尚衣物的,圖片元素還告訴我們,這里賣(mài)衣服配飾,鞋,內(nèi)衣,泳帽等等。這個(gè)banner不僅表達(dá)了衣服與配件的主題,還直接告訴了我們種類(lèi)的齊全。
通過(guò)這個(gè)例子我們會(huì)漸漸明白視覺(jué)設(shè)計(jì)的目的:視覺(jué)設(shè)計(jì)的本質(zhì)是為了更好的傳達(dá)信息。
傳達(dá)信息的表現(xiàn)形式:
那么究竟怎樣才能通過(guò)設(shè)計(jì)把需求信息出色的表達(dá)出來(lái),這里面學(xué)問(wèn)很多,我就談一談自己的理解:
1. 產(chǎn)品風(fēng)格 在做設(shè)計(jì)之前,我們先要搞清楚服務(wù)的對(duì)象是誰(shuí),每個(gè)人群的認(rèn)知度不同,設(shè)計(jì)風(fēng)格也要根據(jù)人群的認(rèn)知度而調(diào)整,說(shuō)簡(jiǎn)單點(diǎn)就是要先根據(jù)目標(biāo)人群確定設(shè)計(jì)風(fēng)格。
下面我們?cè)倏纯匆唤Mbanner:
兩者的區(qū)別在于字體發(fā)生了變化,但傳達(dá)出的產(chǎn)品氣質(zhì)卻大相徑庭。”領(lǐng)動(dòng)”是一個(gè)商務(wù)產(chǎn)品,但這個(gè) banner的字體顯然不能表達(dá)商務(wù)人士干凈利索的做事風(fēng)格,對(duì)產(chǎn)品的信任感自然就會(huì)降低,信任感缺失,表達(dá)的文案也就沒(méi)有了任何意義。
所以,設(shè)計(jì)的風(fēng)格要去迎合訪問(wèn)者的喜好。打個(gè)比方,粉色肯定不能用在軍事網(wǎng)站,紅色也不能作為醫(yī)療網(wǎng)站的主色調(diào) 。 產(chǎn)品的視覺(jué)氣質(zhì)就是一種信息的表達(dá) 。
2. 還原物件真實(shí)感
什么叫物件真實(shí)感?我們先看下面的圖片
上圖是iBooks的界面。美觀的內(nèi)容形式,富有真實(shí)感,利用熟悉的木質(zhì)書(shū)架UI使用戶(hù)感到在體驗(yàn)上的自然。
產(chǎn)品的界面是訪客熟悉了解產(chǎn)品的主要途徑,當(dāng)產(chǎn)品的界面接近真實(shí)世界時(shí),用戶(hù)的學(xué)習(xí)成本越低,產(chǎn)品的易用性就會(huì)提高。再看一組太陽(yáng)能主題banner:
對(duì)比兩個(gè)banner,拋開(kāi)一些細(xì)節(jié)的推敲,第二張圖片傳達(dá)的信息明顯比第一張要通俗易懂,設(shè)計(jì)師不能夠主觀的代表用戶(hù)的審美認(rèn)知能力,還原物件的真實(shí)情感,呈現(xiàn)最真實(shí)的產(chǎn)品圖片,是一種很直接的信息表達(dá)方法 。
3. 統(tǒng)一規(guī)范
設(shè)計(jì)沒(méi)有一個(gè)硬性的評(píng)價(jià)標(biāo)準(zhǔn),正是因?yàn)檫@樣設(shè)計(jì)才會(huì)顯得精彩紛呈。但產(chǎn)品用戶(hù)界面的設(shè)計(jì)不能等同于海報(bào)招貼的設(shè)計(jì),在追求差異化和表現(xiàn)力的同時(shí),我們要以傳達(dá)信息為主要目標(biāo),以提高產(chǎn)品的易用性為前提。
我個(gè)人覺(jué)得一個(gè)出色的設(shè)計(jì)并不是讓人眼前一亮的感覺(jué),而是讓用戶(hù)有種進(jìn)自家房間的熟悉感和歸屬感,面對(duì)信息量大的互聯(lián)網(wǎng)頁(yè)面,視覺(jué)設(shè)計(jì)師的職責(zé)就是讓用戶(hù)以最快捷的方式找到需要的信息。
互聯(lián)網(wǎng)發(fā)展至今,大多數(shù)用戶(hù)有自己的定向思維的使用習(xí)慣,如何才能將用戶(hù)界面的設(shè)計(jì)符合用戶(hù)的喜好,就需要去符合主流的視覺(jué)規(guī)范或者制定一個(gè)視覺(jué)規(guī)范。下面看幾個(gè)視覺(jué)規(guī)范的例子: ①元素的統(tǒng)一
② 布局 的統(tǒng)一
上圖是www.Made-in-China.com 的登錄注冊(cè)口,,這塊區(qū)域的可點(diǎn)擊區(qū)域太多,為了保證頁(yè)面的簡(jiǎn)潔的視覺(jué)效果,Button并沒(méi)有保持統(tǒng)一,但是登陸口,注冊(cè)、找回密碼,指南都在同一區(qū)域內(nèi),這是一種行業(yè)規(guī)范的統(tǒng)一,大都數(shù)用戶(hù)都會(huì)意識(shí)到注冊(cè)入口在登陸口的附近,所以注冊(cè)口沒(méi)有做成Button而只是做了一個(gè)簡(jiǎn)單鏈接。
總結(jié): 上面的內(nèi)容都是我到焦點(diǎn)設(shè)計(jì)部這個(gè)新環(huán)境的體會(huì)與感想,這些可能是大家熟悉到忽略的知識(shí)點(diǎn),我希望這些內(nèi)容能夠幫助以后像我一樣的新同事,少點(diǎn)迷茫,樹(shù)立一個(gè)正確的設(shè)計(jì)價(jià)值觀。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com