【转】《iOS7 by Tutorials》系列：iOS7的设计精髓(上)
簡(jiǎn)介：
本文翻譯自《iOS7 by Tutorials》一書(shū)的第一章“Designing for iOS 7”，主要從程序員角度介紹了iOS7的新設(shè)計(jì)理念，堪稱(chēng)神作！本文翻譯僅作學(xué)習(xí)交流之用，版權(quán)歸原作者所有，有刪減。非專(zhuān)業(yè)翻譯人士粗糙之處在所難免，想體會(huì)原文精髓的朋友請(qǐng)到Raywenderlich商店支持正版。
——————?by 葛布林大帝
關(guān)于作者：
這篇文章的原作者是Jeremy Olson，一個(gè)頂級(jí)設(shè)計(jì)師加程序大牛，多款應(yīng)用位列蘋(píng)果商店的前100名。雖說(shuō)本文主題是界面設(shè)計(jì)，但其偉大的地方在于，它是說(shuō)給程序猿聽(tīng)的！
?
目錄：
一、iOS7的設(shè)計(jì)不同以往
- 1.為什么要為iOS7重新設(shè)計(jì)？
- 2.iOS7的新設(shè)計(jì)原則
- 3.iOS7的設(shè)計(jì)關(guān)鍵字：聚焦
二、聚焦于功能
- 1.應(yīng)用的定義
- 2.一個(gè)想做所有事的應(yīng)用，什么都做不了
- 3.一個(gè)為想為所有人設(shè)計(jì)的應(yīng)用，誰(shuí)都吸引不了
三、聚焦于設(shè)計(jì)基礎(chǔ)
- 1.對(duì)比度
- 2.重復(fù)
- 3.對(duì)齊
- 4.靠近
- 5.排版
四、聚焦于內(nèi)容
- 1.刪除不必要的內(nèi)容
- 2.內(nèi)容為王
五、聚焦于交互
- 1.魔法般的Touch
- 2.直接操作
- 3.物理仿真和動(dòng)畫(huà)
- 4.三維
- 5.手勢(shì)和導(dǎo)航
- 6.個(gè)性
六、在A(yíng)pp世界留下你的印記
七、最后的挑戰(zhàn)
?
?
一、iOS7的設(shè)計(jì)不同以往
1.為什么要為iOS7重新設(shè)計(jì)？
我的團(tuán)隊(duì)意識(shí)到，花一些時(shí)間重新設(shè)計(jì)我們的應(yīng)用以適應(yīng)iOS7是一項(xiàng)有價(jià)值的投入。專(zhuān)為iOS7設(shè)計(jì)的應(yīng)用將會(huì)在蘋(píng)果商店如魚(yú)得水，因?yàn)?#xff1a;
- 用戶(hù)
- 希望自己使用的應(yīng)用適應(yīng)iOS7環(huán)境
- 媒體
- 不想要看起來(lái)老舊的應(yīng)用作為封面
- 蘋(píng)果
- 更喜歡應(yīng)用迎接他們的新設(shè)計(jì)原則
?
2.iOS7的新設(shè)計(jì)原則
正如許多人一樣，剛開(kāi)始接觸iOS7時(shí)，我也很不爽它的改變：扁平化、毫無(wú)質(zhì)感并且單調(diào)。但過(guò)了一段時(shí)間我開(kāi)始喜歡上它，因?yàn)槲野l(fā)現(xiàn)了蘋(píng)果最新的設(shè)計(jì)原則有跡可循：
- 新的焦點(diǎn)
- 所有的重點(diǎn)其實(shí)就是讓你的視線(xiàn)聚集到內(nèi)容與交互上，你不再需要總是上下掃視來(lái)尋找你需要的內(nèi)容。
- 多樣化的到來(lái)
- 最好的iOS7應(yīng)用將不僅僅是模仿“設(shè)置”或“日歷”的界面。最好的應(yīng)用將使用新的設(shè)計(jì)語(yǔ)言作為起點(diǎn)，并且把他們創(chuàng)新到極致。就像iOS6上最好的應(yīng)用一樣，一旦iOS7平臺(tái)成熟，將會(huì)產(chǎn)生大量的多樣化應(yīng)用.
現(xiàn)在讓我們一起解開(kāi)層層包裹，在iOS7上構(gòu)建偉大的應(yīng)用吧！
?
3.iOS7的設(shè)計(jì)關(guān)鍵字：聚焦
當(dāng)我開(kāi)始為iOS7設(shè)計(jì)應(yīng)用時(shí)，我試圖尋找一個(gè)詞匯來(lái)解釋所有事情，現(xiàn)在我將要說(shuō)這個(gè)詞就是：聚焦。
與很多流行的觀(guān)點(diǎn)相反，iOS7并不是關(guān)于扁平化的設(shè)計(jì)。它包含了大量驚人的非扁平化元素，事實(shí)上iOS7的三維元素比以往任何iOS早起版本都多。相應(yīng)的，iOS7其實(shí)移除讓人分心的元素，以聚焦在三個(gè)關(guān)鍵概念上（這些概念反復(fù)被蘋(píng)果用來(lái)描述他們的新設(shè)計(jì)哲學(xué)）：
- 清晰
- 聚焦于基本圖形設(shè)計(jì)，把目光放在功能上
- 順從
- 聚焦于內(nèi)容
- 深度
- 聚焦于交互
我相信最好的iOS7應(yīng)用將會(huì)用他們獨(dú)特的方式闡述這三個(gè)概念。
?
二、聚焦于功能??
偉大的應(yīng)用并不是從你拿出你的速寫(xiě)本或打開(kāi)Photoshop開(kāi)始，相反的，它開(kāi)始于兩個(gè)問(wèn)題：
- 誰(shuí)是這個(gè)應(yīng)用的用戶(hù)？
- 這個(gè)應(yīng)用解決什么問(wèn)題？
?
?1.應(yīng)用的定義
一個(gè)應(yīng)用的定義聽(tīng)起來(lái)像這樣：誰(shuí)是應(yīng)用的使用者？這個(gè)應(yīng)用解決什么問(wèn)題？而我的應(yīng)用里，這個(gè)定義聽(tīng)起來(lái)像這樣：為特定用戶(hù)提高效率
?
2.一個(gè)想做所有事的應(yīng)用，什么都做不了
?
你的應(yīng)用應(yīng)該聚焦在一個(gè)問(wèn)題上。如果你無(wú)法用一句話(huà)來(lái)描述你的應(yīng)用是干嘛的，那你的應(yīng)用一定是太大了，并且很難給人留下深刻印象。這使得用戶(hù)疑惑你的應(yīng)用具備哪些功能，并且難以與用戶(hù)的朋友分享。
?
3.一個(gè)為想為所有人設(shè)計(jì)的應(yīng)用，誰(shuí)都吸引不了
讓一個(gè)應(yīng)用為所有人設(shè)計(jì)其實(shí)是一個(gè)陷阱。當(dāng)你的應(yīng)用為所有人設(shè)計(jì)，其實(shí)就是不為任何人設(shè)計(jì)。不過(guò)如果你為一個(gè)特定人群設(shè)計(jì)應(yīng)用，并且讓他們使用得爽的話(huà)，他們就有可能帶動(dòng)另一群人來(lái)使用你的應(yīng)用。
?
?
三、聚焦于設(shè)計(jì)基礎(chǔ)
自從iOS7不再?gòu)?qiáng)調(diào)質(zhì)感的用戶(hù)界面元素例如紋理、傾斜和chrome，你需要牢牢抓住圖形設(shè)計(jì)的基礎(chǔ)原則。Steven Bradley這樣形容它：
“當(dāng)你剝開(kāi)一件事物的裝飾，留下的應(yīng)該是它的核心基礎(chǔ)。很不幸的是，太多的扁平化設(shè)計(jì)僅僅聚焦在外表的扁平化上，而忽視了最基礎(chǔ)的設(shè)計(jì)準(zhǔn)則。”
讓我們不要落入這個(gè)陷阱。雖然我不能充分滿(mǎn)足設(shè)計(jì)的所有的基本層面，但我至少可以講一些基本的圖形設(shè)計(jì)原則，讓我們開(kāi)始吧！
?
1.對(duì)比度
?
1.1.對(duì)比度簡(jiǎn)介
對(duì)比度是兩個(gè)元素之間的視覺(jué)差異，它可以通過(guò)顏色、紋理或其他元素風(fēng)格來(lái)形成對(duì)比。左邊的文本具有高對(duì)比度，因?yàn)槲谋绢伾c背景顏色非常不同，這使得文本非常可見(jiàn)；右側(cè)的文本與背景對(duì)比度非常低，這使得它幾乎看不見(jiàn)。請(qǐng)注意你的眼睛會(huì)自動(dòng)吸引到左邊的框，高對(duì)比度元素的合理應(yīng)用可以讓你的設(shè)計(jì)大放異彩。對(duì)比度是一個(gè)非常強(qiáng)大的工具，但必須謹(jǐn)慎地使用。如果在屏幕上出現(xiàn)太多的高對(duì)比度元素，用戶(hù)的眼睛會(huì)不知道往哪兒放。
?
1.2.對(duì)比度的作用
- 高亮
- 強(qiáng)調(diào)最重要的元素，淡化次要的元素
- 秀色可餐
- 讓整體的設(shè)計(jì)更具視覺(jué)活力
- 狀態(tài)
- 顯示一個(gè)元素的狀態(tài)是活動(dòng)還是休眠
- 可讀性 ?
- 確保文本易于閱讀
?
1.3.對(duì)比度之挑戰(zhàn)
1.3.1.問(wèn)題：
一起來(lái)看看下面的截圖，顯然這個(gè)用戶(hù)界面是有缺陷的。但究竟錯(cuò)在哪里？你會(huì)怎樣解決它？
記下所有你注意到的設(shè)計(jì)缺陷（提示：它沒(méi)有使用對(duì)比！），接著看看下面有注解的版本：?
??
1.3.2.注解版本
?
1.3.3.修改版本
啊哈！現(xiàn)在界面看起來(lái)好多了！這些新的設(shè)計(jì)更加美觀(guān)、專(zhuān)業(yè)并且更具功能性。
?
?
?
2.重復(fù)?
?
2.1.重復(fù)簡(jiǎn)介
重復(fù)聽(tīng)起來(lái)像這樣：同一個(gè)對(duì)象或樣式重演。如果兩個(gè)元素有聯(lián)系，他們應(yīng)該有著相似的視覺(jué)風(fēng)格。缺乏重復(fù)的UI看起來(lái)很奇怪，因?yàn)槿祟?lèi)使用模式思維來(lái)感知世界。
?
2.2.重復(fù)之挑戰(zhàn)?
2.2.1.問(wèn)題：
再一次，看看下面的屏幕截圖。對(duì)，它看起來(lái)不專(zhuān)業(yè)，但是為什么呢？和以前一樣，記下任何你的發(fā)現(xiàn)（提示：它有很多元素需要重復(fù)！）?
??
2.2.2.注解版本：
?
2.2.3.修改版本：恰當(dāng)?shù)厥褂弥貜?fù)，使這個(gè)應(yīng)用更容易直觀(guān)呈現(xiàn)所需的信息
?
?
3.對(duì)齊
?
3.1.對(duì)齊簡(jiǎn)介
對(duì)齊是關(guān)于視覺(jué)對(duì)象相互連接的方式。任何程序員應(yīng)該好好學(xué)習(xí)對(duì)齊，因?yàn)槎ㄎ诲e(cuò)誤是程序員實(shí)現(xiàn)設(shè)計(jì)時(shí)最容易犯錯(cuò)的地方之一。對(duì)應(yīng)的基本思路是，不應(yīng)在屏幕上任意擺放元素，每一個(gè)元素應(yīng)至少與其他一個(gè)元素連接。這可能意味著兩件事情：
- 邊緣對(duì)齊
- 沿著邊緣線(xiàn)垂直或者水平對(duì)齊
- 居中對(duì)齊
- 居中垂直或水平對(duì)齊
?
3.2.對(duì)齊之挑戰(zhàn)
3.2.1.問(wèn)題：來(lái)看看下面的截圖，看你是否能找出對(duì)齊的問(wèn)題
?
3.2.2.注解版本：從遠(yuǎn)處看，下面的屏幕看起來(lái)還好。但如果你仔細(xì)觀(guān)察，你會(huì)發(fā)現(xiàn)，對(duì)準(zhǔn)誤差使畫(huà)面看起來(lái)蓬亂和業(yè)余。看下圖的對(duì)齊線(xiàn)：
?
3.2.3.修改版本：紅色的線(xiàn)表示水平對(duì)齊方式，屏幕上的元素沒(méi)有精確對(duì)準(zhǔn)的任何其他元素，造成對(duì)齊線(xiàn)的雜亂。對(duì)齊線(xiàn)是非常有用的工具，利用它調(diào)整一下界面，看，更少的對(duì)齊線(xiàn)代表元素的整齊，這讓用戶(hù)的眼睛更加舒服：
?
?
?
4.靠近
?
4.1.靠近簡(jiǎn)介
?靠近指的是，如果一些元素是相關(guān)的，他們應(yīng)該靠在一起。如果兩個(gè)元素沒(méi)有關(guān)系，他們應(yīng)該遠(yuǎn)離對(duì)方。開(kāi)發(fā)者往往希望最大化利用屏幕，最好每個(gè)像素都塞滿(mǎn)東西。雖然這可能是有效的，但也產(chǎn)生了一個(gè)混亂的布局。留白，這是你組織元素時(shí)最強(qiáng)大的工具，它能幫助你的用戶(hù)毫不費(fèi)力的理解各內(nèi)容的意義。
?
4.2.靠近之挑戰(zhàn)
4.2.1.問(wèn)題：看看你能不能找出下圖的靠近問(wèn)題
?
4.2.2.注釋版本?
?
4.2.3.修改版本：很明顯，無(wú)關(guān)的元素不當(dāng)靠近，會(huì)使元素之間的關(guān)系非常混亂。你將如何解決這些問(wèn)題？下面是我的一個(gè)解決方案，但總有很多不同的方式來(lái)解決設(shè)計(jì)問(wèn)題。當(dāng)一切都正確組合時(shí)，應(yīng)用中各元素的功能將更加清晰！
?
?
?
5.排版?
?
5.1.排版原則
下面是排版時(shí)要考慮的一些通用規(guī)則：
- 5.1.1.最多使用三種字體
- 這包括不同字體和同一字體內(nèi)風(fēng)格的組合，如字體、顏色、大小、以及粗體和斜體修飾符的組合。太多的字體會(huì)打亂你的布局一致性。
- 5.1.2.有節(jié)制地使用文字居中
- 有時(shí)候，你絕對(duì)需要居中的文本，如導(dǎo)航欄標(biāo)題，但經(jīng)驗(yàn)告訴我們最好盡可能避免使用它。左或右對(duì)齊的文本布局通常顯得更加專(zhuān)業(yè)。
- 5.1.3.保持你的字體簡(jiǎn)單
- 增強(qiáng)文本易讀性。
- 5.1.4.提前測(cè)試字體大小
- iOS7提供用戶(hù)修改字體大小的選項(xiàng)。一定要提前在你的應(yīng)用上測(cè)試所有能選擇的字體大小，使之看起來(lái)都一樣的舒適。
- 5.1.5.使用差異較大的字體來(lái)區(qū)分內(nèi)容
- 同一屏幕上盡量少用相似的字體，那會(huì)讓用戶(hù)分不清它們的區(qū)別。應(yīng)用差異較大的字體，讓用戶(hù)輕易分辨出它們內(nèi)容的不同。
- 5.1.6.使用同一字體的風(fēng)格變換
- 靈活運(yùn)用字體顏色、大小、以及粗體和斜體修飾符的組合，用以突出一些重要的內(nèi)容。
這么多條要記住可能不容易，其實(shí)你只需要記住最關(guān)鍵的一條：讓用戶(hù)界面保持一致。如果應(yīng)用界面看起來(lái)不夠舒適，那排版一定出了什么問(wèn)題。
?
5.2.排版之挑戰(zhàn)
5.2.1.問(wèn)題：下面的排版出了什么問(wèn)題？?
?
5.2.2.注釋版本
?
5.2.3.修改版本?
?
這個(gè)程序已經(jīng)變得更漂亮、更實(shí)用，而你所做的僅僅是改變字體。
轉(zhuǎn)載于:https://www.cnblogs.com/zhw511006/p/3708463.html
總結(jié)
以上是生活随笔為你收集整理的【转】《iOS7 by Tutorials》系列：iOS7的设计精髓(上)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： oracle RAC的VIP和scan
- 下一篇： 有人知道“CODE”什么牌子的粉底吗？网