這是一篇技術性長文,作者是一位“專利等身”的創業者,也是一位執着的怪人,文章為我們生動、細緻地詮釋了他設計的iOS 8系統。這個系統具有兩大特點:智能動態圖標技術;全域應用程序圖標界面。

注:本文作者姜洪明,是一名“專利等身”的創業者。對於產品設計,他有着一種近乎偏執的堅持與執着,比如說在備受爭議的iOS 7上,他的觀點就和大多數人不一樣,他會評價“ iOS 7是一次偉大‘胡服騎射’”。

不得不說,這個作者是一個怪人,但他還要執着地把他對iOS系列操作系統的想法持續寫下去。不論你是否同意他的觀點,他對產品的這種執念,願意付諸於真實思考的行動,確實值得尊敬。

2007年喬布斯發布iPhone,重新發明了手機,開啟移動互聯網的新時代之後,智能手機的人機交互界面再也沒有發生過架構性的變革。從iOS 1到iOS 6,都是漸進性的改良,iOS 7是一次全新方向的戰略轉折點,但喬布斯創立的靜態式圖標操作方式也還是一樣的。不管是擬物風格的圖標,還是扁平風格的圖標,它們的操作方式都是一樣的。

未來,移動操作系統將進入後圖標時代。

智能動態圖標技術

將所有的應用程序分為兩種狀態,一種是處於觸髮狀態,一種是處於非觸髮狀態。或者也可以稱為激活狀態或非激活狀態。觸髮狀態,可以為應用程序有內容更新,有狀態更新等;內容更新有新消息,新郵件,新通知,新提醒,新事件,好友狀態等。

操作系統根據應用程序是否處於觸髮狀態,決定該應用程序的圖標是否显示在主界面(主屏)上;處於觸髮狀態的應用程序的圖標,自動显示在主屏上;不處於觸髮狀態的應用程序的圖標,不显示在主屏上,而是全部都显示在全域應用程序圖標界面中。

於是主屏的桌面是一個乾淨的,漂亮的沒有任何圖標的大氣簡約界面,如下面左圖;當有程序處於觸髮狀態時,自動显示在主屏上,如下面右圖。當你不用程序時,程序全部隱藏了,還你一個清爽的桌面。當你需要使用程序時,它會自動出現在你面前。當你點擊使用完該程序的時候,它又自動隱藏。

(PS功夫不好,各位用iPhone 4或iPhone 5的讀者,無論你裝的是iOS 6還是iOS 7,將你們主屏上的圖標全部移走,用你最喜歡的照片當作桌面背景,看看效果怎麼樣)

全域應用程序圖標界面

在iOS 6中,在主屏上由左向右滑動,是全局搜索界面,我將這個界面設計成全域應用程序圖標界面。頂部的搜索欄和iOS 6中是一樣的,在搜索欄中點擊時,會出現鍵盤。在全域應用程序圖標界面,用戶安裝的所有的應用程序,都显示在這裏,一目瞭然。這個只是示意圖,真實的4寸屏幕中的圖標會看起來比示意圖中要更大。全域應用程序圖標界面會根據用戶安裝的應用程序的數量,自動調節圖標的大小。

上面左圖中有52個應用程序,程序用的少的用戶差不多夠了。中間的圖中有93個應用程序,右邊的圖有144個應用程序,一般的用戶足夠用了。用戶還可以雙指捏放,放大縮小,或者雙擊屏幕放大,選中應用程序後點擊打開;也可以像iOS 7的照片程序那樣,滑動到的圖標放大,全域應用程序圖標界面的設計靈感,就是從iOS 7的照片程序來的。實際上,用戶安裝的應用程序在1百個以內的話,圖標的大小,完全可以看得清清楚楚,手指直接點擊也毫無問題。

如果說iOS 7的照片程序讓管理,瀏覽照片更加容易,用戶再也無需不停滾屏來找照片。那麼全域應用程序圖標界面讓用戶管理,打開應用程序前所未有的容易和簡單,用戶再也無需來回滑動屏幕,找文件夾,在文件夾中找程序。

全域應用程序圖標界面的底部,依次是App Store, iTunes Store, iBook Store三大應用商店;要安裝新東西,直接點擊這3個Store的圖標就可以。右下角是垃圾簍,將程序的圖標拖進垃圾簍,就是刪除程序。非常的形象,一看就會。很多第一次使用iOS的人,包括使用Android的人,都不知道怎麼安裝程序,也不知道怎麼刪除程序,都要問人的。引用蘋果官網對iOS 7的介紹的文字:“當你第一次上手使用,就對它所能做的瞭然於胸時,那就是簡約”。

安裝、刪除、管理、瀏覽、打開應用程序,從來沒有這麼容易和簡單過。這會大大加快,用戶手機內的應用程序的推陳出新,新舊淘汰的速度,留下來的,都是應用程序的功能、實用、美觀等各方面贏得用戶的心的程序。當某個應用程序超過3個月或者半年,用戶都沒有打開過的時候,全域應用程序圖標界面會自動提醒用戶是否刪除該應用程序。用戶刪除過的程序,也可以通過長按垃圾簍圖標,選擇恢復,系統會自動從App Store中查找該程序,並自動完成下載,安裝的過程。

這不但和iOS 7對應用程序的設計要求一致,而且由於智能動態圖標技術,默認不显示任何應用程序圖標,只有最優秀的程序,只有用戶最經常用的程序,才會在主屏自動显示,這種競爭強制應用程序做到:“讓應用更好的將自己的核心用途與功能展示給用戶;UI應該能夠讓用戶馬上理解應用的內容與操作方式,但是要注意UI不能喧賓奪主。

直接拖到垃圾簍刪除,也讓那些不停更新搶佔用戶主屏的惡意程序,馬上被刪掉。

有用戶會問,如果微信沒有新消息,還沒自動出現在主屏上,這時想用微信,需要到滑動到全域應用程序圖標界面去打開微信么?

不需要!

用戶直接在主屏狀態,上下輕輕抖一抖手機,自動打開微信。有用戶又問,那微博呢?上下抖得幅度大一些,就直接打開微博了。或者上下輕輕抖一下手機的時候,主屏上自動出現用戶已安裝的所有IM應用的圖標。是不是很直觀,很酷!引用iOS 7的官方原話:“真正的簡約,是因應你的需要,因地,因時恰到好處的展現每一方面

筆者設計的全新移動操作系統,讓用戶做到了,當應用程序需要使用時,立刻就在眼前立刻就在手邊;不需要使用時,就立刻從眼前消失,不被干擾,達到呼之即來,揮之即去的,隨心所欲的使用的境界。

在筆者設計的新一代移動操作系統中,全域應用程序圖標界面實際上更多的時候是一些特定的公共場所打開不常用的應用程序的輔助方法。用戶常用的應用程序,要麼通過智能動態圖標自動在主屏出現,要麼就是一些很酷,很直觀的方式直接打開。更多直觀、酷的操作方式,敬請期待後面的系列文章。

下面先介紹一個例子,Safari瀏覽器。

在主屏上,從右向左滑動,直接進入Safari程序。

無狀態欄的全屏應用程序界面

首先很多第一次用iOS系統的人,以前也沒用過Mac OS,都會問,怎麼上網阿?因為無論是iOS 6還是iOS 7的Safari程序圖標都太過抽象,用戶看不懂。但拿到iPhone,用戶會不由自主的滑動玩,一滑,就出來瀏覽器,非常直觀,一用就會,無需問人才會。

上面右圖是筆者設計的應用程序界面,左圖是iOS 7的應用程序界面。注意到有什麼不同么?在筆者設計的移動操作系統中,所有的應用程序打開,都是沒有屏幕頂部的狀態欄的。而目前的iOS和Android的應用程序的屏幕頂部都是有狀態欄的。

上面的兩張Safari程序,形象地說明了筆者的設計讓屏幕看起來更大,显示的內容更多。

讓我們來看看具體數據吧:iPhone 5的屏幕是4英寸,扣除頂部狀態欄的實際显示尺寸大概為3.9英寸,扣除頂部狀態欄和底部菜單欄的實際显示尺寸大概為3.6英寸。那麼5寸屏幕的Android手機,例如三星Note,如果應用程序是同時擁有頂部狀態欄和底部菜單欄的,那麼其實際显示尺寸只有4.5英寸到4.6英寸。特別是很多Android手機沒有實體Home鍵,屏幕的下面是經常都有一排菜單欄佔據屏幕显示空間的。

僅僅通過移除頂部狀態欄,就可以讓显示面積變為104.65%大小,增加了將近5%的显示面積。如果算上底部菜單欄,可以讓显示面積變為113.92%大小,增加了將近14%的显示面積。

這意味着每個iPhone 4的用戶,使用筆者設計的操作系統,3.5英寸的屏幕,實際显示面積接近同時有頂部狀態欄和底部菜單欄的iPhone 5。這意味着,出一個單手容易拿的4.5英寸的手機,實際显示面積就可以比得上單手不好拿的5寸的Note。

這意味着幾乎每個iPhone用戶,或則Android手機用戶,都可以立即獲得至少5%的額外增加的屏幕尺寸!

在所有的應用程序界面中,筆者的設計看起來屏幕更大,那麼主屏呢?

從上圖的對比中可以看到,採用智能動態圖標技術的主屏,不但看起來屏幕更大,更美觀,而且由於沒有鋪滿桌面的圖標,不再有擁擠,局促,混亂的感覺,而是大方、寬敞、整潔。

這樣主屏實際上只剩下底部Dock欄的四個圖標,這四個圖標可以花十倍的精力精心設計,設計到用戶恨不得上去舔兩口都行。剩下的圖標,簡單的平面化設計就可以,都放到全域應用程序圖標界面上去了,像Facebook那種只有一個字母的圖標,或則像Twitter那種只有一個簡單小鳥圖案的簡單扁平設計就很好,無論放大還是縮小,圖標的可讀性仍然很好。

這樣就很好的解決了效率和藝術美的平衡難題。

新主屏的乾淨空白的桌面,以後可以用酷得一塌糊塗的動態桌面背景,取代目前的靜態照片背景。不用像iOS 7那樣,微微晃動手機,在圖標的圖層下面,背景動態變化,而是直接就是動態的,立體的背景。用戶可以用自己親人和喜歡的人的微笑的短視頻做成的動態圖片或動態視頻作為桌面的背景。手機的主屏的美觀將進入一個讓消費者動心和興奮的新時代。

相對傳統的應用程序界面來說,無狀態欄的全屏應用程序界面,不但屏幕显示更大,而且更美觀。更重要的是,讓用戶全身心的投入正在使用的應用程序的內容上,而不會遭到分心和干擾。而這也正是iOS 7突出內容和功能的設計理念的最好體現。以前在iOS 6中,由於狀態欄基本是黑色,深灰色的暗色,所以干擾的情況不嚴重,在iOS 7中,由於狀態欄基本是白色,狀態欄中的字,就會顯得和應用程序中的內容不協調。

上面幾張圖示意了,無狀態欄的全屏應用程序界面讓用戶更加焦聚與正在使用的內容。引用iOS 7的官方原話:“界面刻意避免分散用戶的注意力”。

電池電量可以每低10%,大的橫幅信息在屏幕上提示,例如90%,80%,70%,60%,50%,40%,30%,20%的電量分別大橫幅提示下,和低電量的提示一樣。這樣用戶反而更清楚電量的使用情況。很多時候,小狀態欄,用戶並不注意到,反而對電池電量使用狀況並不了解。

我認為,與其每個地方都有,但每個地方都很小看不清楚,不如在一個地方有,但很大很清楚。在我設計的主屏中,主屏的狀態欄比iOS 7的狀態欄高2倍,而且細心的讀者可能已經發現了,狀態欄上的指示和之前的iOS和Android都不一樣。在指示上有圓形的,是可以直接點擊進行設置的。這樣,指示處和設置處就統一在一個地方,更加簡單明了。這樣iOS 7中的從任何屏幕底部向上滑動調出的控制中心就沒必要了。調節屏幕的亮度可以通過同時按Home鍵和音量鍵來調節,而且個人認為屏幕的亮度經常調來調去是不好的,因為你每調一次,眼睛都要重新適應一次。

另外細心的讀者可能已經發現,通過智能動態圖標技術,實際上需要的新信息,新通知都通過圖標自動显示在主屏上了,用戶去點擊打開程序查看就可以了。這樣iOS 7中的從任何屏幕頂部向下滑動調出的通知中心就沒必要了。現在很多用戶面對的不是隨時需要知道新的通知,而是通知太多。

我這樣設計最主要的目的,是避免誤操作。因為目前絕大多數應用程序中,默認的下拉功能是更新,這個操作很容易和頂部下拉調出通知中心衝突。目前絕大多數應用程序中,默認的上划功能是滾動显示下面的內容,這個操作很容易和底部上划調出控制中心衝突。

目前高質量的、安全可靠的、海量的應用程序商店是蘋果對Google一大競爭壁壘。雖然Google目前在應用程序數量上追趕的差不多了,但在應用程序安全性,應用程序質量上還遠遠不及。蘋果在iOS 7的設計規範中,提到應用程序的手勢操作要盡量不要和iOS 7的手勢形成衝突。我個人認為是一個危險的方向。因為蘋果一家改變,總比90萬個應用程序甚至上百萬個應用程序都去改來的更容易。即使一定要這兩个中心,我個人建議也是只有在主屏和鎖屏兩種狀態下可以調出通知中心和控制中心,而在應用程序界面禁用。

而且就算不和應用程序衝突,用戶按Home,然後在主屏中設置,也比從底部滑動的操作更加準確可靠。因為實體的Home鍵按下去的準確性是遠大於從底部滑動的,失敗率也遠比從底部滑動低。即使iOS 7這樣的設計是為了將來下一代或下下代的iPhone取消Home鍵作準備,但在無Home鍵的系統設計上,我也有更好的設計方案。

我曾經從人機交互的設計角度出發,全世界除蘋果外準確預測了iPad, iPad 2,iPad mini, Note的設計,也就是說全球最熱銷的五款移動產品,iPad,iPad 2,iPad mini,iPhone 4, Note中我準確預測了其中的4款。iPad 3整個產業界都預測到了,而我預測錯了,我預測中的iPad 3的設計不是那樣的,最後iPad 3隻銷售了半年多就停產了。

我本來預測中的iPhone 5也不是那樣設計的,本來iPhone 5不這樣設計,三星的銷量不至於沖那麼快。當時iPhone 5的屏幕拉長的設計,雖被吐槽的不行,但出發點是可以即增加屏幕尺寸,之前的所有的應用程序也都不用改變,可以直接繼續使用,說明蘋果公司也認識到應用程序商店是他們最重要的一個競爭壁壘,所以寧願拉長屏幕,也要讓所有應用程序可以不用變就能繼續很好的運行。

在這點的設計上,iOS 7是冒了極其大的風險的,個人認為其風險太大,收益太小。很可能因為風格的急劇變化,讓應用程序開發者們迷惑,更改太多,而讓Google和微軟鑽了空子,拉攏開發者,或者在應用程序的安全性上加快追趕的腳步。

小細節,不小覷

細心的讀者可能又發現了,在主屏中的手機信號的指示小圖標,即不是傳統的從低到高的小豎條,也不是艾維設計的五個小圓點。如果五個小圓點,是艾維作為設計師的簽名。那麼新的手機信號指示圖標,就是我作為一个中國設計師的簽名。PS功夫不好,上面主屏中的指示圖標,應該是上圖中的樣子。

首先這個圖標很形象,所有用戶一眼就能識別這就是手機信號。其次,我設計的大小很大,是一般信號圖標的至少4倍大小,用戶絕對一眼就看到。最重要的,我的設計是,不是通過小豎條或小圓點的亮的多寡來表示信號的強弱。而是通過圖標的顏色來表示信號強弱。

用綠色或藍色顯示錶示信號強,黃色或黃色閃爍顯示錶示信號一般,紅色或紅色閃爍顯示錶示信號非常弱,提醒用戶最好不要打電話,提醒用戶換個位置或地方,等信號显示強的時候再打電話,這樣對用戶的健康非常重要,因為在信號弱的時候,輻射會比較大。尤其是當信號比較弱的時候,用戶接打電話容易掉線,有了紅色或紅色閃爍的提醒,用戶就會主動避免在信號弱的時候接電話和打電話,改為短信或語音信箱,這樣大大降低了用戶可能的掉線問題,降低了可能的消費者不滿或退貨,大大提高了消費者的滿意度,也避免了可能的天線門等質量事件。

這個手機信號的圖標還可以直接是運營商的名字,例如AT&T,移動,聯通,電信等,首先綠色,黃色,紅色的字體显示移動等,對移動等運營商的品牌推廣是更有利,其次,黃色,紅色字體显示,更加利於消費者比較不同運營商的信號服務。

引用iOS 7的官方原話:

“跨越橫亘在 “功能性” 與 “愉悅感” 之間的鴻溝,既要不誇張地引人注目,又要有一用難忘的愉悅,是非常困難的事情。但對細節的孜孜以求,讓我們能跨越這道鴻溝,將二者融為一體。細節着眼於細微之處營造愉悅感。細節的作用有時難以察覺,但它卻始終存在,並會不斷累積形成一致的體驗。”

iOS 7的官方原話:“我們創造的每一件產品,從來都不僅僅追求設計的美觀。因為只關注外觀的做法,出發點就是錯誤的。”我很慶幸,在向內設計的過程中,僥倖暫時領先,並搶注了專利。但我相信艾維想到這些設計,只是時間的問題。

後記 

iOS 8的設計大概分為六篇到七篇左右,依次介紹筆者設計的下一代移動操作系統的人機交互,都會在鈦媒體上獨家首發。首先強調一點,從之一到之七,每一篇的內容都是世界首創,都是乾貨中的乾貨,且每一篇中的任何新設計功能,任何新的設計細節,都已申請了專利。

之一隻是後圖標時代移動操作系統的基礎和總綱,但不是iOS 8設計最精彩的一篇,精彩的還在後面。自2007年iOS問世后,世界上第一次有移動操作系統在人機交互界面美觀,易用性,直觀性,簡單,趣味性上全面超過iOS。而且在功能上也完全妙殺Android。

最重要的,可以在同等硬件條件下,將智能手機的電池時間延長30%以上。業界可能知道,到了iPhone 4和iPhone 5這個境界,電池時間每延長1%,意味着有多艱難,每提高1%可能都是幾千萬美元,甚至上億美元的成本。

是的,以後iPhone 4和iPhone 5僅僅通過軟件升級,不僅可以享受主屏和應用程序界面更大的显示效果,獲得5%額外的屏幕显示大小,還可以享受30%以上的額外的電池時間,Android用戶就不說了,能獲得2倍的電池時間。智能手機用戶再也不用擔心沖一次電,一天都扛不住。或者在保持現有的電池時間下,擁有更輕薄的世界最薄的智能手機。

作者:姜洪明,via:鈦媒體