今天開個(gè)新坑。其實(shí)老早就想做這事兒了。記得前一兩年，蘋果官方還會在開發(fā)者中心提供中文的HIG(Human Interface Guideline)，后來給沒了；網(wǎng)上能夠找到的中文版本不知是官方還是同行的自發(fā)翻譯，總之要看最新的內(nèi)容還是需要拿來官方的英文文檔，估計(jì)多數(shù)朋友也是這樣的。

那么就趁著iOS 7剛剛發(fā)布測試版本的時(shí)機(jī)，開始做這件事吧。之前一周里，到處都在傳閱官方發(fā)布的新版設(shè)計(jì)文檔，越來越多的人在自己的設(shè)備里安裝了測試版本，可見大家的關(guān)注程度；所以說我愛這一行呢，有點(diǎn)大事小情的大家都能在第一時(shí)間反應(yīng)起來。關(guān)于系統(tǒng)本身，毀譽(yù)參半吧，東西都擺在那里，建議自己玩玩看；我個(gè)人來說，只是覺得視覺風(fēng)格太娘了；又能怎樣呢，反正看看如今的世界，哪里不是漫山遍野的一派娘炮。扯遠(yuǎn)了。第一篇走起吧；先做著，回頭整理出框架，也和《iOS Wow Factor全書自發(fā)編譯》一樣扔到側(cè)邊欄去做個(gè)固定的欄目好了。

重要：這是針對于正在開發(fā)中的API或技術(shù)的預(yù)備文檔(預(yù)發(fā)布版本)。雖然該文檔在技術(shù)精確度上經(jīng)過了嚴(yán)格的審核，但并非最終版本，僅供蘋果開發(fā)者計(jì)劃的注冊會員使用。蘋果提供這份機(jī)要文檔的目的，是幫助你按照文中描述的方式對技術(shù)的選擇及界面的設(shè)計(jì)開發(fā)進(jìn)行規(guī)劃。這些信息有可能發(fā)生變化，屆時(shí)，你的設(shè)計(jì)開發(fā)方式需要基于最終版本的操作系統(tǒng)及文檔進(jìn)行相應(yīng)的調(diào)整和測試。該文檔或許會隨著API或相關(guān)技術(shù)在未來的發(fā)展而進(jìn)行更新。

譯文最后更新時(shí)間：2013-06-15

iOS7涵蓋了以下3個(gè)方面的設(shè)計(jì)主題思想：

• 依從：UI要幫助用戶對內(nèi)容進(jìn)行理解和互動，但絕不能與內(nèi)容產(chǎn)生競爭關(guān)系。
• 清晰：任何字號的文字都要清楚易讀，圖標(biāo)要精細(xì)且含義明確，裝飾性元素要少而精，且使用得當(dāng)；聚焦于功能性的實(shí)現(xiàn)，并以此激發(fā)設(shè)計(jì)的進(jìn)行。
• 縱深：視覺外觀的層次以及逼真的動畫效果可以傳達(dá)出界面的活力，使界面更容易被理解，并提升用戶的愉悅度。

天氣應(yīng)用，左圖為iOS7，右圖為iOS6。

無論你是在重新設(shè)計(jì)一款已有應(yīng)用，還是在創(chuàng)建新產(chǎn)品，請考慮按照蘋果官方重新設(shè)計(jì)內(nèi)置應(yīng)用的方式來進(jìn)行你的工作：

• 首先，剝離所有的UI元素，使應(yīng)用的核心功能呈現(xiàn)出來，并重新確認(rèn)它們的相關(guān)性。
• 然后，使用iOS7的設(shè)計(jì)主題去重新構(gòu)建UI與用戶體驗(yàn)。
• 自始至終，要做好挑戰(zhàn)傳統(tǒng)慣例、質(zhì)疑各種臆測的準(zhǔn)備；將注意力聚焦在內(nèi)容和功能上，以此來推動每一個(gè)設(shè)計(jì)決策的制定。

依從于內(nèi)容

雖然明快而漂亮的UI以及流暢的動畫效果是iOS7當(dāng)中的體驗(yàn)亮點(diǎn)，但內(nèi)容才是其真正的核心。

下面這些方法將確保你的設(shè)計(jì)能夠提升界面的功能性，并使其更好的依從于內(nèi)容。

充分利用全屏空間

斟酌嵌入式結(jié)構(gòu)及可視化的界面框架的用法，考慮能否將內(nèi)容直接擴(kuò)展至屏幕邊緣。天氣應(yīng)用就是個(gè)很好的例子：通過漂亮的全屏方式呈現(xiàn)當(dāng)前的天氣情況，用戶能夠立即發(fā)現(xiàn)最重要的信息，而且每小時(shí)的氣象數(shù)據(jù)也有充分的空間得以展示。

慎用擬物化的視覺元素

浮雕效果、漸變、陰影，這類視覺表現(xiàn)形式有時(shí)會使UI元素過于沉重，進(jìn)而在視覺上喧賓奪主，壓倒內(nèi)容。要聚焦于內(nèi)容，讓UI扮演輔助支援型的角色。

讓半透明的視覺元素透露其背后的內(nèi)容

半透明的視覺形式可以體現(xiàn)出當(dāng)前操作對象周圍的環(huán)境背景，使用戶知道有更多的內(nèi)容可用。

提供清晰的視覺效果

提供清晰的視效，這是確保使內(nèi)容處于核心地位的又一種方式。下面這些方法可以使最重要的內(nèi)容及功能清晰易讀、便于操作。

充分運(yùn)用留白

留白可以使重要的內(nèi)容及功能更加突出。同時(shí)，留白還可以傳達(dá)出一種平靜和穩(wěn)定的感覺，使應(yīng)用看上去更加專注和高效。

通過色彩簡化UI

一種關(guān)鍵的顏色——例如備忘錄應(yīng)用中的黃色——可以突出重要信息，并巧妙的暗示出元素的可交互性。同時(shí)，它也可以為應(yīng)用帶來具有一致性的視覺主題。

使用系統(tǒng)字體，確保清晰易讀

iOS7中的系統(tǒng)字體可以自動調(diào)整字間距及行高，使文字內(nèi)容更加易讀，在用戶所選擇的任何字號下都表現(xiàn)良好。

擁抱無邊框的按鈕

與以往依靠浮雕效果暗示元素可交互性的方式不同，在iOS7中，我們可以選取含義準(zhǔn)確的標(biāo)題文字，搭配一種關(guān)鍵色或系統(tǒng)色，來表達(dá)這是一個(gè)可交互的UI元素。新的通訊錄應(yīng)用使用了系統(tǒng)提供的藍(lán)色來告訴用戶，屏幕上的多數(shù)內(nèi)容是可以對交互動作做出響應(yīng)的。

利用縱深進(jìn)行溝通

iOS7會在不同的層面上顯示內(nèi)容，以體現(xiàn)內(nèi)容間的層級和位置關(guān)系，這有利于用戶理解屏幕上各種元素之間的關(guān)聯(lián)。

文件夾在視覺表現(xiàn)形式上采用了半透明背景，并懸浮于主屏幕之上，這能使其中所包含的內(nèi)容與屏幕上的其他元素得以區(qū)分開來。

當(dāng)用戶在使用提醒事項(xiàng)應(yīng)用中的某個(gè)條目時(shí)，其余的條目都會排列在界面底部的不同層面上。要查看所有條目，用戶需要展開這些層面，如下圖所示。

新的日歷應(yīng)用當(dāng)中使用了增強(qiáng)的動畫過渡效果，可以在用戶切換年、月、日視圖模式時(shí)帶來到明顯的縱深感。在下圖所示的年份滾動視圖中，用戶可以立刻看到今天的日期，并能夠執(zhí)行其他的相關(guān)操作。

當(dāng)用戶選擇了某個(gè)月份后，年份視圖會自動放大擴(kuò)展，而月份視圖則會從它的后面呈現(xiàn)出來。

類似的動畫效果還會發(fā)生在月份與日期的切換當(dāng)中：月份視圖向外擴(kuò)展，呈現(xiàn)出日期視圖。

譯文代表原作者觀點(diǎn)。歡迎發(fā)表評論，或到譯者微博進(jìn)一步交流探討。

本站原創(chuàng)編譯文章。如需轉(zhuǎn)載，請注明：本文來自Be For Web 英文原文:? https://developer.apple.com/library/prerelease/ios/documentation/UserE... 譯者信息:?c7210?- UX玩家、交互設(shè)計(jì)師、曾經(jīng)的視覺與前端、貓奴、guitar fucker...現(xiàn)就職于攜程無線事業(yè)部。

轉(zhuǎn)載于:https://www.cnblogs.com/greywolf/p/3261310.html

總結(jié)

以上是生活随笔為你收集整理的(转)iOS7界面设计规范(1) - UI基础 - 为iOS7而设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。