ios介面指南02

本篇指南閱讀接續ios介面指南01,為“視覺設計”與“圖標圖像”重點整理。指南內容偏向介面佈局內應該注意的尺寸設置,並包含圖標與文字等等,裝置螢幕尺寸越來越多樣,必須設計一個佈局與適應性良好的介面,自適應每個裝置螢幕尺寸,必要時皆包含橫向、縱向螢幕切換,在閱讀時保持流暢度。

四、視覺設計 Visual Design

【適應性和佈局 Adaptivity and Layout】

本章節很適合於工作中使用,作為隨時檢視的工具書,自適應在佈局上重要觀念,就是將介面中元素靈活設置。常見對應狀況為螢幕尺寸、裝置的縱橫方向、動態文字大小,其次是差異性較大的手機與平板,在拆分視窗上會稍稍不同(如多任務處理)。

圖左:玩運彩討論區、圖中:ios介面範例、圖右:mobile01
  • 在畫面中給予間距與對齊有助於定位內容,例如整個畫面的左右邊距給予16pt,限制內文寬度來增加可讀性,在每個欄位、視窗都必須這麼做。
  • ios系統抽象定義了螢幕的寬度、高度各兩個種類(Xcode提供兩種size class),分別是regular(正常)、compact(緊縮)空間,預設分別對應不同的裝置(手機預設縱向都是compact寬度與regular高度)。另外還有any(任意)組合,在良好可讀性前提下自由應用regular與compact組合。
  • 通過使用Adaptive Layout的核心概念size class,在設計APP時只需要創建一個Layout,就能在所有的ios設備上執行,在垂直水平維度中顯示的內容量。

一般佈局需要注意的地方:

  • 玩運彩討論區每個文章列表使用顏色文字來區分文章類型、內頁的操作按鈕外框樣式相同;主要畫面元素以適當大小呈現,使用者不需再縮放、左右移動畫面,保持相關元素一致性。
  • Medium使用對齊方式來組織畫面上內容區塊,勝過用框線來區分;加上適當的留白,讓整個畫面看起來乾淨,使用距離增加內容的關聯性,讓使用者更容易注意到正在閱讀的訊息、與突顯重要資訊,在較大的裝置時也考慮每段內文的長度。
  • 盡可能滿足使用者需求,或許有人喜歡螢幕可以自由切換縱橫方向,但必須視APP類型而定,像大部分遊戲會強制使用橫向畫面。
  • 內容文字放大的情況下是否會造成跑版,必須以最極端狀況考慮介面佈局,例如暱稱區塊,考慮暱稱最長字元與周邊元素最大化的樣子。
  • 給按鈕或一個可互動操作的熱區範圍,最小在44pt x 44pt以上;但在功能資訊量龐大的APP幾乎會有例外,甚至還會把熱區範圍再壓縮。
圖左1、2:玩運彩討論區、圖右2:Medium、圖右1:蝦皮

在切換縱橫方向時需要注意,頁面動態調整前後,保持目前正在瀏覽的位置;像手機版網頁在自適應佈局下,為了符合更多裝置螢幕尺寸,可能會改變內容區塊排列,但主要互動元素必須保持醒目或操作便利,如漢堡選單、標籤按鈕,可一致性放置於相同位置。

隱藏狀態欄可適時隱藏,考慮全螢幕設計可以更集中瀏覽頁面,讓互動按鈕在容易點擊範圍,勿放置在邊角或螢幕底部;在按鈕設計上使用主色系、形狀來強化可互動性,會比全寬/延伸至邊緣按鈕更好。

#不隱藏瀏海與不讓畫面被圓角切割的設計是一種考驗!?

【動畫 Animation】

讓使用者操作結果可視化呈現,即增加APP的操作感受,透過許多微互動來達成,可以是單純過場效果,或添加巧思趣味性,常被用於反饋。

  • 適當使用動畫效果,讓使用者操作集中在目前任務上,增加理解與享受操作體驗,需要注意這些效果必須有物理定律、一致性、在APP可正常運作,自定義的動畫必須遵照規範。
  • 在遊戲APP上為了增加沈浸感,會大量使用動畫效果,並不是每人的設備都是頂級,可以考慮最小化或關閉APP動畫。

【品牌  Branding】

幾乎每個APP都會有主色系、圖標、字體等等來表達品牌意象,常見的是啟動頁面主色與LOGO,並可添加少許的內文說明。

圖左為IG、圖右為蝦皮
  • 可以將LOGO圖標元素融入APP頁面中,不過於花俏以簡潔的形式呈現,可能是導航欄的顏色、字體或背景;使用較少入侵性的方式來呈現品牌。部分APP會在欄位中置入圖標LOGO,畫面若非是極簡設計,反而會成為干擾元素。

【顏色 Color】

顏色可說是品牌、APP的重要代表元素,謹慎使用可以為APP帶來良好視覺體驗,甚至影響操作、習慣;若對於配色有疑惑,除了查看系統配色指南,線上也有許多類似網站可以參考

圖左1:mobile、圖左2:玩運彩討論區、圖右2、1:ahorro記帳

顏色用途:

  • 明亮顏色可以很有活力,引導使用者操作、傳達訊息,例如使用關鍵色來告訴使用者正在作用中頁籤,在互動、非互動性操作中各別使用一致性色系,不建議在非遊戲類型APP內使用太多顏色。
  • 提供反饋與可視化數據,圖形化介面按鈕與數據,用顏色來區分項目,讓使用者依靠顏色就能辨識理解。
  • 注意目前習慣色,如紅色為嚴重、刪除或注意事項,綠色為成功、良好系統提示,若APP主色為這些色系時,可以考慮使用微互動效果來強化更重要的訊息。
  • 自動調整整個介面色系,平衡畫面延續性,例如一般地圖切換衛星地圖,會調整控件顏色以符合上方地圖顏色在整個畫面的對比,在相簿中使用透明度達到類似效果。

可以在各種環境下測試APP配色結果,例如室內外的光線差異,裝置可使用True Tone光度感應器自動調整亮度與色溫;特定APP則需注意無障礙配色使用,最佳的顏色對比度為7:1(最少為4.5:1)。

【術語 Terminology】

在APP頁面上使用的文字,都是與使用者對話,盡可能保持令人愉悅的語意。例如彈出訊息時,使用簡短與易懂的詞彙,勿顯示不明的系統提示(圖左1)或專業術語,程式碼訊息會讓人產生疑惑;有品牌自身、國際性詞彙就則另當別論。

圖左1、2:玩運彩討論區、圖右2:玩運彩即時比分、圖右1:mobile
  • 內文在簡潔、易懂情況下,很容易知道如何操作,按鈕名稱與執行動作一致,如“送出”、“新增”等等。使用平易近人的語氣,像與使用者聊天,如“您已引用N樓回文”、“真的受不了了,檢舉不當內容”。
  • 如有同系列APP或同個平台,可使用相同詞彙或圖示。
  • 使用今天、明天這種友好詞彙時,日期應該要正確,例如旅遊、訂票類型APP常有國際時區問題要注意。

【字體設計 Typography】

ios系統預設字體為San Francisco (SF),經常使用字體粗細、大小、顏色三者來區分內容重要程度,並使用內建內容文字樣式,可以保持字體佈局一致性、在動態變化上也能追蹤到每個字體大小;若不使用系統字,也僅使用一種字體樣式為佳,必須是清晰易讀。

玩運彩討論區(圖左)與ios介面(圖中)字體介於Medium至預設,mobile01(圖右)字體則為預設至xLarge
  • 內建樣式使用可參考指南中字體大小,建議七種以上尺寸適合在各裝置瀏覽,動態變化主要突顯使用者關注的內容,使其容易閱讀,並非要將所有內文都放大。
  • 會建議使用系統所提供的內容文字樣式,作為基礎,經歷過多代使用者操作證實,可以在不同頁面保持最佳易讀性;在各控件中使用,ios會依據pt點大小自動應用適合動態變化、適當調整字母間距。

五、圖標和圖像 Icons and Images

【圖像大小和解析度 Image Size and Resolution】

裝置適合圖像解析度可參考ios指南,目前較新的裝置使用2倍解析度以上圖像,以@2x表示,3倍則為@3x,在sketch、adobe illustrator等軟體匯出圖像時皆可設定大小。

圖左:圖檔質量壓縮、圖右:圖檔尺寸不整除螢幕解析度的情況
  • 使用8px為一個單位級距,確保線條在網格上清晰銳利,?不容易受到裝置解析度影響,簡單來說就是未整除裝置解析度情況下,圖像變形比例會出現小數點,較容易出現模糊。也可以使用4px為級距,在常見裝置解析度下保持最佳質量(在突顯圖像距離差異上適合使用8px,肉眼能輕易辨識並提高一致性設計)。
  • ios本身也未遵照8px規則,猜測是apple裝置解析度規格強大,使用者很難會察覺到那微小變化;若將8px規則套用到手機版網頁設計,就必須以百分比去思考切版原則。
  • 常用圖檔為png、jpg、pdf,使用8位元色調png可降低圖檔大小而不失質量,適合大部分APP使用,或使用後製圖像壓縮軟體進行調整。

【啟動圖標 App Icon】

APP啟動圖標給使用者第一眼品牌印象,曾經探討過圖標吸引力(引起注意的APP_icon),ios啟動圖標共有7組不同尺寸,有各自用途,可以40px(20pt@2x)最小尺寸做設計考量。

哪種風格圖標會吸引你呢?
  • APP設計啟動圖標重點,有單一焦點簡潔圖形、在背景中突顯、不使用照片或文字、必須為方形。

【自定義圖標 Custom Icons】

若系統預設圖標不敷使用,可自由設計符合操作的圖形,與啟動圖標涵蓋設計方向差不多,主要偏向使用者對圖形的理解與熟悉,並與APP類型、圖標樣式一致性。

左上mobile01、左下TaiwanBaseball、右上IG、右下FB
  • 很講究的ios設計,必須考量每個圖標視覺比重關係、筆畫粗細和透視方向,並實際在頁面中模擬;最後提供一個@2x尺寸可應用於其他區。

【啟動屏幕 Launch Screen】

每個APP都必須提供啟動屏幕,作為快速響應的回饋,常見做法是背景色加上圖標,也可用靜態圖像,但須提供不同解析度(或使用可延伸的圖像)。

圖左1:桌面、圖左2:marvel啟動屏幕、圖右2:pb+啟動屏幕、圖右1:pb+接著loading
  • 建議使用系統提供模板,自適應各種裝置;啟動屏幕設計應與APP第一個介面相似,避免放置文字與廣告內容。marvel透過系統本身微互動,從啟動屏幕到內頁過程,給人流暢快速感。
  • pb+其實可以使用後者當作啟動屏幕就好,在loading同時?替換背景元素;一進入APP就需要長時間loading,給人感覺並不是那麼良好,或許可以先看到重要畫面,把載入資料放在下一次使用者主動操作上。

【系統圖標 System Icons】

建議使用系統所提供的圖標,對使用者來說是熟悉的,參考圖標的含義來使用,雖說指南有分類常見任務和內容類型,不同位置使用相同圖標,也可能是不同意義;或參考”自定義圖標“規範製作適合大眾化圖標。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *