動(dòng)畫(huà)
- 謹(jǐn)慎使用動(dòng)畫(huà)和運(yùn)動(dòng)效果。
- 努力讓動(dòng)畫(huà)接近真實(shí)和可靠。
- 應(yīng)用內(nèi)使用一致的動(dòng)畫(huà)效果。動(dòng)畫(huà)一致性。
- 讓動(dòng)畫(huà)效果可選。
品牌
成功的品牌植入不僅僅是在應(yīng)用內(nèi)增加品牌元素。好的應(yīng)用通過(guò)醒目的字體、顏色、圖片等傳遞品牌概念。
- 提煉出品牌理念。用戶(hù)使用你的應(yīng)用時(shí)用來(lái)或許信息的，而不是來(lái)看廣告。
- 不要讓品牌阻礙良好的應(yīng)用設(shè)計(jì)。
- 應(yīng)該更側(cè)重于內(nèi)容本身。
- 不要整個(gè)應(yīng)用都顯示你的LOGO。
- 遵循蘋(píng)果的商標(biāo)指南。可以參考Apple Trademark List和Guidelines for Using Apple Trademarks
顏色
iOS使用的扁平化顏色-來(lái)自Apple官網(wǎng)
- 配套的顏色應(yīng)該貫穿整個(gè)應(yīng)用。使用一致的顏色搭配。
- 一般來(lái)說(shuō)，選擇的部分顏色與你的LOGO匹配。精妙地會(huì)用顏色是傳達(dá)品牌的一種不錯(cuò)的方式。
- 整個(gè)應(yīng)用中貫穿一個(gè)關(guān)鍵顏色來(lái)只是可交互的元素。色調(diào)唯一性
可交互顏色-來(lái)自于Apple官網(wǎng) - 避免對(duì)不能交互和可交互的元素使用相同的顏色。交互指示唯一性
- 考慮插圖和透明度是如何影響周?chē)念伾?/li>
- 你的圖片應(yīng)該是使用正確的顏色模式。iOS的默認(rèn)模式是sRGB。
-
在兼容的設(shè)備上使用更廣泛的顏色來(lái)提升視覺(jué)體驗(yàn)。支持Display P3。
sRGB和Display P3的色彩空間 - 在不同的光線條件下測(cè)試你顏色方案。
- 考慮True Tone display如何影響顏色。更多實(shí)現(xiàn)細(xì)節(jié)可參考Information Property List Key Reference（沒(méi)懂什么意思）
- 關(guān)注色盲人群和不同文化對(duì)顏色的看法。
- 充足的顏色對(duì)比。對(duì)比度至少為4.5:1，7:1更好。
布局
一般人希望可以在任何設(shè)備和方向上使用自己希望的應(yīng)用。在iOS中，界面元素和布局可以根據(jù)不同的設(shè)備進(jìn)行自動(dòng)的改變形狀和大小。
- 在環(huán)境變化時(shí)持續(xù)關(guān)注當(dāng)前內(nèi)容。內(nèi)容應(yīng)該最高優(yōu)先級(jí)。
- 確保主要內(nèi)容在默認(rèn)大小下是清楚。
- 整個(gè)應(yīng)用內(nèi)位置一致的外觀。
- 使用視覺(jué)上的重量和平衡來(lái)突出重要的內(nèi)容。大的事物比小的更能吸引眼球和顯得更為重要。一般來(lái)說(shuō)重要的內(nèi)容放在上半屏，最好事靠近屏幕的左邊。
- 使用對(duì)齊來(lái)組織內(nèi)容。對(duì)齊使用應(yīng)用看起來(lái)更有條理，可以幫助用戶(hù)在滾動(dòng)時(shí)更容易發(fā)現(xiàn)信息。
- 避免無(wú)理由地更變布局。用戶(hù)旋轉(zhuǎn)設(shè)備時(shí)并不意味著這個(gè)布局都需要改變。
- 如果可以的話，同時(shí)支持豎屏和橫屏。
- 如果你的應(yīng)用只支持一個(gè)方向，確保支持不同的變體（朝上或朝下）
- 根據(jù)環(huán)境定制你的應(yīng)用響應(yīng)旋轉(zhuǎn)。
- 為交互元素提供足夠的點(diǎn)擊范圍。區(qū)域至少為44p x 44p。
- 為文本的大小改變作準(zhǔn)備。用戶(hù)期望，當(dāng)他們?cè)谙到y(tǒng)設(shè)置中改變字體大小，應(yīng)用可以響設(shè)置。關(guān)于更多實(shí)現(xiàn)細(xì)節(jié)可以參考Typography。
更多關(guān)于自適應(yīng)的實(shí)現(xiàn)細(xì)節(jié)，可參考Auto Layout Guide。
排版
San Francisco 是iOS的系統(tǒng)字體，它有兩個(gè)變體：小于或等于19號(hào)的字體，和大于或等于20號(hào)的字體。通過(guò)這里下載字體。
- 強(qiáng)調(diào)重要的信息。通過(guò)字體的重量、大小和顏色來(lái)高亮重要的信息。
- 如果可以的話使用單一字體。
- 盡可能使用內(nèi)置的字體樣式
- 確保自定義字體是清晰的。iOS支持自定義字體，但不利于閱讀。除非你有強(qiáng)烈要求使用自定字體，例如出于品牌目的或需要?jiǎng)?chuàng)造沉浸式的游戲體驗(yàn)，不然堅(jiān)持使用系統(tǒng)自帶的字體。
- 確實(shí)自定義字體能響應(yīng)輔助功能。具體可參考Accessibility
自動(dòng)字體大小
SF UI字體的兩個(gè)變體都會(huì)顯示良好。自動(dòng)字體大小提供了額外的功能讓讀者選擇合適的字體。
- 當(dāng)字體大小變化時(shí)考慮內(nèi)容的優(yōu)先級(jí)。不是所有內(nèi)容都是同等重要的。當(dāng)用戶(hù)選擇更大號(hào)的字體，他們想讓內(nèi)容更加容易被閱讀，他們不想屏幕上的每個(gè)字體都變大。
字體使用和間距 - 在界面上使用正確的字體變體。小于等于19號(hào)字體時(shí)，使用SF UI Text。大于等于20號(hào)字體時(shí)使用SF UI Display。
