為什么要談?wù)?a href="http://81jnr2m.cn/bbs-69-1.html" target="_blank" class="relatedlink">聯(lián)想終結(jié)者S9的界面設(shè)計(jì)呢?原因很簡(jiǎn)單,因?yàn)槲以诳吹浇K結(jié)者S9的界面之后,有種似曾相識(shí)的感覺(jué),因?yàn)檫@個(gè)界面與之前我測(cè)試過(guò)的K82和S31有著相同點(diǎn),但也有不同點(diǎn)。
之前在體驗(yàn)會(huì)上與聯(lián)想的產(chǎn)品經(jīng)理溝通,其介紹到終結(jié)者S9在在界面上使用糖果色UI和扁平化圖標(biāo)設(shè)計(jì)...
所以,我整理了下思路,與各位一起來(lái)看看終結(jié)者S9在UI設(shè)計(jì)上的進(jìn)步點(diǎn),最后會(huì)一起探討一下該款產(chǎn)品的人機(jī)交互體驗(yàn)(軟硬結(jié)合)。
161322strnnxfzraiycryt.jpg.thumb.jpg (65.57 KB, 下載次數(shù): 27)
下載附件
保存到相冊(cè)
2014-4-19 13:27 上傳
一、唯一主色調(diào)
要討論唯一主色調(diào)的意義是什么呢?在iphone、微軟將扁平化風(fēng)格變成大潮流時(shí)我們看到越來(lái)越多唯一主色調(diào)風(fēng)格的設(shè)計(jì),會(huì)采用簡(jiǎn)單的漸變,配套漸變來(lái)展現(xiàn)信息層次,但是絕不采用更多的顏色。
聯(lián)想智能電視終結(jié)者S9的唯一主色調(diào)為藍(lán)色。從背景、選擇圖標(biāo)、標(biāo)簽頁(yè)、按鈕等等都一藍(lán)色為主,配以黑色、白色形成視覺(jué)反差。僅僅3種顏色就能夠在終結(jié)者S9全局的UI布局中產(chǎn)生了很好的信息傳達(dá)效果,也具有良好的視覺(jué)表現(xiàn)力。
也就是說(shuō)聯(lián)想智能電視終結(jié)者S9采用唯一主色調(diào)設(shè)計(jì),減少冗余信息的干擾,讓使用者在整塊50英寸的屏幕上更專(zhuān)注于主要信息的獲取。
這一點(diǎn),在聯(lián)想之前的其他智能電視上也有體現(xiàn)。
161433tn6cwxzwtbzg4bng.jpg.thumb.jpg (91.38 KB, 下載次數(shù): 25)
下載附件
保存到相冊(cè)
2014-4-19 13:27 上傳
與此同時(shí):在谷歌對(duì)智能電視開(kāi)發(fā)方案中為開(kāi)發(fā)者提到了謹(jǐn)慎地使用純白色(#FFFFFF)。純白色在電視屏幕上會(huì)引起振動(dòng)或圖像重影。用#F1F1F1(hex)或者240/240/240(RGB)來(lái)代替使用純白色。這一點(diǎn)聯(lián)想智能電視終結(jié)者S9在唯一主色調(diào)上做的很好~~
避免使用明亮的白色系,紅色系和橙色系,因?yàn)檫@些顏色在電視上顯示會(huì)特別嚴(yán)重的失真。
二、多彩色
多色彩是各種數(shù)碼產(chǎn)品里必然會(huì)體現(xiàn)出的色彩元素。為什么小芭比我還要在這里提出呢?聯(lián)想智能電視終結(jié)者S9具有藍(lán)色的唯一主色調(diào),在主界面上的扁平化圖標(biāo)上采用糖果色設(shè)計(jì)。
第一視覺(jué)優(yōu)勢(shì):用鮮亮的多彩色來(lái)區(qū)分信息,確實(shí)能起到突出的效果,視覺(jué)上極其醒目。不同頁(yè)面、不同信息組塊采用糖果色的方式提升視覺(jué)感,并且與藍(lán)色的唯一主色調(diào)并不沖突。
操作上的優(yōu)勢(shì)呢?配合一鍵智能空鼠,在大塊的扁平化圖標(biāo)界面上,便于實(shí)現(xiàn)盲操,這一點(diǎn)一會(huì)詳細(xì)嘮叨一下。
聯(lián)想的UI設(shè)計(jì)師很聰明的一點(diǎn)的將付費(fèi)專(zhuān)區(qū)、海外電影使用紅色扁平化圖標(biāo)來(lái)顯示,紅色是“凸顯”色彩,會(huì)刺激人去點(diǎn)擊。3D專(zhuān)區(qū)和藍(lán)光專(zhuān)區(qū)也做成圖標(biāo)放置在桌面上,方便用戶(hù)操作。而這兩點(diǎn)是我認(rèn)為聯(lián)想作為一個(gè)國(guó)際大企業(yè)要對(duì)企業(yè)股東負(fù)責(zé)的盈利需求和帶來(lái)用戶(hù)體驗(yàn)的復(fù)雜情懷。
162459no2plgl4dsollnkl.jpg.thumb.jpg (96.6 KB, 下載次數(shù): 26)
下載附件
保存到相冊(cè)
2014-4-19 13:27 上傳
三、內(nèi)容更突出
與內(nèi)容相比,所有的設(shè)計(jì)和包裝,都不外乎是一種表現(xiàn)手法,而真正具有價(jià)值的操作界面,一定是內(nèi)容取勝的。這個(gè)內(nèi)容與操作界面的使用圖標(biāo)和文字有密切的關(guān)系。
在終結(jié)者S9上的內(nèi)容顯示,完全以白色字體為主。字體的選擇也避免纖細(xì)字體或者有過(guò)寬、過(guò)窄筆畫(huà)的字體。使用簡(jiǎn)單無(wú)襯線(xiàn)字體并選用抗鋸齒功能來(lái)增加易讀性,這點(diǎn)對(duì)于手頭上測(cè)試的終結(jié)者S9超高的4K分辨率而言很重要。
簡(jiǎn)而言之呢 在內(nèi)容的顯示上有以下幾個(gè)優(yōu)勢(shì):
1、每個(gè)段落似乎限制了字?jǐn)?shù)。
2、將長(zhǎng)句改為幾個(gè)短句,讓用戶(hù)可以快速瀏覽。
3、在電視上,在深色背景上的淺色文字比在淺色背景上的深色文字更容易閱讀。
4、行距足夠大
165908je4o4hszm15rxlm4.jpg.thumb.jpg (77.29 KB, 下載次數(shù): 24)
下載附件
保存到相冊(cè)
2014-4-19 13:27 上傳
這些效果,帶來(lái)的特性是讓用戶(hù)更便于閱讀,而不是看到密密麻麻的文字之后,直接放棄閱讀。
四、交互
關(guān)于終結(jié)者S9的交互,不僅僅是軟件上的設(shè)計(jì)。而是包含一鍵智能空鼠在內(nèi)的軟硬結(jié)合的交互設(shè)計(jì)。
其優(yōu)秀的交互內(nèi)容是,在全部狀態(tài)下確??刂萍^可以導(dǎo)航至屏幕上所有可見(jiàn)的控件。在多個(gè)項(xiàng)目在應(yīng)用程序中選擇,可能清楚得知道自己現(xiàn)在選擇的是哪一項(xiàng)。
最主要的是使用一鍵智能空鼠在選中某一項(xiàng)內(nèi)容之后,這個(gè)列表仍然能夠滾動(dòng)(設(shè)置頁(yè)面)。
171100tcgms0mcq8g7afbc.jpg.thumb.jpg (76.4 KB, 下載次數(shù): 25)
下載附件
保存到相冊(cè)
2014-4-19 13:27 上傳
交互最終的意義是便于用戶(hù)的操作,提高用戶(hù)的操作效率,這一點(diǎn)終結(jié)者S9做到了。
五、高效
智能電視不得不談的是高效!通過(guò)一番使用,一鍵智能空鼠帶來(lái)的高效體驗(yàn)比使用傳統(tǒng)遙控器要有意義多了。這里不用廢話(huà),直接看圖。
172227tnh5agavyh6p5pgb.jpg.thumb.jpg (42.34 KB, 下載次數(shù): 24)
下載附件
保存到相冊(cè)
2014-4-19 13:27 上傳
在終結(jié)者S9下使用一鍵智能空鼠可以直接從左上角的“葡萄游戲廳”圖標(biāo)移動(dòng)到右下角的“樂(lè)商店”,只需要一步操作。
172228kszshjt7tisi0pst.jpg.thumb.jpg (42.26 KB, 下載次數(shù): 24)
下載附件
保存到相冊(cè)
2014-4-19 13:27 上傳
而傳統(tǒng)遙控器需要完成這樣的操作則是需要將光標(biāo)移動(dòng)左上角移動(dòng)到右上角,再移至右下角,需要7步操作。
有朋友問(wèn),使用鼠標(biāo)也可完成這樣一鍵智能空鼠的操作呀。對(duì),但使用鼠標(biāo)的話(huà)需要在桌面或者平面上,且不具有一鍵智能空鼠的體感和語(yǔ)音輸入。
在終結(jié)者S9上可以看到,高效的人機(jī)交互,是軟硬件結(jié)合才可以完成的。
六、情懷
關(guān)照用戶(hù)的情懷體現(xiàn)在細(xì)節(jié)上,如圖:
173333kdnskl8nullgyozk.jpg.thumb.jpg (87.39 KB, 下載次數(shù): 27)
下載附件
保存到相冊(cè)
2014-4-19 13:27 上傳
個(gè)人認(rèn)為,產(chǎn)品操作的體驗(yàn)度,對(duì)用戶(hù)關(guān)照的情懷才是人機(jī)交互設(shè)計(jì)的最根本意義,對(duì)于這點(diǎn),我都快感動(dòng)的哭了。
|