APP設計中選擇方式,用彈窗好,還是平鋪選項來選擇好?

這是在設計APP中常遇到的,讓用戶進行選擇的頁面。

我想請教一下哪種形式比較好?現在APP 是不是流行做彈窗形式做選擇,如果選項不多的話,平鋪選項選擇雖然直觀,但是據說是web的形式,但是我覺得更方便切換選項。

程序員表示做彈窗可擴展,層次清晰,但是如果前一步已經做了彈窗,第二部還做彈窗是不是很奇怪?

請教有經驗的設計師,在做選擇的頁面設計時,有沒有什麼規範或說法。


不同的場景、目標需要使用不同的方式。

不太了解樓主圖中的需求有什麼目標和限制,因此無法作出最優判斷。

這裡列舉一下各種 seletor 的適用場景。

模態式選擇菜單、頁面

適用條件包括但不限於:

  • 多個選項的單選;
  • 多個選項的複選(選擇日期、地區);
  • 選項字數長短不一。

由於拓展性強、兼容性好(適用於 H5 頁面),又是 iOS、Android 系統的自帶控制項,有清晰的選項標題與選中狀態,所以一般都使用模態式選擇器或者頁面,例如問題中第二張圖的 Action Sheet,和下面的圖 1。

平鋪式菜單

適用條件包括但不限於:

  • 字元數較少;
  • 需要讓用戶直觀對比各個選項。

平鋪式菜單很少見到了,最多見的應該就是性別選擇了,之前還在 iOS 6 的設置裡面看到過(類似圖 2),現在貌似也被移除了。個人認為它式微的很大原因是拓展性、可讀性都較差,統一 2~3 個字元的選項文案還好,若其中一個選項多一個字元就很彆扭了,超出 3 個選項也沒位置放了,例如問題中第二張圖的【對接屬性】選項,選項標題「對接屬性」與上方的其他標題「時間」、「標題」等不一致,選中狀態不明顯(只有一個藍點),點擊熱區不明確,還來個 web 2.0 的平鋪式菜單樣式,有點尷尬。

圖 2

以上。


謝,app交互設計中其實有一個說法,沒有最好的設計,只有最合適的設計。之前的回答其實也說了,不同情況需要不同的去看待這個問題。

平鋪且透傳的設計適合選項不太多、內容較少且需要視覺表現的情況,這個方案的優點在於:可以充分的做視覺表現,最大程度上的貼合app的主視覺風格;用戶在操作交互起來更直觀明確;操作效率也較高;減少二級彈窗的使用,可以為後面如果需要別的彈窗留邏輯空間。

彈窗的形式優點在於:系統原生、開發迅速;可以簡單高效的拓展新功能;學習成本低等等。但表現形式上就比較尷尬,且彈窗作為模態化設計會中斷用戶操作流程;還有就是不利於後面新彈窗需求的拓展。題主說的雙彈窗,基本上是不能忍的,出現就是比較災難了。

總之沒有哪個好一說,有些輕量級的應用,使用彈窗也很合理簡單;有些偏沉浸式的app則可能需要使用更能夠設計發揮的外顯平鋪透傳。具體問題具體分析吧


場景是用戶體驗的根本,沒有操作場景,說什麼體驗都是耍流氓。兩者其實是各有利弊,所以要充分理解其利弊,並充分利用起來才是最好的體驗方式;例如,如果需要用戶在第一時間做出選擇的,儘力平鋪方式展示;如果對用戶要有一定提示或者操作需要可以中斷的建議選擇彈窗方式;個人愚見,僅供參考


這種彈窗的設計主要是考慮到用戶的使用環境,以及此欄目的使用頻率等,平鋪會給用戶選擇性,彈窗帶有警示的屬性適合單次或者小頻率操作(個人理念)。


需要根據需求來考慮,如果選項屬於不會擴展內容的-且是單選的,使用彈出會方便直觀。如果內容會擴展,並且邏輯上有可能多選,用平鋪會有優勢。至於彈兩次這個也是可接受的。


推薦閱讀:

交互設計中的「同形異構」與「同構異形」
真的越長大越沒有創造力么?
工業設計 | Research做到什麼程度,才能開始作品集創作?
每個年輕設計師都需要知道的幾件事
一個難以拒絕的設計需求

TAG:交互設計 | 交互設計師 | APP設計 |