【產品經理】網站、App｜企劃、設計時須注意的X種情境和規格

文/ 小悶  原文出處/好奇小悶

所謂「規格寫得好，開發沒煩惱」，想想自己從3C數位編輯，轉職產品經理也有幾年經歷了，但在寫規格時，仍有疏漏或沒想清楚的情境。剛好最近公司內訓上課，講師提到產品設計的6種狀態，想起業界前輩<嫁給 RD 的 UI Designer>也曾介紹過頁面的極限狀態，決定先筆記列下項目，而且之後一定還會用到，可以當成企劃網站或App規格時的checklist，隨時拿出來檢查。因為使用者情境真的太多，清單會不定期更新。

• 理想狀態（Ideal State）

  使用者正常操作網站或App的資料呈現狀態，也是我們在網站介紹或App Store、Google Play的螢幕截圖，吿知使用者，產品的功能特色和操作流程。

• 空白狀態（Empty State）
  

  又可分為初次使用、使用者清除資料、找不到資料等不同情境下的資料空白狀態。因應不同狀況，後續也要規劃不同的提示或文案，引導使用者進行下一步動作。

• 極限狀態（Maximum State）
  

  1. 考量資料輸入或呈現時，有最大值、最小值的極限狀態。

2. 除此之外，資料欄位也有輸入限制，包含特殊符號、表情符號的顯示。

• 錯誤狀態（Error State）
  

  1. 錯誤情況有很多，網站或App最常見的有網路異常、server連線異常、資料載入異常、無法儲存…等，都要事先準備因應對策，例如404頁面。
  2. 錯誤狀態可加註錯誤碼，方便給使用者回報，也可以埋log，讓工程師能提早偵錯，盡快查出問題。

• 局部資料狀態（Partial State）

  1. 如果有些欄位使用者沒填，要引導他完成，同時要避免系統因為收到空值發生錯誤。
  2. 資料輸入欄位，要多考量必填或選填。選項是單選、複選、多選等情境。

• 載入中狀態（Loading State）

  1. 資料載入中的過場是網路服務一定會遇到的情境，除了讓一顆圈圈在畫面中央一直轉，可適時發揮小創意，例如用百分比呈現資料完成度，或是火箭升空的小動畫，減緩使用者因不耐煩而跳出網站。
  2. 當網站或App頁面載入中，要避免讓使用者連續點擊或點擊頁面的其他項目，有可能會導致資料重複發送或取得資料時有衝突。
  3. 載入資料難免會有TimeOut連線逾時的情況，須事先準備此錯誤的應對方法，有可能是使用者本身網路問題，也有可能是我們sever掛掉，或是IP被擋等可能。

不同於PC Web，App受限於手機螢幕大小、偏線性的操作流程，還有以下情境規格可參考

• App新舊版本相容性

  1. App若不強制使用者更新，通常會有多個版本同時使用中。
  2. 若新版本有變更欄位或增加新的資料欄位，皆須留意載入資料時的衝突。

• 首次下載安裝與再次開啟的差異

  1. 首次開啟新App，通常都有功能的介紹說明。
  2. 避免重複提示讓使用者反感，再次開啟就要多判斷不再顯示。

• 系統要求使用者同意開啟的權限

  1. 不論Android或iOS，若App功能會用到通訊錄、相機、照片、定位、麥克風、Push推播通知等，皆須在使用前跳出提示請使用者授權同意。
  2. 若使用者一開始不同意，某天忽然想用了，須偵測其系統設定，跳提示請使用者到系統設定，設為開啟後才能使用功能。

• 前後頁面繼承

  1. “列表”的資料欄位若和“詳細頁內容頁“有相關連，須同步連動。
  2. 最常見的是“加入最愛的收藏功能”，列表和內容頁的星星icon會同時填滿。

• 頁面動線

  1. App比較像是線性操作，從哪個頁面進去，返回就是哪個頁面。
  2. 規劃功能動線時，隨時要記得 按左上角”返回箭頭“或Android的“返回按鈕”會回到哪裡。
  3. 不同頁面切換時，可設計轉換效果，例：向左滑動、向右推出、向上彈出都不一樣，整支App的頁面互動邏輯要統一。

• 開啟Ｗebview

  1. App難免有些內容無法呈現，就會以Webview呈現。這時就須考慮要在App內嵌瀏覽器，或是乾脆點擊後，跳出App外開Chrome、Safari瀏覽器。
  2. 內嵌的好處是使用者仍留在App內，避免跳出後就不回來了。但缺點是若要開啟的網站結構複雜、動態效果很多，App內嵌瀏覽器就無法呈現，增加維護成本。
  3. 因為目前不管是Android或iOS，若跳離App，其實按一下左上角或返回鍵，很快就能回到App，所以近期都會評估要開啟的網站內容，若太複雜，建議就直接外開。

• 資料分次載入

  近幾年的手機硬體效能已提升許多，甚至超過電腦配備，但還是不建議App一開啟就把上千筆資料全部載入進來，應該要分次處理，滑動幾頁之後再陸續載入後半內容，或是讓使用者自己按“想看更多”再載入資料。

• 手勢下拉畫面是重整

  1. 智慧型手機發展史已超過十年，一路衍生許多使用者的慣用操作邏輯，這也是App企劃開發時要特別留意的規格。
  2. 例如：下拉手勢就是重新整理目前畫面，載入新資料。還有iPhone本身系統操作行為，點擊上方鬧鐘，會快速捲動畫面，回到最上方。
  3. App可結合功能加入使用者習慣的操作邏輯，規劃頁面動線則要避開系統的基本手勢，避免兩邊打架。

• 手勢往左滑、往右滑，可以有不同功能

  1. 除了往下拉以外，使用者也愈來愈熟練不同手勢，例如 在單個項目往左滑和往右滑，會分別開啟不同功能選項，可參考Gmail。
  2. 整個App畫面，可區分多個觸控區域，使用者的觸控手勢又可分為要滑動“整個畫面”或列表的”單一項目“，依App特性和內容而定，不一定要一開始就規劃複雜的手勢操作。

• 長壓、用力壓畫面，開啟設定或其他功能
  

  1. 長壓可選取內容或開啟其他功能，也是使用者習以為常的手勢了，若是文字內容的欄位，會建議不要漏掉長壓可複製文字的功能，方便使用者即時擷取分享，也有助於內容擴散。
  2. iPhone的3D Touch，愛用的人會說很好用，不喜歡的自然怎麼用力壓也不習慣，如果能針對3D Touch手勢開發便捷的功能捷徑，相信還是能吸引一群果粉，只是未來iPhone可能會拿掉了QQ。

• 特殊的超連結
  

  若資料欄位有網址、地址、電話號碼等，為了讓使用者能更順暢進行下個動作，不要只是純文字顯示，可串接手機系統功能，用藍字的超連結標示，方便辨識和點擊。點網址能直接開新網頁、點地址要能串接Google Maps，點電話號碼能直接撥打電話，甚至目前也能直接撥打分機了。