創(chuàng)維天賜3.0至4.0 UI設(shè)計(jì)演化說(shuō)明

一、 創(chuàng)維天賜4.0 UI產(chǎn)生的基礎(chǔ) EasyfaceUI即俗稱的圓環(huán)UI界面，是基于創(chuàng)維自主研發(fā)的創(chuàng)維天賜系統(tǒng)1.0基礎(chǔ)上的第一套視覺(jué)界面，設(shè)計(jì)初期考慮的是配合展現(xiàn)創(chuàng)維天賜系統(tǒng)具備懸浮、多任務(wù)、跨界看、開(kāi)機(jī)快及盲操作的特點(diǎn)而設(shè)計(jì)的一款具有界面小巧、操作模式自然、尊重用戶、不打斷用戶的視覺(jué)操作界面。

二、 Cooface5.0視覺(jué)設(shè)計(jì)歷程： Cooface5.0在設(shè)計(jì)構(gòu)思階段進(jìn)行了長(zhǎng)達(dá)一個(gè)月的醞釀以及多輪設(shè)計(jì)思考。在Demo1-Demo5階段，輸出了接近二十種設(shè)計(jì)方案方向，在這個(gè)階段中，設(shè)計(jì)團(tuán)隊(duì)逐漸理清了設(shè)計(jì)重點(diǎn)及設(shè)計(jì)方向，并找到了不是設(shè)計(jì)亮點(diǎn)作為后面設(shè)計(jì)的積累。接著在與公司高層的多次交流后，明確了新的設(shè)計(jì)方向，并順利地推出了Demo6，即現(xiàn)在Cooface5.0的設(shè)計(jì)雛形。接著，在此基礎(chǔ)上，又細(xì)化到第八版時(shí)，Cooface5.0的設(shè)計(jì)已經(jīng)基本確定。

3.jpg (41.02 KB, 下載次數(shù): 6)

下載附件  保存到相冊(cè)

2014-7-8 10:57 上傳

4.jpg (36 KB, 下載次數(shù): 6)

下載附件  保存到相冊(cè)

2014-7-8 10:57 上傳

5.jpg (32.31 KB, 下載次數(shù): 7)

下載附件  保存到相冊(cè)

2014-7-8 10:57 上傳

在主頁(yè)設(shè)計(jì)確認(rèn)后，設(shè)計(jì)組即分工展開(kāi)全套UI的設(shè)計(jì)工作，并將其一一推進(jìn)落實(shí)在產(chǎn)品上。 三、 UI設(shè)計(jì)思路： 在視覺(jué)體驗(yàn)方面，Cooface5.0電視 UI采用方與圓的設(shè)計(jì)元素相結(jié)合。整體風(fēng)格趨于扁平化、色塊化、線條化。以去繁從簡(jiǎn)的扁平化風(fēng)格為導(dǎo)向，結(jié)合線條化icon;在顏色選擇上以彩虹色為主題，布局以彩虹順色為思路順延，紅、橙、黃、綠、藍(lán)、靛、紫這些大家熟悉的色系。由于彩色的融入，整體視覺(jué)更具靈動(dòng)與變化。方形的色塊設(shè)計(jì)使得整體界面布局簡(jiǎn)潔大方，圓形的Icon設(shè)計(jì)提升了整個(gè)界面的靈動(dòng)性，也是對(duì)COOFACE4.0圓環(huán)UI在細(xì)節(jié)上的一個(gè)延續(xù)。在色彩選擇上，選擇了純度較高，但是明度適中的顏色，使得色彩明亮、豐富的同時(shí)，又很好地保護(hù)了眼睛，不會(huì)產(chǎn)生色彩疲勞。根據(jù)市場(chǎng)調(diào)研結(jié)果顯示，目前這套色彩的用戶接受度也比較高。 整套UI的設(shè)計(jì)是基于創(chuàng)維天賜4.0的懸浮理念，即任何的操作都不會(huì)被打斷，用戶可以在使用的時(shí)候很方便的返回到之前的操作。減輕了用戶對(duì)于未知操作的心里負(fù)擔(dān)。使的整套UI的操作更加的簡(jiǎn)潔、安全。 四、 項(xiàng)目輸出： 整個(gè)項(xiàng)目設(shè)計(jì)團(tuán)隊(duì)輸出設(shè)計(jì)規(guī)范。包含色塊尺寸及形式，焦點(diǎn)及非焦點(diǎn)狀態(tài)，海報(bào)尺寸及推送形式，焦點(diǎn)及非焦點(diǎn)狀態(tài)。色塊與色塊、色塊與海報(bào)的形式及間隔。色塊的顏色規(guī)范；海報(bào)設(shè)計(jì)規(guī)范；字號(hào)、字體及顏色；圖標(biāo)的大小、形式及比例，等等。