2014-6-16 藍藍設計的小編
轉載藍藍設計( ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
相信大家一談到手機基本就是以蘋果iphone 為話題，因為人人都夸它系統好，UI設計好看又人性化，深深的映入了人的心里。隨著蘋果手機系統iOS7在中秋節的發布，新的設計潮流席卷而來。
前一段時間，spark界面設計公司 邵飛，同時又是星獅創想（www.si27.com）的UI設計深資授課老師，在網上發布了一篇關于《IOS7視覺/交互設計測試講解》的文章，這是邵飛老師自己用過IOS7之后寫出了自己的想法和體會,下面跟大家一起分享邵飛老師的這篇文章吧。
首先個人對 iOS7的整體視覺風格是非常喜歡的，還記得之前WWDC發布會上iOS7的亮相，戳瞎了很多用戶的眼睛，當時心中難免會有一絲失望，現在想想，可能是因 為老喬的離去，融入了一些個人情感在里面。蘋果一直有他自己的規則，規范著用戶和開發者，例如我們的icon在桌面上永遠被限制在 114px＊114px、20px圓角的區域里，但是這讓apple產品更加精美，更加規范。iOS7的整體視覺無疑圍繞著”扁平化”這三個字，那么”扁 平化”的理念是什么，僅僅就是變的更加簡潔？”扁平化”的視覺設計更給我們帶來什么？對此我有我自己的看法。
為了讓圖標更吸引人、識別性更 高，視覺設計工作者為用戶提供了一種與物體非常貼近的設計－”擬物化”設計，那些精致的圖標一直讓用戶愛不釋手，我作為一名設計者，一直瘋狂迷戀著”擬物 化”，這些擬物的圖標能讓我們感覺它是真的，看得見摸得著的。而”扁平化”有兩個元素，彌補了”擬物化”的不足，我認為是”形狀”與”顏色”的概念。
以下是我設計的一款《教父》主題，
也 是用到了”擬物化”的設計，從單個圖標去看的話，”擬物化”風格的圖標識別度很高，因為它更貼近于實物，我研究過很多用戶，他們在進入桌面后，需要尋找的 圖標就在眼皮底下，還是會不停的滑動尋找圖標，他們在尋找圖標的時候，腦子里的畫面只是這個圖標傳達給我們的一些信息，如果元素太多就會讓我們思考混亂。
我們研究后，大多數用戶在尋找微信的時候，腦海里會浮現兩個長了點點的大小圈圈，還有飽和度非常高的綠色。他們不會對自己說：我要找的是兩個”話 語”icon，疊加在一起，一個在前一個在后，后面的大一點顏色略深，前面的小一點略亮。拜托～誰會去想這些細節，用戶得到的只是一種抽象的感官。
再看看這個”記事本”圖標，寫實的鋼筆，紙也添加了材質，鋼筆留下了投影，而大多數用戶在尋找這個圖標，腦海中的畫面是這樣的,第二個圖標是不是很像啥東東？ 事實上這個圖標第一次傳達給用戶信息的時候是在用戶看到這個圖標的時候，會產生”哇，很精美”"很想去用這個鋼筆寫點東西”。而在尋找圖標的時候，腦海中是那抽象的”啥東東”。那么我之前說的”形狀”的概念就產生了。
第二個概念就是顏色，ios7在顏色上被吐槽指數上算是最高的了，但是現在看來，無疑在用戶體驗的視覺層進行了一次革命。
再來看看《教父》，因為希望通過視覺達到風格統一，而在用戶體驗上有很大的降低，如果界面上都是同一樣色調icon，那么用戶就不能第一時間找到自己需要的icon，就會不停的翻頁。
ios7用了飽和度很高的顏色，它們可以迅速從不同壁紙里脫穎而出，用戶可以迅速用顏色匹配功能icon，快速的定位與查找。
通過形狀與顏色這兩個元素，讓ios7的視覺設計得到了更高層的提升，讓用戶不再因為icon中復雜的視覺效果而進行思考，我記得當年玩war3的時候，我媽媽站在后面看，說了一句：花花綠綠的都不知道是誰打誰。現在我體會到媽媽口中的”花花綠綠”不是顏色，而是復雜、絢麗的效果帶給她的視覺擾亂。”擬物 化”的視覺效果會給用戶帶來思考負擔，所以用戶選擇不思考，這樣用戶會不知道方向，然后不停的去翻頁查找。 說到”方向”，ios7里也通過視覺設計了” 方向”這個概念，當我們點擊一個圖標的時候，它會根據圖標位置進行路徑放大，回到桌面的時候，也用了滾動時差，沿著路徑回去，這讓我想到《星際迷航》中設 定曲線，然后到達目的地的科級感，ios7將深入其林的感覺帶給了大家。
ios7 在交互上也重新定義了”方向”的概念，頭部向下滑動出現消息菜單，左右滑動需要作為桌面切換功能。，以往底部有后臺程序區，但是沒有向上滑動的操作手勢， 如對ios系統不熟悉的用戶，在往下滑動可出現菜單后，肯定會聯想到是否往上滑動也會出現菜單？ios7加入了底部往上滑動出現快捷功能菜單后，系統會更 加好用，這樣系統邏輯性會更強，上下左右都會有功能，讓用戶減少思考。
雙擊HOME鍵之后的后臺程序也進行了改動，這個改動非常之偉大。ios7之前，后臺菜單出現后，整個屏幕除后臺外都會半隱去，而且是無法操作的，因為點擊一次，后臺就會收回，也就是說8/10屏只是返回的功能，大量的浪費空間。
ios7 則將這8/10的空間運用了起來，加入了程序的截圖，這樣會比icon更加有識別性，不同之處在于ios7之前一屏能容納4個icon，ios7一屏容納 3個icon。之前關閉程序需要按住icon不放，很隱蔽，而現在加入了情感設計，不要的東西就仍出去，只要手向上推動就可以關掉程序，避免了2次點擊的同時讓交互更加的有識別性。
ios7的發布，對于做互聯網產品的公司和團隊有著莫大的關系，apple一直有著自己的規則，產品的icon 成為了重中之重，在商店里，用戶試玩不了，只能通過幾張截圖與圖標來判斷，ios7的視覺風格出來后，很多圖標在桌面上都顯得”不倫不類”，比如微信 icon剛出來的時候，被噴顏色亮瞎了，而在ios7的短信圖標下顯得那么的沉穩～。為了讓自己產品的圖標在iOS7下更讓用戶喜愛，我們可以進行以下風 格定位。
底背景用純色，圖案盡量簡潔，我這里隨意畫了一個群組的icon用來做演示。
IOS7中的icon已經沒有2像素投影了，而且ios7中的一些圖標也大膽的用了黑、白、灰，所以產品的icon也可以往上靠，這樣風格統一也不會顯得奇怪。
我們也可以做偽厚度，在114px*114px的大小里挪動幾像素，顏色加深做個厚度，這樣在不影響風格的情況下，在桌面圖表中又能脫穎而出，你懂的。
通過邵飛老師這篇文章，相信大家對UI設計和用戶體驗設計在這個時代的總要性是不言而喻的，如果想設計出貼近用戶體驗的東西，更人性化。那么你學習提升UI設計、用戶體驗設計是必須的，如何提升自己的ui設計能力呢？這也是每個設計師所煩惱的事情，星獅創想作為國內首家UI設計培訓、UED培訓遠程教育機構，經過近四年的發展，先后開設以UI設計師、網頁設計師、互動設計師、前端開發工程師、用戶體驗與交互設計師、安卓開發工程師等精準定位的培訓課程。致力于培養符合創意產業和教育標準的中國移動互聯網領域人才。邵飛老師同時也是我們星獅創想的UI設計授課老師，如果你想跟邵飛老師一起學習和交流UI設計方面的知識，可以來星獅創想了解一下。