• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 淺談交互設計中單選複選和開關如何使用—- 設計教程




    教學主題: 淺談交互設計中單選複選和開關如何使用

    大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

    今天的這個教學主題是: 淺談交互設計中單選複選和開關如何使用

    這教學的重點為這幾點 [ 如何,使用,開關,設計,交互,選擇,選項,優惠,頁面,開啟, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    今天來探討工作中遇到的一個問題:單選、複選、開關。先說一下前提,淘寶的確認訂單頁面,積分抵扣是用開關做選擇的,而唯品用的是複選框,同樣都是選擇,複選框和開關到底哪個更合適?和同事討論了半天也沒得出一個明確的原則。因此想寫篇文章總結一下單選、

    今天來探討工作中遇到的一個問題:單選、複選、開關。先說一下前提,淘寶的確認訂單頁面,積分抵扣是用開關做選擇的,而唯品用的是複選框,同樣都是選擇,複選框和開關到底哪個更合適?和同事討論了半天也沒得出一個明確的原則。因此想寫篇文章總結一下單選、複選、開關應該如何使用。

    先來解釋一下單選、複選、開關這三個詞的定義:

    淺談交互設計中單選複選和開關如何使用

    單選,通常都在在圈圈中顯示圓點或者打鉤、在同一個列表中只能選擇一個選項,點擊熱區為整個列表項。

    淺談交互設計中單選複選和開關如何使用

    複選,通常都是在方框中打鉤選擇,或者沒有方框僅用打鉤選擇、在同一個列表中可以選擇多個選項,點擊熱區為整個列表項。

    淺談交互設計中單選複選和開關如何使用

    開關,擬物化開關的扁平化設計,常用於功能的開啟和關閉,同一個列表中可以出現多個開關。開啟通常指開啟及操作,即某個選項開啟后,會有後續操作或者動作;關閉通常指關閉某項功能,以及關閉功能下的選項。

    例如iOS系統設置中開啟與關閉WiFi(如下圖)

    淺談交互設計中單選複選和開關如何使用

    在詞條定義方面我們可以看出單選其實是爭議不大的,一般最常用的三種狀態如下:

    1、只能選擇一個選項、且必須所有選項保持可見時,在本頁面使用,下圖為唯品會結算頁面單選支付方式。

    淺談交互設計中單選複選和開關如何使用

    2、只能選擇一個選項、且內容不需要保持本頁面可見時,在下級頁面進行選擇時使用。下圖為淘寶確認訂單頁面開啟花唄分期后,在分期詳情頁面進行單選。

    淺談交互設計中單選複選和開關如何使用

    3、只能選擇一個選項、且內容不需要保持本頁面可見時,使用下拉菜單進行選擇時,下圖為京東白條頁面下拉菜單選擇優惠券。

    淺談交互設計中單選複選和開關如何使用

    而複選和開關是比較有爭議的,我們回到文章開頭的問題:淘寶的確認訂單頁面,積分抵扣是用開關做選擇的,而唯品用的是複選框,同樣都是選擇,複選框和開關到底哪個更合適?我們來重點探討一下:

    淺談交互設計中單選複選和開關如何使用

    淺談交互設計中單選複選和開關如何使用

    對比唯品會的結算頁和淘寶的確認訂單頁面,唯品會無論是在Android系統還是iOS系統,都使用了複選框並將優惠的金額獨立顯示在列表項右側;而且複選框點擊區域更大,更適合唯品幣、唯品卡這種誘導用戶享優惠且比較隨意的選項。

    而淘寶在Android上使用了複選框,且複選框的位置在列表右側,優惠金額和其他文字融合在一起,不夠獨立突出,也就是讓“用戶看到此優惠可選”和“優惠了多少錢”相比,淘寶選擇了先讓”用戶看到此優惠可選“;但在iOS系統上,淘寶使用了開關,優點是icon比較大,開啟后視覺反饋更強,缺點是和複選框相比點擊區域比較小,用戶操作需要更慎重更精準。但為什麼要在兩個系統中做出不同的設計?iOS系統和Android系統都頻繁使用開關,Material Design中也把開關作為了基礎元件,並不存在差異化設計的需求,是為了做a/b test嗎?如果有淘寶的UED偶然看到這個問題,可以來解答一下。

    但是單從詞條定義上來說,唯品幣、唯品卡和天貓積分、天貓點券一樣,都是選擇了之後不會有後續操作的選項,而且複選框和開關相比,複選框點擊區域更大、更容易點擊,在這裡使用複選框是更合理的選擇。

    因此我的結論是:

    唯品會可以堅持使用複選框,而且複選框放在左側,更容易突出右側的優惠金額,但選中后的視覺反饋可以作出加強。

    淘寶上我更贊同天貓積分、點券等沒有後續操作的選項使用複選框,而花唄分期是開啟後有後續操作且需要慎重選擇的選項,使用開關會更合適,在設計上可以區分對待。但如果考慮到設計的統一性,其他選項也可以使用開關。

    設計沒有對錯,只有合不合適。複選和開關都能達到相同的效果,但不同APP的選擇卻不同,我們要弄清楚他們為什麼要這麼設計,知道不同設計的優劣,才能在我們自己的設計中更好的運用,而不是盲目模仿大公司的設計。

    最後給京東一點建議(如下圖)

    淺談交互設計中單選複選和開關如何使用

    左側這張圖片是京東白條現在選擇優惠的設計,當用戶進入購物的心流狀態時,很容易忽略白條優惠,因為它設計的實在太不明顯了。京東白條目前還是推廣階段,是希望更多的用戶因為優惠而嘗試使用京東白條的,因此在這個階段,建議使用更明顯的優惠方式開關,開啟后默認選擇一個優惠,且用戶可以下拉選擇其他優惠。這樣的設計在視覺上更加吸引用戶,優惠的反饋更強。

    總結:

    淺談交互設計中單選複選和開關如何使用

    只能選擇一個選項、且必須所有選項保持可見時,才使用單選框,不然可以使用下拉菜單或下級頁面

    淺談交互設計中單選複選和開關如何使用
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    在同一個列表有多項選擇,且選擇后不會有後續操作、建議使用複選框。但在某些場景下(例如購物),選中后需要給出用戶更加明顯反饋。

    淺談交互設計中單選複選和開關如何使用
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    功能的開啟與關閉、某個選項開啟后,會有後續操作或者動作、建議使用開關,如果不是需要用戶慎重選擇的選項,開關的點擊熱區可以設計的更大一些,方便用戶操作,當然需要考慮視覺反饋和設計的一致性。

    評論中有童鞋說淘寶的設計也許根本沒有想那麼多,這樣的設計是偶然的結果,分析偶然更像是一種意淫。但無論是淘寶、京東、唯品會的設計,尤其是結算頁這麼重要的頁面設計,一定是他們的UED團隊經過深思熟慮,多種方案優中選優的結果,每一個icon、字體的大小、列表的間距都經過了數次迭代。我不覺得是偶然的結果,至少我們團隊每做一個需求都是提供幾個方案,每個方案都是細節上稍有不同,從中選取一個。如果設計都是偶然的結果,那就不存在設計理論了,UED團隊也就沒有多少存在的意義了,淘寶和京東我都不可能有用戶數據,但我喜歡大膽的去分析他們的動機,大膽的去按照自己的想法去優化,也許我的分析有一些正好是正確的呢,這是我個人的成長方式。

    我還在成長期,很多觀點都是自己的大膽分析,皆不具有規範性參考、每個人的觀點都不同,用辯證的眼光去看,取其精華去其糟粕。

    感謝大家關注我的公眾號「交互筆記」,不定期更新,你們的關注是我持續寫作的動力。

    淺談交互設計中單選複選和開關如何使用

    看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

    希望我們所介紹的 淺談交互設計中單選複選和開關如何使用 這教學會喜歡

    文章標題: 骨子愛創意- 淺談交互設計中單選複選和開關如何使用–轉載請註明來源處

    本教學分類為平面理論教程中的 設計教程相關教學

    文章相關關鍵字為: 如何,使用,開關,設計,交互,選擇,選項,優惠,頁面,開啟,

    本文永久連結 :淺談交互設計中單選複選和開關如何使用

    本文轉載自 :VIA