蘋果即將推出的iOS 11系統，有哪些UI設計細節值得學習？

最近小狐在Apple 官網看到了iOS 11的更新介紹，比如控制中心、Siri、Live Photo 等等，裡面的各種設計都是滿滿的科技感，下面來介紹下這款系統的視覺界面，各位果粉此時此刻是不是都被愛瘋了

在iOS 11的最新UI界面中，比較重要的更新主要有App Store的界面，所以在應用商店的UI設計中也能看出一些明顯的細節。

圖標：從線性改為面形

新版的商店圖標從線性改成了面形，圖標都變成了圓角，讓人感覺更加圓滑，同時和 iOS 10中的iTunes相關應用風格也統一了。

Icon 顏色比如來的線性淺了一點，這樣做看起來就不會過重，所以大家在使用面形的圖標設計時，顏色要把握好。

iOS 10 App Store

iOS 11 App Store

iOS 10 iTunes

卡片式設計

在新版的 iOS 11 界面，有不少的地方採用了卡片式/宮格式排列，卡片式的設計非常適合圖文排版，並且在手機端有不錯的閱讀體驗。在 Material Design 中也是很重視卡片式設計，所以日後可以多考慮使用卡片式風格。

大投影

當轉為卡片式設計後，為了提升層級表現，界面也增加了大塊投影，是不是和 Material 風格有點像？APP在iPad的封面與手機端的尺寸不一樣，一個是橫，一個是豎。

iPad 的封面是橫的

iPhone 手機端封面

無處不在的圓角

圓，像曲線一樣，有圓滑、活潑、動感、柔和的感覺，更容易讓人親近。親和力有了，吸引用戶就更多了，iOS的圓角在不同UI上使用的圓角大小略有不同，這就是細節，看來 iOS 在圓角的運用已到了出神入化之境。

在UI設計中還有一個很重要的元素：文字排版。排版是設計中最重要的組成部分之一，它絕不僅僅是將漂亮的字體放在帥氣的背景上這麼簡單。今天小狐總結了UI設計排版常見的20個誤區，相信大家看完一定會有收穫。

1、擁擠的文字：字間距

這是很容易忽略的一種錯誤，字間距過於擁擠會降低文字的可讀性。有的字體本身會比較稀疏，或者過於緊密，適當調整至易於閱讀的狀態即可。

2、密集的段落：行間距

行間距也是影響可讀性的重要因素，過於緊湊會難於識別，但是一味地拉開間距在視覺上的效果並不合理。一般行間距是行高的50%左右。

3、不合理的拉伸與壓縮

這是另一個常見的錯誤，圖片、文字等元素並沒有按照原始比例拉伸或者壓縮而造成非正常的扭曲和形變。要盡量在保持比例的前提下控制長或者寬等單個元素變化，在PS或者AI等軟體中，按住Shift鍵拉伸，在網頁設計的時候，盡量按照原始比例來設定元素或者控制單個變數。

4、忽略可讀性

在黑色的背景上採用白色的字體一般能保證可讀性，對比很明顯，但是如果字體太過於纖細，視覺上的辨識度就很低了。字體過小、色彩對比度不夠、透明度過高都會造成類似的問題，只要你發現難於識別，有針對性地處理即可。

5、文本的閱讀舒適度

標題、宣傳語使用加粗的、花式的、裝飾性的字體有它的功能性，但是長文的正文部分是需要用戶長時間閱讀的，要保持閱讀的舒適度。字體的尺寸、字間距、行間距都需要細心處理。

6、「孤兒」與「寡婦」

「Orphans」和「Widows」是印刷排版中的術語，通常指的是行貨列、頁頭和頁腳段落最後僅有一兩個詞構成的短行之類的東西。在文字排版佔主體的設計項目中，這些行或者列非常的扎眼，你如果不想讓大片的留白打斷排版的連續性，最好的解決方案是微調段落寬度、間距。

7、使用太多字體

這是新手最常見的錯誤。使用多種字體原本是出於裝飾性的目的，但是可控性很差且容易造成視覺干擾，通常將字體類型數量控制在2~3種是比較合理的。不同風格的字體太多會讓你的整體風格極其難以統一，專業性就更難以提及了。

8、不匹配的字體

不同風格的字體用在一起自然會給人「畫風詭異」的感覺，分散用戶注意力，降低了信息傳遞的有效性。字體的搭配手法是介於科學和藝術之間一種存在，它需要你學習排版和字體知識。在強調一致性的地方，襯線體和非襯線體不要混用；在海報、封面等地方有的時候需要兩種甚至多種類型字體混用，襯線體和非襯線體的搭配就很重要了。

9、罔顧內容

選好字體和字體樣式很重要，但是麻煩先審視一下你的項目內容。字體是有情緒的，嚴謹的、浪漫的、隨性的、現代的等等。如果字體和設計的情緒與內容不匹配，你會造成脫節和疏離的感覺，這會讓觀眾迷惑。公司報告是嚴謹的，不要用充滿童真的字體或者裝飾性字體，充滿張力的海報上用日常的普通字體自然也是設計上的失誤。

10、形式重過功能

這也是老生常談。你可以追隨近年的設計趨勢，找個獨特的字體設計一組炫酷而獨特的海報或者Banner，做的非常的藝術。但是這樣的設計可能會存在閱讀障礙，讀者需要耗費很長時間來分辨它的內容，那麼這就是明顯的形式重於功能了。如果你決定這麼設計的話，最好平衡一下藝術性和可讀性——也就是它的功能性。

11、過度強調

有時候你需要強化某個部分，會在視覺上進行強調，讓它從整個設計中脫穎而出。文字部分常見的手法很多，斜體、粗體、下劃線、大寫、增大字體大小，等等。但是千萬不要將所有的強調方式都用在同一篇文字同一個段落中，這樣會讓它看起來凌亂不堪。

12、忽視層次結構

在排版中，層次這個詞是區分文本和不同元素的重要性區別的學術性說法。以我們所熟知的報紙為例，標題闡述核心，尺寸最大，文字大寫，粗體強調，其次是副標題，字體小點，文字不再大寫，再其次是正文，字體最小。如果打破了這種層次結構，用戶會迷惑。哪個重要哪個其次，傻傻分不清楚。

13、不對齊

設計原則中，對齊是最重要的幾項之一。對齊會讓文字排列有序而合理，視覺上統一而一致。不同的對齊方式混合在一起會產生隨機的間距，難看且閱讀困難。

14、使用對齊工具

想要讓排版對齊最好的方式就是打開軟體的對齊工具，現在的排版和作圖工具都有相關的對齊輔助工具，在它們的輔助下讓你的排版更加整齊吧。

15、粗糙的邊緣

這種問題在英文排版中更常見一些，中文排版中這種問題實際上並不嚴重，諸如Office一類的工具會自動幫你微調，而更專業的排版軟體中也有相應的演算法幫你解決。英文排版中這種問題更多，需要你細心處理調整，實際上這並不是什麼特別複雜的事情，重要的是細心。

16、添加特殊效果

一般添加特效是個不錯的思路，但是必須使用得應景。許多自帶的字體特效，諸如3D字體、大陰影、扭曲特效，都很容易讓設計看起來廉價而過於花哨。多看時下流行的設計範例，剋制隨意添加特效的衝動。

17、在重要項目中嘗試新效果

在重要的項目中測試新的設計手法、特效和有趣的字體並不是一個靠譜的方案，也不是合適的時機。這種手段過於冒險，因為新的手法極有可能並不實用可靠，如果你相信自己的直覺也應該在其他的非重要項目中進行試錯。在重要的項目中，我們更重視一個作品的穩定性。

18、忘記審核

設計需要嚴格把關，做完設計之後不審核是不負責的行為。設計完之後，最好通讀全文，做拼寫檢查，確保沒有語法錯誤、印刷錯誤，這也是設計的一部分。

翼狐網VIP專區開啟手機版啦

即可享受會員特權哦

設計推薦

資源丨設計神器免費送！一鍵文字雲效果，無損放大圖片，智能標註…

如何在版面設計里凸顯中文的視覺規律與空間的運用

百雀羚火了以後，一大波長長長廣告又來啦！

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！