UI/UX｜跳脫iOS/Android 的限制，為「使用者」做設計吧

但只要一涉及到App，我們就很容易開始把使用者想得特別複雜。

我們會想要為不同系統的App 設計不同的介面和操作流程，因為我們認定不同平台的使用者理解的 ... UIUXDesignToolPMCareerResourceAAPDPickedFollowusonFacebookUI/UX｜跳脫iOS/Android的限制，為「使用者」做設計吧H.Ching｜林筱晴FollowSep10,2020·12minread「你熟悉iOS與Android的設計規範嗎？你了解這兩個平台在UX上的差異與限制嗎？你能針對兩個平台的使用者做出相應的UI設計嗎？」如果看看求職網、職缺簡介，會發現業界很喜歡把以上這些問題當作篩選UI/UX人才的條件之一。

而許多新手教學的文章也很喜歡把兩者區分開來，強調iOS/Android平台的差異和使用習慣的不同。

無形中，這也形成了一種「針對平台做出不同的設計才是正確做法」的觀念。

這種觀念的強化自然有好處：會促使年輕的設計師更用心研究雙平台的差異，了解兩個系統的習慣與優缺點。

但是這樣的觀念也會帶來可怕的後果：設計師們開始糾結於做出平台差異，在元件與介面上不斷地討論這「有沒有符合設計規範」。

現在，我想要邀請你，和我一起暫且丟掉一切iOS與Android的包袱。

我會告訴你：為什麼刻意強調平台差異是一件不必要的事情在雙平台上用同樣的UI有什麼好處什麼時候適合做出平台差異以及最後，什麼是為「使用者」做設計？關於平台差異這件事情我們都知道，iOS有HumanInterfaceGuidelines(HIG)，而Android也有MaterialGuidelines。

這些設計規範會隨著不同平台有不同的作法或習慣，可能是元件、互動的設計或者是icon的樣式。

由於這些guideline上的差異，我們經常會誤以為UI/UX有分「符合iOS規範」以及「符合Android規範」的正確作法，而在任何一種平台上套用另一種平台的元件都會造成使用者的混亂，是錯誤的設計。

但是很奇特的是，這些觀念和差異都只有在App上才會突然地適用。

想像使用者正在用手機看一個網站：使用者用手機打開瀏覽器看網站的時候，無論dialog怎麼顯示、navigation怎麼設計、icon長什麼樣子……他們都用得好好的，對吧？網站並不會偵測使用者的系統，顯示不同的網頁UI。

但只要一涉及到App，我們就很容易開始把使用者想得特別複雜。

我們會想要為不同系統的App設計不同的介面和操作流程，因為我們認定不同平台的使用者理解的介面、圖示或UX是不同的。

但實際上呢？設計規範也是彼此學習、模仿出來的會強調「按照設計規範」的前提，就是預設規範都不會改變，或者兩個平台的設計規範是無法通用的。

但如果我們實際來看看大部分的app：1.常見的BottomNavigationiOS使用TabBars（註一）的歷史已經非常悠久，一直沒有變過。

而過去Android的架構大致上都是利用由「漢堡」（三條橫線）叫出來的NavigationDrawer做導航。

如果沒有用漢堡，也會用畫面上方的Tabs做導航。

於2016年正式加入MaterialGuidelines的BottomNavigation但是由於行動裝置的普及，易用性也愈發被看重，比起漢堡或Tabs，符合拇指原則（thumbrule）的BottomNavigation顯得更加合理。

2016年的時候，MaterialGuidelines也正式將BottomNavigationbar加入設計規範。

註一：TabBars為iOS放置在畫面底部的最高層級導航，是iOS官方名稱，不可與Android的Tabs混淆2.靈活、有彈性的Chips和TabsChips是MaterialGuidelines中一個很好用的小東西，基本樣式為多個圓角矩形並排，可以當作選單、標籤、動作選項或是篩選條件等等。

MaterialGuidelines中Chips用法的示範雖然Chips在HIG裡面目前（貌似）還沒有出現，但在各大產品中已經廣泛使用，不管是UberEats篩選餐廳、Instagram的探索頁標籤、GoogleMaps的action列……都可以見到它的蹤跡。

Tabs也是一個HIG裡面沒有涵蓋的元件，和Material的tabs相應的元件在HIG中叫做SegmentedControl。

這類元件會因為裝置寬度的關係而被大幅限縮使用範圍，在選項超過三、四個以上時，就失去了作用。

這時候使用ScrollableTabs，就可以靈活呈現更多不同選項了。

所以雖然不符合HIG規範，iOS平台上的產品大多都還是使用tabs的設計。

3.確認和取消，誰在左邊？在Apple出來鬧場之前，設計師一直都是遵循著Windows的規範：將primaryaction放在左邊，secondaryaction放在右邊。

Windows的alert樣式：Delete/CancelWindows的邏輯是，人的閱讀方向為左到右，因此左方按鈕的位階比右方按鈕高。

這時候自然應該將primaryaction（如：確認）放在左邊，這樣使用者看完內文敘述之後，向下看，第一個看見的按鈕就會是主要的選項。

而Apple認為，由於人的閱讀方向為左到右，因此目光掃過所有選項以後，視線必定會停留在最右方的按鈕，這時候這個按鈕便應該是primaryaction。

同時，右方的按鈕帶有「前進」、「下一步」的意思，而左方按鈕則是「後退」、「上一步」的意思，因此將「取消」這一類的secondaryaction放在左邊是更為合理的位置。

Mac的alert樣式：Cancel/Delete而Android系統原先並沒有特別規定究竟哪一個按鈕放在哪一邊，因此當時的開發者大部分都遵循常見的Windows規範，將primaryaction放在左邊。

一直到Android4.X版本以後，才和Apple一樣開始將primaryaction放在右邊（因年代久遠，此為考古資料，如有錯誤請告知作者）。

現在，在app上Cancel/OK的規則已經是佔大多數，而受到app影響，許多網頁UI也都採用Cancel/OK的邏輯。

至於Windows什麼時候會跟進呢？也許會是在不久的將來吧（笑）。

既然平台差異經常在改變，那麼刻意強調平台差異就成了一件不必要的事情。

我們該做的並不是為單一平台的用戶設計，而是為持有行動裝置的「使用者」設計。

在本質上，iOS和Android是一樣的是的，無論退一步或退一百步看，不管你的使用者屬於哪一個平台，他們最終都是單純的「產品使用者」。

只要是使用者，UX概念都是通用的。

如果拋開設計規範上的諸多細節，你會發現HIG和Material要表達的核心概念——或者說基本原則——都是一樣的：可以執行的動作或選項，應清晰、使人不易混淆按鈕、選項的觸控範圍應符合人體工學，並讓人清楚知道可以點擊Icon應清晰、容易辨識，且對應的功能應符合使用者預期的行為同位階的物件應產生同位階的結果UI樣式應兼顧美感與易用性，視覺的美觀應建立在良好的usability之上（…可以無限寫下去，所以下略…）那就像是每一國的法律不一樣，但大致上會符合一些基本的道德觀，例如不要殺人、不要傷害、不要偷竊、不要破壞……等等。

當我們將不同平台的使用者一視同仁地視為「使用者」，就會發現我們要解決的問題很簡單：如何讓所有人都能更容易使用這個產品。

既然目標是讓「所有人」更容易使用，那麼，為何不採用同一份設計稿呢？▍共用設計稿的好處1：為使用者減少學習成本如果你的設計稿針對iOS和Android平台做了不同的設計，代表每一次你的用戶換手機、換平台，就要重新學習一次產品使用的方法，重新培養一次使用習慣。

這是我在簡單用戶訪談時蒐集的紀錄：iOS→Android的用戶A：「我換手機之後，用__(某產品X)__的時候習慣的手勢都不見了！而且原本左滑右滑就可以叫出的功能，變成一定要點下icon，真的很不方便。

」Android→iOS的用戶B：「換手機之後真的很多東西要重新學，不過至少打開__(某產品Y)__的時候介面是一樣的，所以還是知道怎麼用。

」另外如果你的產品除了手機之外也適合平板操作，那麼你的用戶有可能是跨平台的使用者，例如：使用Android手機+iPad。

對於這樣的使用者來說，兩邊的操作邏輯或使用方式不同，也是徒增困擾、增加學習成本的作法。

▍共用設計稿的好處2：為ProductTeam節省設計與溝通成本當我們不需要去維護兩份不同架構或流程的設計稿時，ProductTeam可以花更多時間優化體驗、做A/BTesting、研究產品使用者真正想要的是什麼。

溝通新feature時，我們就不再需要分成兩條路線討論，而是專注於滿足人性和本能。

▍共用設計稿的好處3：維護品牌意識和產品形象最經典的範例或許就是手遊介面了吧！手遊的UI/UX設計都會遵循自己的一套規則，並不會去刻意符合任何一個平台的設計規範。

這樣做的好處就是用戶對遊戲介面會有一定程度上的既定印象和期待。

如果我現在說「Instagram」，你的腦海中必定會浮現出跟我想像中差不多的畫面，即便我是iOS用戶，而你是Android使用者。

統一的產品形象，讓產品外的人際互動變得更容易。

「你不會發限時動態？我教你，在這裡～」「只要點這個，然後按發布，就可以了！」Instagram在iOS（左）和Android（右）平台上的介面（圖片來源：AppStore/GooglePlay）可是iOS和Android真的可以完全一樣嗎？不要騙我沒讀規範喔！還是要區別吧？需要做出平台差異的狀況▍如果沒有文字輔助，不要挑戰慣用的抽象圖示大部分的icons都是用常見的物體或既定印象做圖示，所以不管是哪一個平台的用戶，都可以輕鬆地理解。

但是總有一些特例，比方說「分享」，在兩個平台上的系統icon就是完全不同的：圖一：Android（上排）與iOS（下排）系統icons；圖二：Android與iOS的「分享」icon。

像「分享」這一類的圖示在兩個平台上有完全不同的設計，而表達的概念又是抽象的動作，不像具象的物體那般容易理解，因此在沒有文字輔助說明的情況下，就不適合共用同一個設計囉～▍在不影響產品風格和體驗的情況下，如果可以節省開發成本當然也很好理想中，設計師當然都希望能夠將產品客製化，但回歸現實來看，有時候不一定有時間將所有元件客製化。

舉例來說，現在我們要做一個switch元件，應該客製化還是用原生的呢？如果產品UI有強烈的視覺風格需要遵循，當然可以考慮客製化，因為不管switch長什麼樣子，使用者並不會因為長得跟系統不同就不懂得如何使用。

但如果對產品風格的塑造或是體驗的優化沒有太大影響的話，那麼使用原生的元件也是節省開發成本的好方法。

▍以及一些例外，像是實驗性質的產品或預算不足的團隊當然到底要不要遵循設計規範或是大量使用原生套件，還是要看每一間公司每一個團隊自身的能力和策略走向。

如果是小步快跑的實驗性質快速開發，或是時間金錢預算很緊的小公司，就要自己斟酌。

原生套件也很適合還不確定市場反應，想要快速做出MVP試水溫的新創團隊。

（不過這種算是特例，也不是設計師本身工作的範疇，這邊暫且不討論～）拋開平台包袱，為「使用者」設計如同前面有提到的，為什麼用當我們用手機看網站，網站的UI/UX都沒有考量任何平台差異或是設計規範，但我們從來都不會覺得有什麼重大問題？因為RWD網站的邏輯就是為使用者設計、為行動裝置設計、為不同的螢幕寬度設計。

無論使用者用哪一種手機，只要使用方式符合直覺、能在行動裝置上順暢使用，並根據不同裝置寬度顯示出最佳化的介面，就是好設計。

就像Airbnb，單看介面其實分不太出來現在究竟是在iOS、Android還是web上。

我們可以發現不管是UI的視覺風格、使用流程或是整體的操作方法，他們都沒有明顯地刻意遵循哪一個設計規範。

他們的策略，就是將所有的使用者——不管在web上還是app上——都視為單純的「行動裝置使用者」。

他們的設計，就是以「在行動裝置上能有良好的操作和體驗」為目的，所規劃出來的UI/UX。

把iOS和Android使用者通通歸類為「行動裝置使用者」，就能為他們尋找最符合人性和行動裝置特性的解法。

將使用者區分出所謂的iOS或Android用戶其實沒有意義，我們真正該做的是將他們通通視為「行動裝置使用者」，並針對行動裝置做出最適合、最容易操作且最流暢的產品設計。

與其區分iOS解法和Android解法，我們更應該致力於尋找一個適用於行動裝置，符合人性和直覺的解法。

因為符合人性和直覺的產品，才是使用者真正想要的產品。

林筱晴H.Ching-UI/UX/平面設計師林筱晴H.Ching-UI/UX/平面設計師,Taipei,Taiwan.5.1Klikes.個人獨立工作室，專長UI/UX、logo、活動視覺及各項平面設計。

www.facebook.com↓↓如果喜歡這篇文章，請幫我掌聲鼓勵鼓勵～也歡迎追蹤，我會不定時發布新文章！AAPD — AsAProductDesignerAAPD…2.3K4UIUXDesigniOSAndroid2.3K claps2.3K4AAPD — AsAProductDesignerAAPD專注於分享數位產品設計的相關資訊，並且致力在平台上創造更多的交流與互動，我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等，希望透過這些知識的傳遞，能夠降低每位設計師成長的過程中所遇到的阻礙。

歡迎來信投稿：[email protected]｜林筱晴Follow為設計癡迷的實戰派UI/UX設計師——理論是拿來用的！派不上用場的理論都是空談。

//Contactmeat:[email protected] — AsAProductDesignerAAPD專注於分享數位產品設計的相關資訊，並且致力在平台上創造更多的交流與互動，我們關注UI設計、UX設計、設計師的個人成長、設計趨勢與產業動態等，希望透過這些知識的傳遞，能夠降低每位設計師成長的過程中所遇到的阻礙。

歡迎來信投稿：[email protected]