2012-5-4 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源:http://cued.xunlei.com/log022
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里
很多網(wǎng)頁設(shè)計(jì)師認(rèn)為自己做好設(shè)計(jì)就可以,其他的事可不用理會和學(xué)習(xí),那就大錯(cuò)特錯(cuò)了!一個(gè)優(yōu)秀的設(shè)計(jì)師,必須深入了解產(chǎn)品本身、相關(guān)交互結(jié)構(gòu)及用戶體驗(yàn)等常識!這樣設(shè)計(jì)師設(shè)計(jì)的東西才能深入產(chǎn)品中去,避免不犯錯(cuò)誤! 設(shè)計(jì)來源生活和思考,同樣作為一個(gè)網(wǎng)頁設(shè)計(jì)師,要不斷地學(xué)習(xí)、思考、分析產(chǎn)品才能設(shè)計(jì)出更好的作品 !
這里主要與迅雷看看 產(chǎn)品為例,談設(shè)計(jì)及用戶體驗(yàn)的點(diǎn)點(diǎn)滴滴!希望對剛跨入網(wǎng)頁設(shè)計(jì)這行的童鞋們有所幫助!
主要兩個(gè)方面講:
● 了解產(chǎn)品需求設(shè)計(jì) (以迅雷看產(chǎn)品為例)
● 交互設(shè)計(jì)與視覺設(shè)計(jì)
首先講下第一方面:
● 了解產(chǎn)品需求設(shè)計(jì) (以迅雷看產(chǎn)品為例)又 主要從四點(diǎn)來分析說明:
1. 迅雷看看知多少
2. 看看設(shè)計(jì)師面對的用戶及關(guān)系
3. 迅雷看看設(shè)計(jì)要求
4. 迅雷看看具體規(guī)范
第一點(diǎn):迅雷看看知多少
迅雷看看與優(yōu)酷、奇藝、土豆、酷6等視頻類網(wǎng)站,技術(shù)上最大的區(qū)別是什么?迅雷看看和優(yōu)酷、土豆、酷6等視頻網(wǎng)站從內(nèi)容上說區(qū)別又是什么呢?迅雷看看用戶使用的電腦分辨率比例是怎樣呢?我們得知后,對我們設(shè)計(jì)有什么幫助,該注意什么事項(xiàng)等等都需要設(shè)計(jì)師深入了解產(chǎn)品后,才得到更好的結(jié)論!
2011年8月份數(shù)據(jù):網(wǎng)站排名
權(quán)威數(shù)據(jù)監(jiān)測機(jī)構(gòu)艾瑞提供
2011年8月份數(shù)據(jù): 迅雷看看播放器排名
迅雷看看排在所有視頻網(wǎng)站第三位,看看播放器排在第二位!流量和用戶如此之大,有人會問這關(guān)我們設(shè)計(jì)師有啥事呢?當(dāng)然有事!這就要求我們在設(shè)計(jì)的時(shí)候,嚴(yán)格要求自己,一個(gè)小小錯(cuò)誤或者一個(gè)像素拖動都將會導(dǎo)致有不同的轉(zhuǎn)化率出現(xiàn),也會影響網(wǎng)站的用戶體驗(yàn),所以面向海量的用戶群,更要求我們設(shè)計(jì)師本身做設(shè)計(jì)的時(shí)候要更嚴(yán)謹(jǐn)更注重產(chǎn)品細(xì)節(jié)。
迅雷看看的架構(gòu)線
了解迅雷看看產(chǎn)品框架線,設(shè)計(jì)師設(shè)計(jì)的時(shí)候才能深入處理好相互之間的關(guān)系及風(fēng)格的統(tǒng)一!
還需要了解迅雷看看用戶分辨率、 瀏覽器、 用戶操作系統(tǒng)這些數(shù)據(jù),以便我們更容易做跨平臺的設(shè)計(jì)。
第二點(diǎn):看看設(shè)計(jì)師面對的用戶及關(guān)系
作為一個(gè)設(shè)計(jì)師,不僅需要了解該產(chǎn)品的用戶群體,設(shè)計(jì)出符合用戶口味的風(fēng)格,當(dāng)然還要符合產(chǎn)品本身特征的風(fēng)格定位!但更重要的是您了解該產(chǎn)品的產(chǎn)品經(jīng)理想要一個(gè)什么樣的東西,處理好之間的關(guān)系,便于加強(qiáng)溝通,這樣才能設(shè)計(jì)出好的產(chǎn)品!
第三點(diǎn):迅雷看看設(shè)計(jì)要求
主色調(diào)的統(tǒng)一
眾所周知,迅雷看看的主色調(diào)是藍(lán)色,設(shè)計(jì)時(shí)注意保持統(tǒng)一。像新浪是黃色 奇藝是綠色 土豆是黃色,優(yōu)酷的是藍(lán)色一樣等,都有自己的色調(diào)體系!
整體把握
了解整個(gè)互聯(lián)網(wǎng)視頻網(wǎng)站的風(fēng)格定位及方向,結(jié)合自身的特點(diǎn),做到,內(nèi)容最大,用戶體驗(yàn)其次, 最后才是視覺設(shè)計(jì)。
第四點(diǎn): 迅雷看看具體規(guī)范
Logo、字間距、頁面尺寸、版本間距、每個(gè)像素、鏈接顏色、字體、圖片大小、圖標(biāo)、整體視覺風(fēng)格等都要受到關(guān)注和有條理的統(tǒng)一。
風(fēng)格的統(tǒng)一,可以說就是細(xì)節(jié)的統(tǒng)一, 細(xì)節(jié)決定成敗 !
接下來第二方面:
● 交互設(shè)計(jì)與視覺設(shè)計(jì) 主要從四點(diǎn)來分析說明:
1.什么UED
2.用戶體驗(yàn)的重要性
3.交互與視覺設(shè)計(jì)間的關(guān)系
4. 如何提高自己的交互能力
第一點(diǎn):什么是UED
用戶體驗(yàn)(User Experience Design,簡稱UED)是一種純主觀的在用戶使用一個(gè)產(chǎn)品(服務(wù))的過程中建立起來的心理感受。因?yàn)樗羌冎饔^的,就帶有一定的不確定因素。
用戶體驗(yàn)主要是來自用戶和人機(jī)界面的交互過程。
一句話:以用戶為中心、以人為本
第二點(diǎn): 用戶體驗(yàn)的重要性
1、提高用戶的回訪率(用戶黏度);
2、增強(qiáng)品牌氣質(zhì)的影響力和用戶的榮譽(yù)感(口碑);
3、提高產(chǎn)品持續(xù)獲取利潤的能力
4、提高產(chǎn)品的用戶滿意度、為品牌帶來不可估價(jià)的口碑;
5、增強(qiáng)用戶對品牌的忠誠度和信任度;
6、合理而的促進(jìn)用戶點(diǎn)擊欲望
7、是超越競爭對手最有深遠(yuǎn)影響的一個(gè)重要方面
第三點(diǎn): 交互與視覺設(shè)計(jì)的關(guān)系
用戶體驗(yàn)以用戶為中心,交互設(shè)計(jì)是圍繞用戶體驗(yàn)展開設(shè)計(jì)的,而視覺設(shè)計(jì)是交互設(shè)計(jì)為中心的!
可以說,離開交互設(shè)計(jì)即用戶體驗(yàn)的設(shè)計(jì),必定是一個(gè)失敗的視覺設(shè)計(jì),
即使你的視覺設(shè)計(jì)再好再牛B,那也不過是畫蛇添足罷了!
交互設(shè)計(jì)與視覺設(shè)計(jì)成正比,
好的設(shè)計(jì),離不開好的交互設(shè)計(jì)做基石! 交互設(shè)計(jì)要求我們細(xì)致,視覺簡潔清爽,易學(xué)易懂,當(dāng)自己是個(gè)挑剔的、笨的用戶。
第四點(diǎn): 設(shè)計(jì)師如何提高自己的交互能力
1.多看,多用,多研究用戶體驗(yàn)好的網(wǎng)站(如amazon.com、yahoo.com)
2.做的設(shè)計(jì)時(shí)候,不斷滴思考和推敲是否可以有更好的改進(jìn),讓視覺和體驗(yàn)得到完美的釋放!
3.分析網(wǎng)站的競爭對手,同樣的東西它好在哪里,為什么這樣做等!
4.設(shè)計(jì)流程圖能力
5.表達(dá)能力
始終明確改善、用戶及數(shù)據(jù)之間的關(guān)系
“改善”是手段, “用戶”是核心,“數(shù)據(jù)”是根據(jù).
舉例說明,設(shè)計(jì)如何提高自己獨(dú)立思考及交互能力
迅雷7上交互和體驗(yàn)上的問題
迅雷7“下載完成后關(guān)機(jī)”按鈕設(shè)置完成后,跳出的提示框。當(dāng)您操作的時(shí)候,粗略操作下!你很容易發(fā)現(xiàn)“取消完成后關(guān)機(jī)”與“關(guān)閉”按鈕靠的太近,用戶容易誤操作;”關(guān)閉“按鈕白色,不明顯,很容易忽略!
接下來,設(shè)計(jì)師就可以解決這樣的問題!如下圖:
我們只要移下位置,關(guān)閉按鈕換成提示框背景色一色系更深的顏色即可,顏色看上不就不會突兀!” 取消完成后關(guān)機(jī)“文字也可以精煉成”取消開啟“即可,用戶很好理解,它與前句呼應(yīng)的關(guān)系!
當(dāng)你做到這個(gè)時(shí)候,遠(yuǎn)遠(yuǎn)還不夠!試問自己能不能更好呢?這時(shí)設(shè)計(jì)師需要去思考!才能用戶體驗(yàn)更完美!
我們都知道,在網(wǎng)頁設(shè)計(jì)里黃色一般表示”警示、提示、提醒、告知“的含義,而綠色表示:“通行、健康、環(huán)保、成功”的含義,顧提示框的顏色有問題,很容易被人忽略,沒到達(dá)到告知、提示用戶的目的!再深入思考,不難發(fā)現(xiàn),提示框的出現(xiàn)的位置也有問題,用戶粗略一看不知道提示出自哪里!發(fā)現(xiàn)了問題,那我們就可以更深入解決!
如下圖:
這樣話,用戶容易操作,容易發(fā)現(xiàn).也就達(dá)到你設(shè)計(jì)目的!
總結(jié)
設(shè)計(jì)師需要思考,做每一步都是講道理的過程,
設(shè)計(jì)師需要了解,只有了解了產(chǎn)品的特征,才能做出更好的設(shè)計(jì)
設(shè)計(jì)師需要提高自身的交互能力,這樣才能避免犯錯(cuò)誤
設(shè)計(jì)師更需要不斷的學(xué)習(xí),提高自己的審美能力和動手能力.
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com