轉(zhuǎn)載藍藍設(shè)計(   sillybuy.com  )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源：http://labs.chinamobile.com/news/design/97279

相信大家一談到手機基本就是以蘋果iphone 為話題，因為人人都夸它系統(tǒng)好，UI設(shè)計好看又人性化，深深的映入了人的心里。隨著蘋果手機系統(tǒng)iOS7在中秋節(jié)的發(fā)布，新的設(shè)計潮流席卷而來。

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

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

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

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

也 是用到了”擬物化”的設(shè)計，從單個圖標去看的話，”擬物化”風(fēng)格的圖標識別度很高，因為它更貼近于實物，我研究過很多用戶，他們在進入桌面后，需要尋找的 圖標就在眼皮底下，還是會不停的滑動尋找圖標，他們在尋找圖標的時候，腦子里的畫面只是這個圖標傳達給我們的一些信息，如果元素太多就會讓我們思考混亂。

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

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

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

再來看看《教父》，因為希望通過視覺達到風(fēng)格統(tǒng)一，而在用戶體驗上有很大的降低，如果界面上都是同一樣色調(diào)icon，那么用戶就不能第一時間找到自己需要的icon，就會不停的翻頁。

ios7用了飽和度很高的顏色，它們可以迅速從不同壁紙里脫穎而出，用戶可以迅速用顏色匹配功能icon，快速的定位與查找。

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

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

雙擊HOME鍵之后的后臺程序也進行了改動，這個改動非常之偉大。ios7之前，后臺菜單出現(xiàn)后，整個屏幕除后臺外都會半隱去，而且是無法操作的，因為點擊一次，后臺就會收回，也就是說8/10屏只是返回的功能，大量的浪費空間。

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

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

底背景用純色，圖案盡量簡潔，我這里隨意畫了一個群組的icon用來做演示。

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

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

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