在前不久的WWDC 2017大會上，Tim Cook介紹了新一代蘋果移動操作系統(tǒng)iOS 11的幾大新功能。但由于時間限制，iOS 11的一些小改變被省略了，而這些未被提及的改變只有我們親自上手才能體驗到。新設(shè)計的計算器程序便是這類改變的一種。小小的設(shè)計改變掩映了iOS設(shè)計思路的變遷。這一期隨想我們將回顧iOS計算器程序的發(fā)展進(jìn)程并看看iOS 11是如何返璞歸真的。

“借鑒”

2007：在2007年iPhone剛發(fā)布之時，其內(nèi)置系統(tǒng)（現(xiàn)iOS）的命名還沒有最終確定下來，App Store也還沒有出現(xiàn)，但它統(tǒng)一的擬物風(fēng)格一直延續(xù)到了iOS 6。這種采用擬物風(fēng)格的操作系統(tǒng)拉低了用戶的入門門檻，同時也預(yù)示了很多用戶界面設(shè)計都要參照現(xiàn)實中的物件。第一代iPhone內(nèi)置的計算器基本照抄了于1987年推出的博朗ET66計算器（見上圖）甚至計算器按鍵的顏色都基本一致。這一點在《蘋果設(shè)計》一書中有所提及。至于是借鑒還是抄襲還需讀者自行判斷，這也是為何本段標(biāo)題被加上了引號。

改變

2008-2012：當(dāng)iPhone系統(tǒng)步入2.0時代，內(nèi)置計算器的原型設(shè)計被拋棄。當(dāng)我們再次拿它的界面與博朗ET66計算器比較時會發(fā)現(xiàn)它們除了按鍵顏色相同以外已經(jīng)不再相似了。按鍵布局也進(jìn)行了重新排布，特別是為最常用的“=”按鍵進(jìn)行了放大。方塊式的按鈕提供了更大的觸發(fā)面積，更高效地利用了3.5寸的觸摸屏。

顛覆

2013-2016：于2013年發(fā)布的iOS 7操作系統(tǒng)徹底顛覆了以往一直沿用的擬物設(shè)計，設(shè)計思路也逐漸向內(nèi)容靠攏，摒棄一切無用的設(shè)計元素。在計算器程序中，各個方形按鍵之間的間隙已經(jīng)達(dá)到了最小化，新加入的“%”按鍵也將一度被加長“=”按鍵縮回了原來的面積。應(yīng)用的顏色也比較鮮亮，極為醒目。這種設(shè)計風(fēng)格確實突出了內(nèi)容，但美觀程度著實一般。

回歸

2017-？：這便是iOS 11帶來的新版計算器。與以往幾次不同，它只帶來了設(shè)計改變而非功能改變。數(shù)字按鍵使用了深灰色設(shè)計，背景也是通體的黑色，不再晃眼。按鍵造型也從方形改成了圓形，回歸了第一代計算器設(shè)計。這不僅致敬了經(jīng)典，還不禁讓我們推測新一代iPhone將使用OLED屏幕以展現(xiàn)更純粹的黑色。

以上便是iOS計算器一步步的變遷。管中窺豹，可見一斑。每一處細(xì)節(jié)的改變能體現(xiàn)出每一次設(shè)計思路的改變。這，便是iOS和它的計算器。

來自Renatro

這是山貓的第12篇原創(chuàng)

上一篇是講怎么做需求分析，具體需求落地時最直觀的就是以原型來進(jìn)行溝通展示了。

就工具來講，經(jīng)過多年的發(fā)展，目前主流的原型工具有Axure和墨刀，業(yè)界最常用的還是Axure為主，具體這兩個工具的玩法可以網(wǎng)上搜索，已經(jīng)有很成熟的使用教程了。

軟件需求原型設(shè)計不是一蹴而就的事情，如果想在效率和質(zhì)量都進(jìn)行提升，可以采用以下方法。

1

搭建功能框架，梳理MVP

簡單來說，即需要搞明白目前設(shè)計的軟件原型有哪些功能菜單，通常你可以用visio、mindmanager或者xmind軟件來描述你的功能腦圖框架，如下圖是一個用visio畫的功能框架圖：

對于原型設(shè)計人員，功能菜單至少要考慮到三級菜單，比如上圖最下面一行專家列表、項目推薦這些即是三級菜單功能。

框架不能隨便搭，也要講究一些方法，比如頂層設(shè)計、和其他系統(tǒng)之間的關(guān)聯(lián)、異常處理的設(shè)計，具體參考上一篇文章“不會做需求的項目經(jīng)理不是好項目經(jīng)理”里面的內(nèi)容介紹。

接下來要對功能菜單框架做分級，哪些是可以劃分MVP（Minimum Viable Product 最小化可用產(chǎn)品）里面去的？哪些是可以后續(xù)版本再進(jìn)行開發(fā)的？

“所謂最小化可用產(chǎn)品，是讓團(tuán)隊用最小的代價實現(xiàn)一個產(chǎn)品，以此了解和驗證對用戶關(guān)鍵問題的解決程度。”

注意，最小化可用產(chǎn)品是解決用戶的關(guān)鍵問題，而不是解決所有問題，如果你在設(shè)計時面面俱到，那可以肯定的是你的產(chǎn)品一定非常臃腫。

對于上圖科技評獎管理系統(tǒng)，基礎(chǔ)管理功能模塊在產(chǎn)品初期就可以排除在MVP之外。

2

在巨人的肩膀上進(jìn)行設(shè)計

牛頓曾經(jīng)說過：如果說我看得比別人更遠(yuǎn)些，那是因為我站在巨人的肩膀上。

很多原型設(shè)計人員一開始就陷入細(xì)節(jié)的功能頁面設(shè)計，完全依據(jù)自己的想法來進(jìn)行處理，結(jié)果最終設(shè)計出來的質(zhì)量非常糟糕。

很多時候設(shè)計都是共通的，哪怕行業(yè)的業(yè)務(wù)不同，在功能頁面的設(shè)計上都有相通之處，比如一個多級審批頁面需要包括哪些信息？從頁面使用者審批人的角度看，需要知道目前審批的內(nèi)容明細(xì)、目前所處審批環(huán)節(jié)、前面審批環(huán)節(jié)的審批人和審批意見等等，很多涉及審批的業(yè)務(wù)系統(tǒng)對于前面說的這些信息在頁面設(shè)計里面都是必須要具備的，那針對這種頁面，可以找找公司內(nèi)部或者互聯(lián)網(wǎng)搜索看看有無類似資源，看看其他人是怎么設(shè)計，多思考為什么這么進(jìn)行設(shè)計，然后在這個基礎(chǔ)上進(jìn)行設(shè)計上的創(chuàng)新，實在沒法創(chuàng)新就照抄行業(yè)類似設(shè)計的最佳實踐。

3

重視頁面布局，輕表現(xiàn)形式

到了具體的原型頁面設(shè)計，在設(shè)計初期，每個頁面功能位置布局?jǐn)[放是重點，如下圖汽車之家APP的首頁，為什么搜索框是放在Banner的上面，這樣會不會讓用戶難以察覺？

車商城和汽車點評為什么放在中間功能的靠前位置？這些都是值得思考的問題。

在設(shè)計初期避免做太多形式化的東西，比如做出酷炫的交互效果，高保真原型等，尤其是面對大型復(fù)雜的軟件系統(tǒng)，投入時間在這方面會花費你大量時間，而且可以肯定的是這些內(nèi)容隨著原型的深入會被大量舍棄或者調(diào)整。

4

重視溝通

很多時候，原型設(shè)計人員會出現(xiàn)和開發(fā)人員一樣的問題，會陷在自己的圈子和想法來做事，在團(tuán)隊合作中，每個人都是獨立的個體，但系統(tǒng)是很難孤立的，尤其是當(dāng)今越來越強調(diào)數(shù)據(jù)和資源共享，因此需要和多個相關(guān)方溝通才能做好系統(tǒng)原型設(shè)計。

如果你是乙方，那么不要忽略和甲方的溝通，尤其是在核心系統(tǒng)的設(shè)計層面，如果沒有來回幾次和客戶確認(rèn)，那最終做出來的東西很可能是滿足不了業(yè)務(wù)需求或者不接地氣的。

如果你設(shè)計的子系統(tǒng)和其他子系統(tǒng)有關(guān)聯(lián)，那就要站在整個大系統(tǒng)的高度層面，考慮你的子系統(tǒng)如何和他人設(shè)計的子系統(tǒng)更好的進(jìn)行融合，這些同樣是需要大量的溝通和調(diào)整。

以上便是原型設(shè)計一些原則性的東西，需要注意的是，高手在做任何事之前都是先思考策略，只有菜鳥才會一開始就陷入細(xì)節(jié)，而且依據(jù)自己的想象進(jìn)行死磕，一葉障目呀。想想你上次出去旅游前，如果做了詳細(xì)攻略，是不是感覺省了很多時間和費用？一樣的道理啊。

END