很多人對APP中的卡片設計習以為常，但對于卡片設計流行的原因，優點，以及如何做好卡片設計卻可能不甚了解。關于這些問題，彩云之前也寫過一篇非常受歡迎的卡片設計經驗原創文章《想做好卡片設計，原來要注意這么多細節》，文章中講了非常多的卡片設計實用技巧。今天這篇國外大佬寫的文章，算是從為什么這樣做的角度來分析卡片設計，一起來學習吧。

從Instagram和Facebook這樣的社交媒體應用到亞馬遜這樣的電商平臺，卡片設計似乎是無處不在的，這些大廠廣泛應用使得卡片設計很快流行了起來。

作為一個信息容器，卡片能承載包括文本、富媒體、按鈕等所有UI元素?；谶@些內容，卡片設計可以根據不同的設備和屏幕調整其大小，平衡界面視覺和用戶體驗。

什么是卡片設計？

卡片是一個UI組件，包含了某一個內容的信息和操作。卡片可以包含各種元素，但它們都應該屬于同一個主題。

這樣做的目的是為了避免冗長的文字，并呈現更多的內容。即使從設計的角度來看，用戶可能不熟悉卡片的概念，但他們馬上就知道如何使用它們，因為它們與實體卡片是一樣的。（彩云注：這個就是用戶心理學中隱喻的運用）

為什么它會如此流行？

卡片之所以流行，是因為它們能更好的把控內容。卡片是模塊化的，所以不同的內容可以堆疊在一起，而不需要注意它們的差異。

卡片通過強制內容適應卡片邊界和卡片布局上的限制來聚焦內容。設計師喜歡通過卡片混排大量內容，而無需擔心設計會變得雜亂無章。

卡片可以將內容分解成易于理解的小塊，以便用戶與之互動。通過給內容一個容器，卡片向用戶表明內容是真實和感性的。

卡片 UI 設計流行的原因還有很多：

• 直觀：卡片在界面中看起來與現實世界中的卡片相同，它們對用戶來說似乎很常見。在卡片成為移動和網絡應用中的流行元素之前，它們在現實生活中無處不在：名片、棒球卡、便簽?？ㄆ砹艘环N有益的視覺類比，它允許我們的大腦直觀地將卡片與其所代表的內容聯系起來，就像在現實生活中一樣。

  
  

• 易于閱讀：卡片不占用太多空間，并敦促設計師優先考慮其內容。不同的是，每張卡片都變成了易于閱讀的內容?？ㄆ層脩舾菀渍业剿麄兏信d趣的內容。

  
  

• 有吸引力且對用戶更友好：基于卡片的設計通常非常依賴視覺效果（尤其是圖片）；就信息架構而言，視覺層次會更加清晰。使用圖片有助于使基于卡片的設計比不在卡片中排列的相同內容對用戶更具吸引力。

  
  

• 有利于響應式設計：卡片是矩形的，可以平滑地調整大小，以適應不同屏幕的水平和垂直正面，這意味著用戶可以在所有設備上獲得統一的體驗。

  
  

• 便于分享：卡片可以鼓勵用戶在社交媒體上分享內容，因為它允許用戶只分享特定的內容，而不是整個頁面。

  
  

什么時候應用卡片設計？

這通常是當你有:

• 基于搜索的界面:  卡片能通過模塊的內容快速顯示合適的內容，這使得用戶可以深入了解自己的興趣?；诳ㄆ脑O計是一種非常適合呈現這類內容的方式。

• 
  

• 信息瀏覽：當用戶瀏覽信息時，卡片的兼容性更好。

• 
  

• 任務管理：當可以將流程中的單個任務作為卡片進行說明時， 可以輕松組織卡片以獲取任務列表。任務管理應用在使用卡片式界面為用戶創建儀表板方面做得很好，其中每張卡片代表一個單獨的任務。

• 
  

• 類似項目：卡片最適合于異構項目的集合（當并非所有內容都是相同的基本類型時）。

• 
  

• 可視化分析:  儀表板通常在同一頁上同時顯示各種內容樣本。在這種情況下，卡片類比可以幫助在不同物品之間創造出更明顯的差異，其中每張卡片可以適應不同的角色。

卡片解構

卡片的布局可以不同，以支持它們包含的內容類別。下面的組件通常可以在多種卡片樣式中找到。

(1)富媒體: 卡片可以包含縮略圖，以顯示圖片，插圖，頭像，Logo，圖標或圖形。

(2) 標題: 標題文本可以包含相冊或文章的名稱或標題。

(3) 描述: 支持文本，如文章摘要或簡短的描述。

(4) 行動按鈕: 卡片可以包含用于操作的按鈕。

(5) 副標題: 副標題文本可以包含詳細介紹，如文章的署名或標記的位置。

(6) 圖標: 卡片可以包含操作圖標。

設計技巧

有一些小的技巧可以快速提高卡片設計細節。

1. 使用相關主題的圖片

圖片是卡片設計的主角，你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像，卡片還可以包含插圖、帶有淺色背景框的圖標或任何其他類型的富媒體，但需要與內容主題相關。 

2. 增加視覺層次

卡片內的層次結構有助于引導用戶對重要信息的閱讀。將主要內容放在卡片的頂部，并使用排版來強化主要內容。使用空白和對比來分隔需要更多視覺分隔的內容區域。（彩云注：視覺層級對于信息表達至關重要！） 

3. 限制內容長度

一張卡片應該只包含重要的信息，并提出一個相關的觀點，以獲取額外的細節，而不是完整的細節本身。當我們試圖在一張卡片中放入太多內容時，卡片可能會變得很冗長，并失去與卡片類比的實際聯系，因為它不再像一張卡片了。 

4. 避免嵌入鏈接

不要包含內聯鏈接，卡片應該自己鏈接。嵌入文字鏈接會讓用戶誤操作。 

5. 區分操作主次

包含不同操作的卡片應該在視覺上形成對比。在下面的例子中，我通過使用一種較輕的色調而不是主要的按鈕風格來降低后續操作的視覺強度。 

6. 去掉分割線

對于新手設計師來說，用分割線來區分內容是一種常見的方式，以此定義不同的組。這些邊框會造成不必要的視覺干擾，從而影響內容。

如何做到視覺上更美觀？

APP中的卡片并不是純粹的擬物概念，但通常情況下，使用一致的類比和物理原理能幫助用戶理解界面并分析內容中的視覺層次。在卡片的情況下，你可以做幾件事:

1. 使用圓角

在形態上與真實世界的卡片進行視覺對比。圓角更有效，因為它們讓我們的眼睛容易跟隨視覺動線，“因為它更適合頭部和眼睛的自然運動”。 

2. 增加一個輕微的外邊框或者投影

增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創造了一個層次，這有助于我們區分UI元素。

然而，在設計中添加陰影并不像聽起來那么簡單。有時候設計師會過分強化投影效果，讓原本看起來不錯的設計看起來很廉價。避免使用純黑色的陰影。

3.注意字體和留白

重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白，讓用戶有時間處理并進行視覺重置，有精力看完一張卡再到下一張。

選擇簡單和基本的字體，因為基本的排版最大限度地提高了可讀性，并有助于瀏覽。

一些優秀卡片設計的例子

讓我們看看一些真實項目中的卡片設計案例：

信息流中的卡片設計

保持信息流卡片簡單是很重要的。它們應該有一個一致的、重復的結構，但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素，以使讀卡片的人更容易理解它們。 

由Diseno Constructivo和Webpixels設計

他們突出特色圖片和標題作為最突出的元素，這能幫助用戶決定文章或發布的內容是否適合他們。

電商卡片設計

產品卡片是一個很重要的東西，它可以幫助你將訪問者轉化為客戶。一張優秀的產品卡片應該能夠吸引人們的注意，激發人們獲得產品的欲望，激勵人們購買，并在搜索結果中得到高效推廣。 

由Webpixels設計

產品的名稱應該放在最顯眼的地方，這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語，所以你需要一個高質量的產品配圖來設計完美的產品卡片。

如果產品有特價，不僅要在價格欄中注明促銷價格，還要注明常規價格，以及客戶可以節省多少錢。

個人中心卡片設計

簡介卡已經成為一個應用或網站中的功能模板。隨著個人品牌變得比以往任何時候都重要，卡片設計在這里也能發揮重要作用。 

由Neelesh Chaudhary設計

就像每一張卡片一樣，配置文件卡片也是一個UI組件，它包含了對它所代表的內容至關重要的信息。為了達到你的目標，你要向其他人推銷你自己。

確保只包括必要的信息(例如，照片，名字，職業)，讓你的“關于”頁面有剩余的細節來完善你的個人資料。

儀表盤卡片設計

儀表板的設計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據儀表板的類型，每張卡片可能包括概要信息、通知、快速鏈接或導航設計元素、關鍵數據、圖表和數據表。確保你為每個元素使用了正確類型的卡片。 

由Simmmple設計

儀表盤卡設計允許用戶決定他們想要關注哪些數據。易于理解的UI，允許用戶精確地控制哪些數據需要在儀表板的前端做好。

只包括最相關的信息，為用戶使用方便。當你的數據集在一起看更容易理解時，找到在一張卡片上顯示它們的方法。但是要小心，不要讓用戶感到困惑。

日常計劃卡片設計

看板任務卡似乎是一件非常簡單的事情——拿一張便簽，寫下你需要做什么，然后把它貼在墻上。這些卡片必須包含需要行動的單位數量。它們還可能包含各種各樣的其他信息，清楚地傳達了必須做什么。 

由Neelesh Chaudhary設計

卡片上包含的信息包括任務的名稱和重要的細節，如任務的類型和誰擁有它?？窗蹇ǚ旁跔顟B類別下。最基本的狀態類別是“計劃要做”、“正在進行中”和“完成”，但是狀態可能因項目而異。

卡片結構最適用于添加或刪除任務這樣的小改變，而不是改變像你的總體目標這樣的大想法。

總結

有幾種方法可以使卡片設計更加有效。通過最初定義和觀察卡片，我們可以更好地了解跨行業的這種設計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動。卡片在提供許多不同種類內容摘要的環境中尤其有效，而不是簡單地作為內容列表的現代替代品。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

編輯導讀：在很多設計中，選擇錄入類組件的理解和使用都比較模棱兩可，很多其他產品在實際應用中往往也不夠規范，使產品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景，與你分享。

一、前言

不久前在進行一個Web端HRM系統的需求設計，場景是對于從企業離職的員工，HR可以根據員工能力和表現選擇是否將其設置為優秀離職人才，對于優秀離職人才將進行定期關懷，以便后續重新返聘的可能。在設計過程中，對于設置優秀離職人才這個交互，感覺使用單選框、多選框、開關都能達到目的，究竟哪一種組件才是最合理的選擇呢？

這個問題讓我回想起之前在很多設計中對于這幾種選擇錄入類組件的理解和使用都比較模棱兩可，很多其他產品在實際應用中往往也不夠規范，使產品體驗的一致性受到影響。本文將具體探究下這幾種組件的特性和適用場景：

二、單選框（Radio）和多選框（Checkbox）

1. 來源

1）單選框

單選框一般被認為來源于收音機(Radio)上的物理按鈕，當一個按鈕被按下時，另一個按鈕將會被彈起，使得永遠只有一個按鈕處于被按下的狀態。

這種說法可能也不夠嚴謹，因為收音機上的按鈕在被按下后，不僅呈現出了“按下”的狀態，同時也會立馬觸發收音機的廣播，即立即生效。實際上絕大多數UI界面中無論單選框還是多選框一般都是僅作為錄入，觸發生效往往需要配合“提交”操作來進行。

2）多選框

多選框來源于生活中常見的各種多項選擇場景，如飯店菜單、考試多選題等。多選框一般也是作為內容錄入的組件，一般在進行選擇后同樣需要配合后續的“提交”動作，就像選擇菜品后下單，選擇答案后交卷，這種“選擇類”場景多用在表單或者表格中。

多選框還有另一種“設置類”場景，這種場景下多選框用于啟用某種模式、應用某項設置，與開關（Switch）非常類似，這也使得多選框在實際產品中的應用要比單選框復雜得多，后文將詳細闡述多選框與開關的使用區別。

2. 簡單定義及外觀樣式

1）單選框

可以概括為從最少兩個或兩個以上的互斥關系選項之中選擇一項的組件，外觀樣式通常由“圓形外框+文字標簽”組成，選中時圓形外框樣式發生改變表明選中狀態。

2）多選框

可以概括為從多個并列關系的選項中選擇多個的組件，多選框最少可以一個都不選。外觀樣式通常由“圓形或方形外框+文字標簽”組成，選中時一般在外框中出現√表明選中狀態。與單選框相比多選框還有一種特殊的“半選中狀態”（half-selected）,一般出現在表格（Table）或者樹選擇（Tree select）中。

3. 交互細節

1）觸發區域

單選框和多選框本身外框尺寸都比較小，因此需要將觸發區域增大至整個標簽范圍，方便用戶點擊

2）排版

單選框和多選框在B端各類表單中應用較多，在頁面空間允許的范圍內，最好將選項縱向對齊排列，方便用戶直觀比較，需要橫向排布時，選項間應該設置清晰明顯的間隔。

3）單選框的容錯機制

單選框在選擇過后一定要有一個選中項，因此就不能恢復至“空狀態”。在比較典型的社交場景中，一些涉及隱私的信息比如婚姻狀態選擇，可以給用戶提供諸如“保密”“不展示”之類的選項，防止用戶在選擇之后無法回退。

4. 單選框、多選框和下拉選擇（Select）的使用辨析

對比單選框、多選框和下拉選擇的外觀樣式不難發現，它們之間最重要的區別在于信息傳達效率和包容度的不同。

1）單選框和多選框的特點

單選框和多選框的所有選項信息都是直接暴露出來，如果選項過多將占用較多界面空間并且影響用戶的閱讀效率和界面整體規整度，信息包容度低但信息傳達直觀高效；

2）下拉選擇的特點

下拉選擇則是收在下拉菜單里，只有選擇值是用戶一眼能看到的，信息包容度高，節省空間，與其他輸入類組件并用時能保持整體界面的規整度，但每次都得點開再進行選擇也犧牲了一定的信息傳達效率和操作便利性。

3）適用單選框和多選框的場景

因此，單選框和多選框更適用于選項數量較少（一般不超過5個），有一定界面編排空間，且用戶需要直觀看到不同選項內容并進行比較選擇的場景，如選擇會員購買方案。

4）適用下拉選擇的場景

相反，下拉選擇更適用于選項數量較多，表單配置復雜、包含各類不同樣式組件或界面空間不足，且用戶對于被隱藏的選項內容有一定預期的場景，比如選擇省份。同時下拉器擴展性更高，下拉菜單可以進行多種類型的變體設計，滿足不同業務場景的需求。

三、開關（Switch）

1. 來源

開關（Switch）這個組件就是模仿現實生活中的開關而設計的，現實生活中燈的開關一按，燈馬上就亮了，因此開關有一個最大的特征：即時性。這在Ant Design設計系統的全局規則中也給出了注釋：“當用戶切換「開關」按鈕將直接觸發狀態改變“，因此不同于單選框和多選框這種錄入型組件，開關同時兼備錄入和觸發兩種屬性。

2. 簡單定義及樣式

開關是一種特殊的選擇組件，只能從“開啟/關閉”兩種狀態選擇其一，并且選擇的結果會立即生效，通常點擊后頁面或者開關本身會有加載效果，或者點擊后給出反饋，告知用戶操作已生效。

3. 開關和多選框的使用辨析

上面提到復選框也經常作為開啟某種模式或者應用某類設置使用，在這種場景下它與開關的邏輯十分相似，讓人容易混淆。對于這兩種組件的使用區別當前已有很多討論，說法各異，這里根據我自己的探究和經驗，從以下幾點闡述下自己的看法：

1）開關的即時性

開關的即時性決定了當開關與需要提交的表單一起出現時會存在矛盾，因此在表單中進行狀態選擇時，盡量選擇單選框、多選框，避免使用開關。

2）開關更適合控制一組設置嗎

蘋果官方人機界面指南中指出“開關比復選框具有更多的視覺權重，因此當它控制的功能比復選框通常更多時，它看起來更好。例如，您可以使用開關讓人們打開或關閉一組設置”，然而在復選框的設計指南中又舉了用復選框控制一組設置的例子。

再來看一個飛書的例子，飛書管理后臺中使用了開關來控制一組設置的開啟，而在飛書客戶端的設置里用的都是復選框。

對于這個問題，個人認為蘋果官方人機指南所說的因為開關比復選框具有更多視覺權重，所以更適合用來控制一組設置的說法并不準確，復選框本身也具有明顯的選中和非選中狀態，盡管開關組件自身大小以及在視覺效果上可進行設計的空間都更大，但是好像并不足以成為決定性的因素。

同時因為開關的即時性，如果是在需要提交的表單或者模態彈窗中用開關控制一組設置，反而是多選框更合適。

3）從組件的來源分析

從組件的來源及發展歷史來看，勾選的交互是基于PC鍵鼠操作設計的，單選框和多選框組件本身尺寸較小，因而觸發區域會擴大至整體標簽區域，方便鼠標點擊；而開關是誕生于移動設備觸控交互的組件，在移動端界面本身配置就比較簡化，這時候配合開關自身相對較大的觸發區域，用手指點擊起來非常方便順暢。

而在PC端，因為屏幕尺寸更大，同時很多B端系統配置項多、界面布局相較移動端要復雜很多，這時候要把鼠標移至開關熱區去點擊，反而沒有勾選框來得方便，這種操作體驗在一個縱列中有多個連續的開關時尤為明顯。

4）我的觀點

依據開關的即時生效特性，開關更適合用在不需要提交操作的頁面中，用來控制功能或設置的開啟/關閉，在需要提交操作的表單或者彈窗中，建議使用多選框。

開關和勾選框都可以用來控制一組設置的開啟/關閉，使用開關進行控制時，最好將它控制的下屬組件都設置為立即生效，這取決于設置本身對于系統的影響，如果設置對于系統重要功能影響較大，則建議改用多選框去控制，讓用戶多一步“提交”操作進行確認，提升容錯性。

四、總結

回到開頭設置優秀離職人才場景中的組件問題，這個需求流程涉及到的不只是在離職人員的編輯彈窗中操作，還涉及到在離職人員表格中的狀態展示和設置優秀人才的單獨操作。首先彈窗中的編輯操作是需要提交的，用開關比較矛盾；單選框和多選框在彈窗中都可以適用，但考慮還需要在離職人員表格中的狀態展示和單獨編輯，為了保持整體的交互一致性，最后選用了單選框。

總的來說，這幾種選擇錄入類組件在B端系統中應用非常廣泛，可能正是因為太司空見慣了，所以容易忽略它們細節上的特性和區別。盡管有時候這些組件的使用問題并不會對用戶體驗產生決定性的影響，但對細節的探究正是設計師嚴謹的工作態度和工匠精神的體現，只有秉持著這種對細節的打磨和追求才能不斷提升產品的用戶體驗。

另外雖然文中做了一些各個組件的特性和適用總結，但可能在不同產品和系統中情況會更加復雜，需要設計師根據實際情況靈活處理。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一個優秀的設計不僅要解決正確的問題，同時也是給用戶創造積極的情感。在過去，實體產品可以通過人類的五感來創造情感體驗，但對于如今的數字化產品來說，這似乎很難達到，因為只是在屏幕上進行枯燥的交互來獲取服務。

所以，數字化產品設計師們需要更深入的理解每種類型的情感，以及創造它們的心理學原則。

根據唐.諾曼（Don Norman）的研究，人們對一個物體產生情感有三個層次：本能、行為和反思。

• 本能層: “用戶想要的感覺是什么”

• 行為層: “用戶想要做什么”

• 反思層: “用戶想成為什么樣的人”

在第一層，用戶將通過視覺和與產品的交互設計中產生情緒。因此，這是UI設計師擅長發揮的地方。除了美學和基本的平面設計原則外，下面是我在工作中經常應用到設計中的心理學原則。

格式塔原理

相似律

人類的眼睛傾向于將相似的元素連接成一個組，而大腦會認為這些元素都有相同的目的。 

因此，在設計具有相同功能和內容的界面元素時，就應該要保持一致性。（彩云注：這也是為什么要保持一致性的理論解釋）

應用場景: 導航、控件、卡片、banner、內容、分頁

連續律

人眼會將連續的元素視為一組。這一定律與對稱性和相似性非常相關，通過在一個序列上設計相似和重復的元素，我們可以將用戶的視線引導到我們想要的方向，它能使得閱讀信息更加連貫和清晰。

一點點的切割是在暗示用戶，這里還有更多的內容等待你去查看。

應用場景: 菜單、列表、排序、輪播、服務進度

封閉律

當看到一幅不完整的圖像時，大腦會依賴之前的經驗進行填充。 

這是圖形和logo設計中常用的規則，但是在產品設計中，我們也經常把它用在圖標和Loading設計中。

應用: 圖標、loading、數據可視化

相近律

這是UI設計中的一個基本規則，因為人眼會將任何相鄰元素視為一個組。 

在設計的時候，我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內容組，然后使用小空間來分隔大內容組中的小內容組。

應用場景: 導航、控件、卡片、banner、內容、分頁

對稱律

我們的大腦喜歡看到對稱和平衡的東西。它是所有設計領域中使用最頻繁、最安全的法則。它幫助我們創造一種穩定和秩序的感覺。 

當設計需要簡單和諧可視化的產品時，我經常使用對稱律。當用戶需要關注重要的事情時，它也能讓他們感到更舒服。缺點是，如果過度使用，產品會變得乏味和單調。通常，我用標題或CTA按鈕來更好地強調和號召行動，打破畫面的單調格局。（彩云注：CTA是call to action的縮寫，中文通常翻譯為行為號召。可以理解為引導用戶點擊的行為都算是行為號召）

應用場景:控件，banner，強調內容，產品顯示，清單，導航。

背景分割

這個定律是關于人眼傾向于注意脫離背景或組合的事物。 

我使用這個規則引導用戶的眼睛看到重要信息。它通常是一個卡片設計與一個輕投影在背景之上的層。此外，構建整體也是應用這一規則的一種方式。

應用場景：卡片、內容、列表、服務、摘要

共同命運法則

在同一方向上移動的元素被認為比固定的元素或在另一個方向上移動的元素更相關。這個規則應用幫助我們建立組和狀態之間的關系。 

在制作動畫時，我經常更明確地使用這個規則。然而，我們仍然可以適用于許多不同的因素。

應用場景：導航/下拉菜單，折疊，手風琴，工具提示，產品滑塊，視差滾動和指示器。

2. 焦點原則

當我們看東西時，我們的眼睛傾向于首先關注最突出的元素。理解這種行為將幫助我們在設計中創建一個“錨點”，從而推動用戶查看我們的場景之后的內容。

應用場景:內容、落地頁、價格、產品頁、banner 

3. 雷斯多夫效應

（彩云注：維基百科解釋為指個人對學習材料或所見所聞的資訊，容易記住最特殊的部分的現象。例如：有一些參考書將重要的資料，以不同顏色或特殊的字體標示出來，就是利用雷斯多夫效應來加深讀者的印象。）

這也被稱為隔離效應，它表明人們傾向于注意并記住與其他部分不同的部分。這條規則很容易與焦點定律混淆。不同的是，應用此規則的元素通常是獨立的，沒有為用戶導航更多信息的額外功能。 

應用場景：定價表、促銷banner、不同會員介紹 

4. 本能反應

基于現實世界打造的視覺體驗。比如，當我們看一個視頻，每個高潮笑話時都有旁白跟著一起笑時，我們會更容易發笑（彩云注：想想《快樂大本營》）。用戶會喜歡我們的設計，如果它讓他們感覺良好和舒適。

（彩云注：這個理論的意思是說盡可能讓用戶產生沉浸感，把產品用到真實的環境上，比如大家平時使用的手機樣機，把設計的界面放到這些樣機中就能夠給人直觀的感受到應用后的效果，也是這個理論的運用）。 

應用場景：產品配圖、插圖、攝影 

5. 色彩心理學

有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學海報就足夠了（彩云注：感興趣的可以自行翻譯研究下）。

此外，我們不要忘記從早期到現在一直在廣泛使用的顏色，這些顏色的使用更符合用戶習慣：

紅色：錯誤

綠色：成功

藍色：進行中

黃色：警告

6. 形狀心理學

就像顏色一樣，人類的潛意識對不同的形狀也有不同的反應。例如:

圓形、橢圓形：傳遞積極的信息，通常與社區或關系有關。

方形和三角形：帶有強烈的信息，通常與力量和穩定聯系在一起。

豎線：代表強度、力量或攻擊性。

橫線：表示平靜、相等、安靜。

7. 雙碼理論

這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外，人類是視覺動物，我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設計的有效性，我們不應該去掉解釋性的文字。

（彩云注：根據這個理論，在做作品集時，就應該盡可能的多用視覺化語言，文字作為輔助，對于視覺設計師來說，能用圖表達的就盡量減少文字的比重。） 

 一個很明顯的例子就是導航欄。大多數新的應用或具有復雜功能的應用都同時設計了圖標和文字標簽。 

8. 并行設計

人類的眼睛傾向于看到平行因素比其他因素更相關。我經常使用這一原則對同一屏幕內的兩組不同內容進行分類。最容易看到的例子可能是Facebook messenger界面，當帖子并排排列時，消息是平行的。 

9. 共同區域

這一原則類似于格式塔原則中的相似定律，但它并不是完全相似。共同區域原則是通過我們使用分隔線、形狀或顏色的方式創建的。 

如果一個界面需要用戶滾動更多來查看內容，我們應該有一些方法來更清楚地劃分它，而不僅僅是使用間距。

應用場景：列表清單、信息流

10.掃描圖形

根據NNGroup UXPin等組織或團體的各種研究，兩種最常用的掃描模式是“F”和“Z”。

• F的使用最為廣泛，尤其是對于內容量大的網站。

• Z用于不太注重文本的網站，通常強調在最后的號召行動。

一旦我們理解了如何使用這些模式，我們就可以選擇布局并有效地安排元素來實現我們的設計目標。 

總結

第一印象是最令人難忘的，積極的體驗可以在用戶和產品之間創造持久的關系。如果能讓用戶在一開始就喜歡上我們的設計，就能為我們的產品創造了一個很好的優勢。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

什么是視覺層次

視覺層次不僅僅包含文字有關，它還包含我們的圖片，視頻按鈕以及文字以外的視覺元素。所以當你設計一個網頁時候，除了網站整體的顏色，排版，圖片也能夠影響視覺層次。那么如何讓設計的層次更清晰，常用方法有哪些，今天我們一起來聊聊關于設計層次，希望可以幫助到你。

運用尺寸大小建立層次

▲如上圖插畫的比重很大，在設計這種大的元素時，你的每個元素比例和細節處理都被同時放大了，我們可以看見這副插畫四周還運用了很多元素，讓頁面達到平衡，同時這個畫面和旁邊的文字場景也很好融合在一起。一個好的設計一定是通過視覺手段讓用戶理解信息更加準確，在看完頁面文字和圖片后，很自然的引導到底部的按鈕，這才能算是一個很引人注目的設計。

運用色彩建立層次

運用文字大小字重建立層次

運用視覺重量建立層次

▲設計師熟悉的medium官方App設計，在正文閱讀時，同樣采用不同的視覺重點來突出重要信息，比如左邊通過字重以及文字背景綠色底色和正文對比，非常醒目。右側通過淺綠色作為背景強調突出。

▲同樣在一些重要位置，Medium也是運用視覺重量處理，如左圖通過頂部提示條提示可以通過語音播放，在右側付費文章通過行動按鈕引導用戶升級付費。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

Vue中的基本動畫實現

直接一點，基本動畫的步驟

1. 在需要加動畫的地方，加入transition

<transition> <P v-if="isNum">我是一只小小鳥</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

在style中寫vue已定義好的類名

 進入前和結束后的狀態
    .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 進入和離開的動畫時間段
    .v-enter-active,.v-leave-active{ transition: all 0.5S ease }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

這樣就已經完成了基本動畫了，上完整代碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.min.js"></script> <style> 進入前和結束后的狀態 .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 進入和離開的動畫時間段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease } </style> </head> <body> <div id="box"> <button @click="tags">顯示/隱藏</button> <transition> <P v-if="isNum">我是一只小小鳥</P> </transition> </div> <script> new Vue({ el:'#box', data:{ isNum :true }, methods: { tags(){ this.isNum=!this.isNum; } }, }) </script> </body> </html>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

動畫類名的重定義

只需要在transition標簽上添加一個name屬性，然后把類名中v改成你定義的類名就可以了

<transition name='my'> <P v-if="isNum">我是一只小小鳥</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

 進入前和結束后的狀態
    .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80px); } 進入和離開的動畫時間段
    .my-enter-active,.my-leave-active{ transition: all 0.5S ease }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

使用第三方的動畫庫

第三方的動畫庫有很多
Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity動畫、AlloyStick骨骼動畫引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就選擇其中一個庫做示范其他都一樣

1. 在使用第三方庫之前，需要在，你要做動畫的標簽上加個基本類
   animated，這個基本類是根據每個庫不一樣而定的，
   我們要用Animated，所以需要加

<transition name='my'> <P v-if="isNum" class="animated">我是一只小小鳥</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

接著就是引入第三方庫，你們可以下載。
我比較懶，我就直接npm下載了。

npm install animate.css --save  


    

        1
    

然后引入文件

<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">  


    

        1
    

寫上類名，就行了，，提示，千萬別下錯文件，不然動畫也無法實現

 <!-- 進入用lightSpeedIn    離開用 lightSpeedOut --> <transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut"> <P v-if="isNum" class="animated">我是一只小小鳥</P> </transition>  


    

        1
    

    

        2
    

    

        3
    




     

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

<p style="box-sizing:border-box;margin-top:0px;margin-bottom:1rem;font-size:16px;font-variant-ligatures:no-common-ligatures;white-space:normal;background-color:#FFFFFF;text-align:justify;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;">
    <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><i style="box-sizing:border-box;"><a href="http://www.syprn.cn/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">藍藍設計</a>(&nbsp;<a href="http://www.syprn.cn/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;background-position:0px -60px;padding:0px;margin:0px;text-indent:34px;">www.syprn.cn&nbsp;</a>)是一家專注而深入的<a href="http://www.syprn.cn/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">界面設計公司</a>，為期望卓越的國內外企業提供卓越的UI界面設計、<a href="http://www.syprn.cn/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">BS界面設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">cs界面設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">ipad界面設計</a><a href="http://www.syprn.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">包裝設計&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">圖標定制&nbsp;</a>、&nbsp;<a href="http://www.syprn.cn/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">用戶體驗 、交互設計、&nbsp;</a><a href="http://www.syprn.cn/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">網站建設</a><a href="http://www.syprn.cn/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、<a href="http://www.syprn.cn/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">平面設計服務</a></i></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</p>

<div>
    <strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"> </b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</div>

效果：

HTML：

 


    


        


            


            

        

        


            

                <div class="sel01"> 
            

        

    

    


        


            


            

        

        


            

                <select v-model="selectClassEnd" @change="selectClass($event)"> 
            

        

    

    


        


            


            

        

        


            

                <option value="NONE">未選擇</option> 
            

        

    

    


        


            


            

        

        


            

                <option v-for="(options,id) in selectClassData" :key="id" :value="options.id"> 
            

        

    

    


        


            


            

        

        


            

                {{options.title}}
            

        

    

    


        


            


            

        

        


            

                </option> 
            

        

    

    


        


            


            

        

        


            

                </select> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

CSS：

 


    


        


            


            

        

        


            

                .sel01{display:inline-block;position:relative;z-index:2;font-size:1.6rem;height:3.6rem;line-height:3.6rem;width:8rem;flex:1;background:#fff;box-sizing:border-box;border-radius:.5rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01:before{content:"";position:absolute;width:0;height:0;border:.5rem solid transparent;
            

        

    

    


        


            


            

        

        


            

                border-top-color:#e92f26;top:50%;right:1rem;cursor:pointer;z-index:-2;margin-top:-0.25rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01 select{width:100%;border:none;height:3.6rem;background:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:top;padding-left:1rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01 select:focus{outline:none;}
            

        

    

JS：

 


    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:"Name",
            

        

    

    


        


            


            

        

        


            

                data(){
            

        

    

    


        


            


            

        

        


            

                return{
            

        

    

    


        


            


            

        

        


            

                selectClassData:[ //類別選擇數據或者從后臺獲取數據 
            

        

    

    


        


            


            

        

        


            

                {id:1,title:"科普類"},
            

        

    

    


        


            


            

        

        


            

                {id:2,title:"親子類"},
            

        

    

    


        


            


            

        

        


            

                {id:3,title:"制作類"},
            

        

    

    


        


            


            

        

        


            

                {id:4,title:"創意類"}
            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                selectClassEnd:"NONE",//類別默認選擇 
            

        

    

    


        


            


            

        

        


            

                select_class_id:"",//類別id提交報名需要 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            

                //類別選中 
            

        

    

    


        


            


            

        

        


            

                selectClass(event){
            

        

    

    


        


            


            

        

        


            

                this.select_class_id = event.target.value; //獲取option對應的value值 select_class_id是后臺約定的提交數據的名稱 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


                

                    


                

                

                      
                

            

        

    

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務