昨天米醋跟大家分享了iOS的五大設計原則中凸顯內容原則,那麼今天我們繼續來說說統一化原則和適應化原則。
統一化原則
統一化原則主要體現在視覺統一和交互統一兩個方面。在視覺統一方面,要講究字體、顏色和元素的統一性,標題字號的統一,主色彩和輔助顏色的統一都是能夠體現出產品一致性的基本標準,關於這方面的知識將在後面的內容中進行詳細介紹;交互統一,是指操作使用的一致性,在一個軟體中保持交互形式的一致性可以大大降低用戶的操作時間。
下面來對比一下錘子手機和蘋果手機的時鐘設置方式。在錘子手機的介面中設置鬧鐘、秒表和計時器的方式都是在不同的位置進行設定的,交互的形式有點擊和下拉方式,其視覺表現的形式也不相同,對於第一次使用的用戶來說,操作起來會比較困難,如圖所示;而在蘋果的設計中更為講究操作的統一性,操作方式全是點擊,秒表和計時器都是使用點擊開啟的方式,這樣的設計能讓用戶在最短的時間內找到正確的操作方式,如圖所示。由此看來,交互統一比視覺統一在用戶體驗方面要更重要一些。
錘子手機鬧鐘、秒表和計時器設置
蘋果手機鬧鐘、秒表和計時器設置
在交互中要遵循從哪來回哪去的原則,要保持路徑的統一性。可以看到在iOS系統中,點擊App主圖標後會基於產品的icon放大展示出產品的主介面,如圖所示,當按Home鍵退到主頁介面的時候也是基於產品icon的縮放進行消失的。這樣的交互方式能更好地體現出頁面與App之間的關係。
基於產品的icon放大展示主介面
適應化原則
適應化原則包括了場景適應和螢幕適應兩種。一個指的是使用場景的適應,另外一個是螢幕的適配。在蘋果的原生天氣App中,不僅可以通過天氣的變化進行自適應匹配,還可以根據時間來區分白天和黑夜,讓用戶在不同的環境和時間下都能感受到軟體的智能性,如圖所示。
蘋果的原生天氣App
在很多的閱讀類產品中也會有日夜的切換功能,從而保證用戶在夜晚關燈的模式下還能舒服的進行閱讀,如圖所示。
日夜切換功能
有時候可以通過硬體和軟體的結合來對場景進行適應,在TCL 360空氣凈化器的介面設計中,可以通過不同的顏色來表現空氣的指數,這樣可以用最直觀的方式表現空氣的質量,如圖所示。
TCL 360空氣凈化器的介面
相比於適應化原則中的場景適應,螢幕適應則更為重要。在iPad的介面中要考慮橫屏和豎屏的效果,設置介面的左側菜單的寬度是保持不變的,而右側的列表信息會發生適應變化,這是常見的適配方式,可以有效保證視覺的統一性,如圖所示。
螢幕適應
在橫屏和豎屏中的適配中,經常會出現視覺不平衡的情況,我們會對單獨的控制項進行調整適配。例如計時器的時間選擇框,為了讓豎屏模式下的介面顯得更為飽滿,對其單獨進行了放大設計,讓頁面從視覺上看起來更為舒服,如圖所示。
計時器的時間選擇框
在手機移動端中,蘋果有iPhone 4、iPhone 5、iPhone 6和iPhone 6 Plus等不同的機型,其中iPhone 4和iPhone 5的螢幕比例還不一樣,有時候為了讓用戶在不同的機型上都能看到想要展示的信息,就需要考慮到在不同比例上的螢幕適應,例如在圖中,直接嵌套後可以看到在iPhone4下的介面展示不完整,而單獨對iPhone4中的按鈕進行縮放處理,讓整體功能(下面的兩個按鈕)在一個頁面中展示完整,可以大大節省展示空間,如圖所示。
直接嵌套後的介面展示不完整
單獨對按鈕進行縮放後可展示完整
在設計工作中,我們應該設計哪個尺寸?如何只做一套設計圖就可以完成多螢幕的適配呢?下面以iOS的介面尺寸為例來進行講解。
蘋果手機的分為3種主要的分別率,即640px×1336px、750px×1334px和1242px×2208px,其中切圖的後綴分別為@2x、@2x和@3x,如圖6-20所示。在現在的硬體設備趨勢下,效果圖可以出iPhone 6的尺寸大小,也就是750px×1334 px的大小,可以通過iPhone 6的基礎尺寸來進行適配。
蘋果手機的解析度
在Photoshop CC 2015中新建文檔時,可以從「畫板大小」選項中找到iPhone機型的解析度,如圖6-21所示。一般會使用畫板的方式來製作App介面,因為在一個畫布中可以建立多個畫板,這樣可以同時處理多個頁面,從而保證頁面的統一性,同時也方便進行製作,如圖所示。
在畫板大小中設置iPhone解析度
在一個畫布中建立多個畫板
因為設計的效果圖是iPhone 6的尺寸(750px×1334px),所以在設計的過程中我們要理解介面元素的適配原則。由於iPhone 5和iPhone 6的螢幕精度是一樣的,所以從iPhone 5到iPhone 6的適配可以進行拉升適配,但是不同元素的拉升方式也是不同的。iPhone5和iPhone 6共用一套切圖,如圖所示是同款App在不同螢幕下的截圖大小對比。
同款App在不同螢幕下的大小對比
在將iPhone 5適配到iPhone 6時,頭像和文字的大小可以保持不變,導航條可以通過左右進行拉伸適配,如圖6-24所示;對於文字的適配,可以根據螢幕的寬度進行折行顯示,如圖所示;對於按鈕控制項的適配,可以保持按鈕的高度進行左右拉升適配,如圖所示;對於圖片適配,可以進行等比縮放,如圖所示。
導航條的適配
文字的適配
按鈕控制項的適配
圖片的適配
對於iPhone 6適配到iPhone 6 Plus就更好辦了,因為iPhone 6 Plus的尺寸是iPhone 6的1.5倍,所以只需要出一套@3x的切圖就可以了(1.5倍iPhone6的切圖)。
好啦!今天就分享到這裡,明天米醋將繼續給大家分享iOS的設計原則中層級性原則、易操作性原則的設計技巧,我們不見不散哦!