轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.alimai.net  )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)

來(lái)源：http://labs.chinamobile.com/news/design/97279

相信大家一談到手機(jī)基本就是以蘋(píng)果iphone 為話題，因?yàn)槿巳硕伎渌到y(tǒng)好，UI設(shè)計(jì)好看又人性化，深深的映入了人的心里。隨著蘋(píng)果手機(jī)系統(tǒng)iOS7在中秋節(jié)的發(fā)布，新的設(shè)計(jì)潮流席卷而來(lái)。

前一段時(shí)間，spark界面設(shè)計(jì)公司 邵飛，同時(shí)又是星獅創(chuàng)想（www.si27.com）的UI設(shè)計(jì)深資授課老師，在網(wǎng)上發(fā)布了一篇關(guān)于《IOS7視覺(jué)/交互設(shè)計(jì)測(cè)試講解》的文章，這是邵飛老師自己用過(guò)IOS7之后寫(xiě)出了自己的想法和體會(huì),下面跟大家一起分享邵飛老師的這篇文章吧。

首先個(gè)人對(duì) iOS7的整體視覺(jué)風(fēng)格是非常喜歡的，還記得之前WWDC發(fā)布會(huì)上iOS7的亮相，戳瞎了很多用戶的眼睛，當(dāng)時(shí)心中難免會(huì)有一絲失望，現(xiàn)在想想，可能是因 為老喬的離去，融入了一些個(gè)人情感在里面。蘋(píng)果一直有他自己的規(guī)則，規(guī)范著用戶和開(kāi)發(fā)者，例如我們的icon在桌面上永遠(yuǎn)被限制在 114px＊114px、20px圓角的區(qū)域里，但是這讓apple產(chǎn)品更加精美，更加規(guī)范。iOS7的整體視覺(jué)無(wú)疑圍繞著”扁平化”這三個(gè)字，那么”扁 平化”的理念是什么，僅僅就是變的更加簡(jiǎn)潔？”扁平化”的視覺(jué)設(shè)計(jì)更給我們帶來(lái)什么？對(duì)此我有我自己的看法。

為了讓圖標(biāo)更吸引人、識(shí)別性更 高，視覺(jué)設(shè)計(jì)工作者為用戶提供了一種與物體非常貼近的設(shè)計(jì)－”擬物化”設(shè)計(jì)，那些精致的圖標(biāo)一直讓用戶愛(ài)不釋手，我作為一名設(shè)計(jì)者，一直瘋狂迷戀著”擬物 化”，這些擬物的圖標(biāo)能讓我們感覺(jué)它是真的，看得見(jiàn)摸得著的。而”扁平化”有兩個(gè)元素，彌補(bǔ)了”擬物化”的不足，我認(rèn)為是”形狀”與”顏色”的概念。

以下是我設(shè)計(jì)的一款《教父》主題，

也 是用到了”擬物化”的設(shè)計(jì)，從單個(gè)圖標(biāo)去看的話，”擬物化”風(fēng)格的圖標(biāo)識(shí)別度很高，因?yàn)樗N近于實(shí)物，我研究過(guò)很多用戶，他們?cè)谶M(jìn)入桌面后，需要尋找的 圖標(biāo)就在眼皮底下，還是會(huì)不停的滑動(dòng)尋找圖標(biāo)，他們?cè)趯ふ覉D標(biāo)的時(shí)候，腦子里的畫(huà)面只是這個(gè)圖標(biāo)傳達(dá)給我們的一些信息，如果元素太多就會(huì)讓我們思考混亂。

我們研究后，大多數(shù)用戶在尋找微信的時(shí)候，腦海里會(huì)浮現(xiàn)兩個(gè)長(zhǎng)了點(diǎn)點(diǎn)的大小圈圈，還有飽和度非常高的綠色。他們不會(huì)對(duì)自己說(shuō)：我要找的是兩個(gè)”話 語(yǔ)”icon，疊加在一起，一個(gè)在前一個(gè)在后，后面的大一點(diǎn)顏色略深，前面的小一點(diǎn)略亮。拜托～誰(shuí)會(huì)去想這些細(xì)節(jié)，用戶得到的只是一種抽象的感官。

再看看這個(gè)”記事本”圖標(biāo)，寫(xiě)實(shí)的鋼筆，紙也添加了材質(zhì)，鋼筆留下了投影，而大多數(shù)用戶在尋找這個(gè)圖標(biāo)，腦海中的畫(huà)面是這樣的,第二個(gè)圖標(biāo)是不是很像啥東東？ 事實(shí)上這個(gè)圖標(biāo)第一次傳達(dá)給用戶信息的時(shí)候是在用戶看到這個(gè)圖標(biāo)的時(shí)候，會(huì)產(chǎn)生”哇，很精美”"很想去用這個(gè)鋼筆寫(xiě)點(diǎn)東西”。而在尋找圖標(biāo)的時(shí)候，腦海中是那抽象的”啥東東”。那么我之前說(shuō)的”形狀”的概念就產(chǎn)生了。

第二個(gè)概念就是顏色，ios7在顏色上被吐槽指數(shù)上算是最高的了，但是現(xiàn)在看來(lái)，無(wú)疑在用戶體驗(yàn)的視覺(jué)層進(jìn)行了一次革命。

再來(lái)看看《教父》，因?yàn)橄Ｍㄟ^(guò)視覺(jué)達(dá)到風(fēng)格統(tǒng)一，而在用戶體驗(yàn)上有很大的降低，如果界面上都是同一樣色調(diào)icon，那么用戶就不能第一時(shí)間找到自己需要的icon，就會(huì)不停的翻頁(yè)。

ios7用了飽和度很高的顏色，它們可以迅速?gòu)牟煌诩埨锩摲f而出，用戶可以迅速用顏色匹配功能icon，快速的定位與查找。

通過(guò)形狀與顏色這兩個(gè)元素，讓ios7的視覺(jué)設(shè)計(jì)得到了更高層的提升，讓用戶不再因?yàn)閕con中復(fù)雜的視覺(jué)效果而進(jìn)行思考，我記得當(dāng)年玩war3的時(shí)候，我媽媽站在后面看，說(shuō)了一句：花花綠綠的都不知道是誰(shuí)打誰(shuí)。現(xiàn)在我體會(huì)到媽媽口中的”花花綠綠”不是顏色，而是復(fù)雜、絢麗的效果帶給她的視覺(jué)擾亂?！睌M物 化”的視覺(jué)效果會(huì)給用戶帶來(lái)思考負(fù)擔(dān)，所以用戶選擇不思考，這樣用戶會(huì)不知道方向，然后不停的去翻頁(yè)查找。 說(shuō)到”方向”，ios7里也通過(guò)視覺(jué)設(shè)計(jì)了” 方向”這個(gè)概念，當(dāng)我們點(diǎn)擊一個(gè)圖標(biāo)的時(shí)候，它會(huì)根據(jù)圖標(biāo)位置進(jìn)行路徑放大，回到桌面的時(shí)候，也用了滾動(dòng)時(shí)差，沿著路徑回去，這讓我想到《星際迷航》中設(shè) 定曲線，然后到達(dá)目的地的科級(jí)感，ios7將深入其林的感覺(jué)帶給了大家。

ios7 在交互上也重新定義了”方向”的概念，頭部向下滑動(dòng)出現(xiàn)消息菜單，左右滑動(dòng)需要作為桌面切換功能。，以往底部有后臺(tái)程序區(qū)，但是沒(méi)有向上滑動(dòng)的操作手勢(shì)， 如對(duì)ios系統(tǒng)不熟悉的用戶，在往下滑動(dòng)可出現(xiàn)菜單后，肯定會(huì)聯(lián)想到是否往上滑動(dòng)也會(huì)出現(xiàn)菜單？ios7加入了底部往上滑動(dòng)出現(xiàn)快捷功能菜單后，系統(tǒng)會(huì)更 加好用，這樣系統(tǒng)邏輯性會(huì)更強(qiáng)，上下左右都會(huì)有功能，讓用戶減少思考。

雙擊HOME鍵之后的后臺(tái)程序也進(jìn)行了改動(dòng)，這個(gè)改動(dòng)非常之偉大。ios7之前，后臺(tái)菜單出現(xiàn)后，整個(gè)屏幕除后臺(tái)外都會(huì)半隱去，而且是無(wú)法操作的，因?yàn)辄c(diǎn)擊一次，后臺(tái)就會(huì)收回，也就是說(shuō)8/10屏只是返回的功能，大量的浪費(fèi)空間。

ios7 則將這8/10的空間運(yùn)用了起來(lái)，加入了程序的截圖，這樣會(huì)比icon更加有識(shí)別性，不同之處在于ios7之前一屏能容納4個(gè)icon，ios7一屏容納 3個(gè)icon。之前關(guān)閉程序需要按住icon不放，很隱蔽，而現(xiàn)在加入了情感設(shè)計(jì)，不要的東西就仍出去，只要手向上推動(dòng)就可以關(guān)掉程序，避免了2次點(diǎn)擊的同時(shí)讓交互更加的有識(shí)別性。

ios7的發(fā)布，對(duì)于做互聯(lián)網(wǎng)產(chǎn)品的公司和團(tuán)隊(duì)有著莫大的關(guān)系，apple一直有著自己的規(guī)則，產(chǎn)品的icon 成為了重中之重，在商店里，用戶試玩不了，只能通過(guò)幾張截圖與圖標(biāo)來(lái)判斷，ios7的視覺(jué)風(fēng)格出來(lái)后，很多圖標(biāo)在桌面上都顯得”不倫不類(lèi)”，比如微信 icon剛出來(lái)的時(shí)候，被噴顏色亮瞎了，而在ios7的短信圖標(biāo)下顯得那么的沉穩(wěn)～。為了讓自己產(chǎn)品的圖標(biāo)在iOS7下更讓用戶喜愛(ài)，我們可以進(jìn)行以下風(fēng) 格定位。

底背景用純色，圖案盡量簡(jiǎn)潔，我這里隨意畫(huà)了一個(gè)群組的icon用來(lái)做演示。

IOS7中的icon已經(jīng)沒(méi)有2像素投影了，而且ios7中的一些圖標(biāo)也大膽的用了黑、白、灰，所以產(chǎn)品的icon也可以往上靠，這樣風(fēng)格統(tǒng)一也不會(huì)顯得奇怪。

我們也可以做偽厚度，在114px*114px的大小里挪動(dòng)幾像素，顏色加深做個(gè)厚度，這樣在不影響風(fēng)格的情況下，在桌面圖表中又能脫穎而出，你懂的。

通過(guò)邵飛老師這篇文章，相信大家對(duì)UI設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)在這個(gè)時(shí)代的總要性是不言而喻的，如果想設(shè)計(jì)出貼近用戶體驗(yàn)的東西，更人性化。那么你學(xué)習(xí)提升UI設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)是必須的，如何提升自己的ui設(shè)計(jì)能力呢？這也是每個(gè)設(shè)計(jì)師所煩惱的事情，星獅創(chuàng)想作為國(guó)內(nèi)首家UI設(shè)計(jì)培訓(xùn)、UED培訓(xùn)遠(yuǎn)程教育機(jī)構(gòu)，經(jīng)過(guò)近四年的發(fā)展，先后開(kāi)設(shè)以UI設(shè)計(jì)師、網(wǎng)頁(yè)設(shè)計(jì)師、互動(dòng)設(shè)計(jì)師、前端開(kāi)發(fā)工程師、用戶體驗(yàn)與交互設(shè)計(jì)師、安卓開(kāi)發(fā)工程師等精準(zhǔn)定位的培訓(xùn)課程。致力于培養(yǎng)符合創(chuàng)意產(chǎn)業(yè)和教育標(biāo)準(zhǔn)的中國(guó)移動(dòng)互聯(lián)網(wǎng)領(lǐng)域人才。邵飛老師同時(shí)也是我們星獅創(chuàng)想的UI設(shè)計(jì)授課老師，如果你想跟邵飛老師一起學(xué)習(xí)和交流UI設(shè)計(jì)方面的知識(shí)，可以來(lái)星獅創(chuàng)想了解一下。