什么是“有駕”
【有駕】是百度旗下的汽車信息與服務平臺，累計用戶超5.3億，致力于為用戶提供真實、可靠的看選買車服務，以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。
現狀分析
有駕品牌在孵化初期，重點是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號，減少歧義，強化用戶的感知。
但是隨著品牌持續運營進入新的階段，我們發現現有的設計無法滿足后續的運營訴求了，主要體現在：
品牌logo：不能體現汽車的行業屬性，缺乏成體系的品牌符號和VI體系，色彩上也不夠符合時下潮流的年輕配色體系。
品牌活動：品牌關聯度弱，活動維度單一。
項目概述
因此，我們重新梳理有駕的品牌定位與調性，借助本次品牌升級，打造有駕差異化風格，形成獨有的視覺印記。
因為用戶對于舊的logo已有一定的認知。所以此次改版的目標在保持固有用戶認知，在原有基礎上進行品牌標識的探索及應用，以強化品牌感知，提升品牌的競爭力，整合業務資源做心智觸達。
前期分析
前期我們對汽車垂類的競品進行了一輪調研，并且結合有駕的用戶群里，尋找有駕品牌的差異點。
有駕用戶群體年輕化為主，普遍具有高學歷，集中在新一線二線城市。
通過以上在用戶、行業及行業趨勢等多唯獨的信息搜集后，我們確定了有駕品牌設計的四個核心關鍵詞：年輕、科技、未來、專業。
建立體系
在明確設計方向后，我們梳理了線上線下的所有品牌觸點，結合前期的調研結論，匯總出了有駕設計系統的完整框架，以確保品牌設計的完整性和靈活適用性。
設計落地
基于前期分析洞察結論，我們在繼承圓形和車形的基礎上，對品牌符號與icon進行了大量的方案探索。從圖形、質感等方面切入，簡化圖形形態，嘗試不同的形態呈現的視覺感受和氣質。最終確定了全新品牌logo方案。
相對于升級前，新版的logo加入汽車元素，解決升級前logo的行業屬性不明確的問題，讓產品app的行業屬性更加直觀。同時增加品牌符號做為底紋，輔以有駕的圓形符號成為品牌核心的一部分。強化有駕的品牌基因。
符號提煉
確定品牌logo后，為了確保品牌能夠更好的拓展應用，進行了品牌符號的提煉。并為了延續之前的品牌調性。所以輔助圖形延續了之前的圓環造型，造型偏向輪胎；在不破壞原有型的基礎上，加入一些折角的質感的變化，使圖形變化更加豐富，更有識別度。
設計語言
為了更好的觸達到各業務場景，所以我們對視覺風格進行了探索和拓展。分別以淺色與深色作為主要探索方向，以適配不同的落地場景。結合有駕的年輕化，科技感的設計目標，探索出以下三種質感呈現：
符號拓展
在提取的形狀基礎上進行變形，增加折疊細節。在大事件活動，海報等場景使用，增加品牌關聯度。
設計字體
結合全新的品牌定位，我們也優化了有駕的品牌字體，從細節出透出有駕的品牌感知。
品牌手冊
新的品牌需要一套更全面的品牌系統來滿足不同場景下的業務拓展需求。
目前我們也對現有的品牌手冊進行拓展和完善，同步到業務方，以便更好的保證各業務場景觸點下品牌的認知和統一，達到提質增效的目的。
品牌落地
除了對品牌對角度的塑造和升級，我們更積極的把品牌滲透到活動、欄目包裝、大事件運營、品牌海報等各維度場景中，讓有駕品牌形象更加立體多元。
結語
目前有駕品牌升級已經取得階段性成果，沉淀出更加完善的品牌資產，不僅提升設計效率保證全鏈路的品牌曝光，也為業務規模化打下基礎。之后我們也將不斷完善和擴充品牌資產，將設計成果不斷落地到業務中，細化業務目標并與設計目標緊密結合，多維度助力業務的高速發展。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
有人說它是全世界最牛逼的APP，因為它的算法難度和春運期間訪問量幾乎是全球之最；但有人說它是全世界最垃圾的APP，因為在使用這個產品的過程中，遇見很多奇葩、憤怒的體驗。關于這兩種說法，眾說紛紜，本期設計大偵探，就來全面拆解鐵路12306APP，一起來看看這個產品到底是如何設計的，用戶體驗如何。
1. 內容結構
全文9700字，分為六個部分，分別是導讀、產品畫像、出行服務、內容服務、思考總結和后記，你可以通過下面的思維導圖對本文內容快速的了解。
2. 適合人群
第一類，UI/交互設計師，可以跳出執行層，全方位體驗12306的產品設計，多維度去思考和總結如何規避類似的陷阱；第二類，產品經理/運營，通過全面的產品設計拆解、體驗反饋，獲取產品設計參考；第三類，旅游及出行相關行業從業者，通過對12306的全面拆解，獲取競品設計參考。
3. 分析模型
第一個，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應用戶生命周期中的5個重要環節，主要用于拆分和分析產品的功能價值。
第二個，尼爾森十大可用性原則。尼爾森十大可用性原則是界面設計中最基礎、最重要的設計原則，任何產品的設計，都可以通過這十個原則進行指導設計。尼爾森十大原則包括即系統可見性原則、環境貼切原則、撤銷重做原則、一致性原則、防錯原則、易取原則、靈活高效原則、易掃原則、容錯原則、人性化幫助原則，通過這十大原則，可以對12306的產品設計體驗進行全面的校驗和偵查。
第三個，設計心理學。包括常見的格式塔原理、費茨定律、巴甫洛夫反應、7±2效應、席克定律等常見設計基礎理論。
1. 產品介紹
鐵路12306是中國鐵路客戶服務中心推出的官方手機購票應用軟件，主要為全國各地的乘客提供火車票預定、機票預訂、汽車票預訂等購票業務，首個版本發布于2012年10月16日，根據易觀千帆數據，截止到2022年10月，12306月活躍用戶人數6,923.78萬。
2. 用戶畫像
鐵路12306的用戶群體主要以男性用戶居多，占比65.04%，女性占比34.96%；從年齡分布看，以24-30歲的用戶群體最多，占比36.52%，31到35歲的用戶占比24.23%，36到40歲占比20.27%，41歲以及以上占比10.30%；從用戶消費能力看，中高消費者占比33.48%，中等消費者占比30.43%，高消費者占比14.70%；從地域分布看，新一線城市用戶最多，占比27.93%，一線城市占比19.93%，二線城市占比19.00%，其中廣州用戶最多，其次為深圳、杭州和北京。
3. 信息結構
鐵路12306的一級菜單包含首頁、出行服務、訂單、鐵路會員和用戶中心?！甘醉摗怪饕獮橛脩籼峁┗疖嚻薄w機票和汽車票的購買，其次還提供各種快捷功能入口和酒店預訂等服務；「出行服務」主要為用戶提供約車、酒店、訂單等服務；「訂單」是可查詢和管理在12306的各種訂單；「鐵路會員」是12306的會員版塊，提供車票兌換、會員活動等內容；用戶中心提供個人資料管理、出行向導和常用功能等內容。
4. 重要迭代記錄
根據七麥數據統計，鐵路12306的APP首個版本發布于2012年10月16日，截止到2023年1月12日，APP版本已經更新至V5.6.3版本，近一年版本更新次數為5次。
版本重要迭代記錄
2021年9月，發布V5.4.0版本，新增無障礙功能、老人及障礙人士購票更便捷，即愛心版；
5. 產品生命周期
作為中國鐵路客戶服務中心的官方購票平臺，鐵路12306距離首個版本發布時間已經過去10年。從易觀千帆數據觀察，截止到2022年10月，12306月活躍用戶人數6,923.78萬，日均活躍人數811.65萬。由于是國有企業運營，而且是壟斷業務，12306沒有任何商業變現的壓力，從產品發布時間和活躍用戶人數看，目前處于產品生命周期的成熟期。
6. 競爭圖譜
截止到2022年10月，易觀千帆數據顯示，鐵路12306APP在蘋果的APP Store應用市場APP總排名71位，旅游類排名第一，汽車火車船票預定類第一，月活躍用戶人數幾乎是其他APP的總和。
三、出行服務
作為12306最核心、最重要以及實現商業變現的服務，出行服務主要為用戶提供火車票、飛機票的銷售，其次還鏈接了眾多第三方合作伙伴，為用戶在出行的各種場景提供了便捷的服務。
1. 票務
「票務」是12306最核心的服務，主要為用戶提供火車票、飛機票和汽車票的查詢以及銷售，其次12306還對三種產品進行了組合，推出了空鐵聯運、鐵水聯運這樣的服務。
1.1 火車票
「火車票」就是為用戶提供火車和動車的票務銷售，用戶輸入出發站、終點站和時間以后，就可以進行查詢，其次還支持對已購買的車票進行變更到站、改簽和退票。
1.1.1 售票
1.1.1.1 售票頁
當用戶輸入目標站點以后，就進入了售票頁。在這個頁面，可以看到當天列車的所有車次，包括直達、中轉、出發時間和剩余票數。在底部，有一個菜單欄，包含了篩選、耗時最短、發時最早、顯示票價和候補下單五個功能，這主要是幫助用戶快速尋找符合自己需求的車次，比如出發車站、出發時間等。
體驗陷阱
這個頁面的操作體驗不太友好，底部的菜單欄不僅沒有實現全屏手機設備的兼容，而且幾乎和背景的元素貼合在一起，不夠醒目，如果用戶不注意，根本無法發現底部竟然還有一排菜單欄幫助用戶進行高效的檢索。
1.1.1.2 訂單頁
①在用戶選擇好車次以后，就進入訂單頁。用戶需要選擇座位的系別，包括硬座、軟座、二等座、一等座、特等座等。
②用戶需要選擇乘車人。添加乘車人的步驟比較簡單，在輸入用戶的真實姓名、身份證號碼和手機號碼以后，即可添加成功。首次使用12306的用戶需要進行身份核驗，用戶需要通過驗證系統發送的核驗信息才能添加成功。
細節偵查
「姓名」這里有一個非常友好的設計體驗，那就是針對無法輸入的生僻字、名字超過30個字符，以及外籍用戶的極端情況都給出了詳細的指導，針對用戶可能出現的極端的情況給與及時的提示，這就是尼爾森十大原則中的容錯原則，幫助用戶從錯誤中恢復，將損失降到最低。
③在「選擇乘車人」的右邊，還有一個「選擇受讓人」的功能。這個功能有很高的學習成本，會讓用戶摸不著頭腦。我也是通過百度查詢才了解到這是一個用戶權益功能，它主要是指用戶可以把平時購買火車票獲得的積分轉讓給指定的用戶，積分又可以抵消火車票款，從而實現抵扣。
④選擇好乘車人以后，用戶可以進行選座，就進入了提交訂單、支付費用的環節。
1.1.1.3 支付頁
①訂單生成后，用戶需要在付款限定時間內支付火車票費用，否則訂單將會取消。其次在支付頁，也向用戶推薦相關的保險服務，比如鐵路乘意險，又分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險。
②「購買返程」其實一個非常便捷的功能，但12306設計的層級太深了，而且沒有加上一鍵返回首頁或訂單頁的按鈕，用戶如果想退回到訂單頁或首頁，需要不斷點擊返回，操作路徑實在太長。
體驗陷阱
底部菜單設計了三個按鈕，違反了費茨定律的設計原則。用戶在這個支付頁的主要目標是支付費用，但是菜單欄的三個按鈕權重設計得一樣高，取消訂單和購買返程這兩個按鈕，嚴重干擾了用戶的選擇，降低了操作效率。
1.1.1.4 支付成功頁
當用戶支付成功以后，「支付成功頁」為用戶提供餐飲預訂、出行保險、酒店入住、網絡約車等服務，非常便捷。不過內容的規劃比較亂，體驗稍差。
1.1.1.5 候補下單
「候補下單」是一個非常方便的功能，這個功能主要解決在當前車次沒票的情況幫助乘客自動排隊，如果有其他乘客退票，就自動搶票，非常貼心。這個功能也被譽為黃牛的終結者，幫助乘客自主排隊。
1.1.2 變更到站
「變更到站」是指乘客可以更改目標站點，進入訂單詳情頁后，點擊「變更到站」按鈕，點擊底部的「立即變更到站」就可進入變更頁面。在變更頁面，乘客可以重新輸入目標站點，然后再次進入車票售票頁，選中需要變更的車次以后，進入訂單頁提交訂單，變更成功。需要注意的是，變更到站只能辦理一次。
體驗陷阱
當用戶點擊「變更到站」的時候，如果不注意觀察頁面，根本感受不出原來需要在底部菜單欄進行操作，會讓乘客陷入焦躁，不知道下一步從哪里進入。其次在變更到站頁面，下半部分設計了很多快捷入口，比如車站大屏、約車、餐飲特產等，把用戶的注意力分散了。這兩個設計都嚴重了違反了費茨定律和席克定律，大大降低了用戶的操作效率。
1.1.3 改簽
「改簽」是指用戶可以更改出行的時間，改簽的流程和「變更到站」相似，進入售票頁后，選中需要變更的車次，進入訂單頁提交訂單，改簽成功。需要注意的是，車票改簽只能辦理一次，開車前48小時以上，退票費為票價5%，24小時至48小時之間為10%，不足24小時為20%。退票費最少2元起步。
1.1.4 退票
「退票」是指用戶可以退掉已經購買的車票，退票流程比較簡單，點擊退票后，進入退票確認頁，點擊確認退票成功。需要注意是，距離開車前8天以上的不收退票費，其他的時段將會根據列車開車前的時間收取手續費，最高20%。
迭代建議
在用戶點擊退票的時候，應該出現彈窗，再次提醒用戶是否確認退票，這樣能避免用戶誤操作。這就是尼爾森十大原則的容錯原則，幫助用戶從錯誤中恢復，將損失降到最低。
1.1.5 購票后
當乘客購買車票后，12306的首頁會加入一個行程的版塊，向用戶展示最近的行程詳情，其次一級菜單欄「出行服務」內容也會同步更新。這個設計非常友好，直觀醒目地告訴乘客最近的行程信息，通過外部觸發避免乘客忘記行程。
1.1.5.1 行程頁
這個頁面從上至下包含四個部分，頭部是乘客詳細的車次信息，比如出發時間、經停站、天氣等；中間是車票信息，包含檢票口、座位號、車次和乘車二維碼等信息；接下來按乘客出行前服務、車站/列車服務和到達服務三個場景為乘客推薦其他服務，比如餐飲預定、酒店預定等服務；底部是關于出發站、到達站的天氣預報信息和優惠服務等信息。
細節偵查
行程頁把乘客的出行拆分為3個場景，出行前服務（提供重點客戶預約、我要選酒店、我要去車站、我要訂餐飲和禁帶物品規定）、車站/列車服務（提供臨時身份證證明、遺失物品查找、我要訂餐飲和站內導航）和到達服務（遺失物品查找、我要訂酒店、接站約車、旅游景點預定、投訴建議和站內導航），這就是以場景為中心的設計——將設計工作的焦點從“定義系統的操作”轉變到“描述什么人將使用該系統去完成什么任務”。
1.2 飛機票
「飛機票」就是為用戶提供飛機的票務銷售，用戶需要輸入出發站、終點站和出發時間，如果攜帶孩子或者嬰兒，還需要單獨勾選。飛機票同樣支持改簽和退票。
1.2.1 售票頁
售票頁的內容非常簡單，在頭部，用戶可以左右滑動選擇時間，頁面內容以Feed流向用戶展示詳細的航班信息，其次還為用戶提供了其他出行方案參考。底部設計了一個菜單欄，用戶可以進行篩選設置，還可以根據價格高低和出發時間排序。
1.2.2 選擇艙位
選中航班班次以后，進入到「選擇艙位頁」，在這個頁面可以查看到航班的詳細信息，比如航空公司、起飛時間、值機柜臺等。用戶需要選擇艙位等級，比如經濟艙、商務艙和頭等艙，選中后，即可進入預訂流程。
拓展閱讀
為什么同一架飛機同一個經濟艙飛機票價格不一樣？這是因為一個飛機的不同艙位實際上是不同的產品，所以座位有不同的等級，故而價格有了出入。其次他們主要的區別包括但不限于退票改簽的靈活程度、出票期限和目的地停留期限等等。
1.2.3 訂單頁
在訂單頁，可以查看到訂單的詳細信息，包括收費說明、退改說明等，在用戶添加乘客以后，就可以提交訂單。這里需要注意一下，如果乘客攜帶孩子或嬰兒，需要添加兒童出行人。
體驗陷阱
當乘客勾選了「攜帶兒童或嬰兒」的選項以后，在訂單頁準備支付的時候，系統提示乘客需要返回添加兒童出行人信息。但卻并沒有告訴乘客如何添加，或直接給出對應的功能跳轉鏈接，這讓用戶點擊「返回添加」后卻找不到功能入口。這就違反了尼爾森十大原則的防錯原則，不僅在用戶犯錯之前沒有給出提示，犯錯了還不給與指導，真的非常糟糕。
1.3 汽車票
「汽車票」為用戶提供客車的票務銷售，用戶輸入出發站、終點站和時間以后，就可進入售票頁。汽車票的訂單流程非常簡單，在選中客車車次以后，添加乘客支付費用后，訂單即可生成。
體驗陷阱
用戶在選擇「達到地」搜索框輸入地名時候，應該提供模糊搜索，比如輸入湖南的地名，應該為用戶提示相關聯的車站。
1.4 空鐵聯運
空鐵聯運，顧名思義就是把飛機和高鐵這兩個產品組合在一起銷售，支持用戶一站式購買“飛機+高鐵”的聯運行程，只需一次購票、一次支付。這個功能的使用場景主要是針對出發地和目的地沒有直飛的航班情況下，為用戶提供飛機+高鐵的轉運方案。這個功能對于乘客來說，支持一站式購買“飛機+高鐵”車票，可以節省購票時間，非常友好。
1.5 鐵水聯運
和空鐵聯運一樣，這也是一個組合產品的銷售，支持用戶一站式購買“高鐵+水運”的聯運行程。使用場景、功能價值以及操作流程和空鐵聯運一樣，我們就不必重復。
1.6 雪具快運
12306還推出了一個雪具快運的服務，為廣大旅客提供多種個性化雪具寄送產品服務，還支持隨車辦理或上門辦理寄送服務，目的是為用戶打造滑雪的新體驗。「雪具快運」的操作流程也比較簡單，采用預約制，選中服務后，填寫用戶詳細信息，支付成功后，訂單生成。
1.7 小結
作為12306最重要、最核心、最復雜的功能，從這個版塊的內容拆解和實操體驗來看，可以看出12306確實已經解決被譽為全世界最復雜的搶票算法邏輯（筆者通過實操測試，幾乎都能買到票），特別是在春運這種會出現超過上億用戶搶票場景，真可謂非常不容易。不過從用戶體驗來看，非常一般，甚至有很多不合理的設計。
2. 出行
出行是12360結合了乘客在出行的場景中潛在產生的需求設計的服務，有結合車站商家的在線點餐，有結合當地地域特色的旅游服務，還有約車、保險、酒店等服務。這些服務，多數由第三方合作方提供。
2.1 餐廳特產
「餐廳特產」是一個為乘客提供在線點餐的服務，在乘客輸入列車車次以后，就可以進行點餐，支持外賣配送至列車和到店自取兩種形式。這個功能設計得很友好，不僅解決乘客在乘車前的就餐問題，為車站的商家引流，還可以增加平臺的變現方式。
2.2 鐵路游
「鐵路游」是12306結合旅游出行的場景，為乘客推出的一項旅游服務，包含旅游專列、跟團游、周末游和自由行等。這個場景的鏈接其實非常好，但是版塊目前設計得比較簡單，內容也比較少。
2.3 約車
「約車」是為乘客提供接送站、接送機、打車和租車的服務。這是一個強剛需的需求，用戶在出行的前后都有用車服務。為乘客提供約車服務，不僅能增加變現方式，還能方便乘客出行。通過實操體驗，約車主要由第三方合作方提供服務，比如曹操出行、T3出行等公司，為乘客提供出租車、品質專車和商務車等車型。
2.4 保險
保險分為乘意險和出行保險。鐵路乘意險分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險，在乘客購買鐵路的訂單頁就會向乘客推薦，乘意險價格低，保障項目包含意外身故、傷殘、醫療費用、住院津貼等。出行保險由第三方公司中國太平洋保險提供，主要為乘客提供出行安心保、空鐵聯運險和旅程預定取消險。
2.5 酒店
酒店這個版塊的內容相對夯實，不僅有新客大禮包這樣的用戶權益，還有商旅專區、今夜甩賣、高端酒店這樣的內容。甚至還設計了專門的酒店會員VIP，包含普通會員、銀卡會員、金卡會員、白金卡會員和黑金卡會員，相對其他版塊而言，這個版塊花了比較多的心思。
2.6 鐵路商城
鐵路商城是12360以鄉村振興·幫扶推介為主題打造的一個商城，包含了幫扶專區、優選好物、兌換專區、今日特賣等內容，其次還支持企業集采，批量購買。
2.7 小結
從這個版塊，可以看出12360其實結合了用戶吃穿住行的剛需場景設計了對應的服務，有自主運營也有完全依靠第三方提供。不過整體的用戶體驗比較差，事實上可以參考像順豐速運、智聯招聘這些APP，通過內置小程序的形式來設計，完全可以把這些版塊讓第三方單獨設計和維護，同時還能為用戶帶來更好的體驗。
3. 會員
鐵路暢行會員是中國鐵路統一對外會員服務品牌，開通暢行會員不需要花錢，暢行會員主要是用于會員用戶積累乘車積分、用積分兌換車票等，主要包含積分權益，兌換車票、無票候補和會員活動四大會員權益。這個頁面設計得比較簡陋，也沒有太多價值的內容，可以看出12306在用戶運營方面比較欠缺。
4. 訂單
12306的訂單包含了火車票訂單、餐飲訂單、保險訂單、酒店訂單、空鐵聯運訂單、計次定期票訂單、約車訂單、出站引導服務訂單、鐵路商城訂單、汽車票訂單、旅游訂單和鐵水聯運訂單多達12種訂單，從這些訂單類型可以看出12306的服務特別多。
體驗陷阱
這個設計實在太糟糕，嚴重違反了7±2效應。琳瑯滿目，花枝招展，讓用戶在這個頁面幾乎迷失。更糟糕的是，當你有一個非常重要的待支付訂單，這個頁面竟然沒有角標提醒，最終你會因為這個糟糕的設計打亂自己的行程計劃。
內容服務是幫助產品實現用戶留存和運營的版塊，不過從12306的內容設計來看，整個產品的運營手段比較少，所以我把12306現有設計的功能拆分為便捷功能和向導功能。
1. 便捷功能
以下這七個功能，對用戶而言，是非常便捷、友好的功能，可以幫助用戶在出行的旅途中獲取很多幫助。
1.1 車站大屏
「車站大屏」是一個非常貼心的功能，通過這個功能，可以為用戶提供車站的實時列車信息，非常方便。大屏詳情頁可以拆分為三塊內容，左上角可以切換全國各地的火車站，頭部還有搜索框，為用戶提供車次的查詢，主體內容是當前車站向西的車次信息，包含發車時間、候車室、檢票口和候車狀態等。
1.1.1 車次詳情頁
進入列車的「車次詳情頁」，可以查看當前車次的完整信息，比如檢票狀態、候車室、檢票口和全程停靠站、停留信息。在這個頁面，還提供了「關注列車」的功能（關注后并無關注數據，顯得很雞肋），以及直接預訂當前車次的入口。
1.1.2 車站詳情頁
「車站詳情頁」就像一個站點的主頁，為用戶提供完整的車站信息查詢。這個頁面可以拆分為四塊，頭部可以切換其他站點，并提供當前車站的天氣情況以及車站基礎信息。金剛區位8個功能入口，包含車站車次、站內導航、重點旅游、餐飲服務、周邊酒店等。中間是當前車站的起售時間和換乘時間，底部是車站附近周邊的酒店精選。
迭代建議
這個頁面把車站當做一個主體，聚合了一個車站完整的功能，其實挺有創意，但頁面隱藏得很深，如果不去拆解，幾乎很難發現，很是可惜。我認為完全可以提高權重，升級為一級欄目，代替會員，或者和出行欄目進行整合升級。
1.2 站內導航
「站內導航」提供目標車站的LBS導航，對于乘客來說，到達一個陌生的站點，需要清晰的指引，這是一個非常便捷、溫馨的功能，能幫乘客解決很多問題。不過這里有一個莫名其妙的設計，那就是進入這個功能之前，系統提示請搖“8”字校準手機，事實上這里是一個加載動畫，但是畫面和內容卻誤導了用戶，我甚至每次進入都傻乎乎的搖動手機。
1.3 臨時身份證
臨時身份證是一個非常重要的功能，12306現在支持APP在線申請，極大方便了乘客的出行。申請流程也比較簡單，填寫個人信息，驗證審核通過后，就可以生成電子證照使用。每個人每個月有3次申請臨時乘車身份證機會。
1.4 遺失物品
這是一個非常貼心的功能，如果你在乘車的過程中不小心丟失物品，可以通過這個功能登記，輸入你的詳細信息就能登記成功。
1.5 重點旅客
這也是一個非常貼心的功能，主要為老年人、殘疾人服務，通過填入你的信息，列車會根據你的情況提供優先進站、協助乘降等服務。
1.6 愛心版
愛心版就是長輩版，專門為中老年用戶設計的版本，在用戶中心切換后就可進入愛心版。整個版本設計得非常簡潔，操作步驟也比較簡單，對中老年用戶比較友好。
1.7 英文版
英文版在用戶中心的設置點擊語言即可切換，整體的版本設計得直接簡潔，用戶體驗不錯。
1.8 小結
從這個版塊可以看出，一個產品如果以用戶為中心去設計，是可以為用戶帶來很大的便捷和愉悅體驗。比如像臨時身份證這樣的功能，過往我們只能提前出發去車站排隊辦理，但如今12306已經把這樣的痛點解決，為用戶節省了大量的時間。
2. 向導功能
以下8個功能，雖然屬于出行向導，不過體驗下來，感覺用戶體驗比較差，很多功能完全無法弄懂它的設計目的是什么，顯得非常雞肋。
2.1 快捷退票
「快捷退票」這個功能的設計，讓人摸不著頭腦。從操作流程看，首先需要輸入用戶的詳細信息，包括姓名、身份證號碼和手機，其次需要進行人臉核驗，到了第三步還需要選擇車票的日期車次，在最后的退票操作頁面，用戶點擊退款后，沒有和用戶再次確認就直接退票。整個流程體驗下來，非常糟糕。
體驗陷阱
這個功能和訂單頁的退票感受不出來有何區別？如果用戶要退款，不如直接去訂單頁進行退票，操作步驟簡單，一目了然。其次不支持自動導入用戶的購票信息實在太不方便，需要通過選擇車票購買日期和車次，這個設計實在讓人生氣和憤怒（我在體驗的過程中到了第三步只能退回到訂單頁把購票日期和車次截圖下來，又再次重復前面兩個步驟才到這個步驟）。
2.2 聯系方式
這也是一個看不懂的功能，進入頁面后，需要用戶輸入乘客的詳細信息，但是這個乘客信息和用戶在購買車票時候需要添加到乘客信息有什么不同？更糟糕的是，當你把自己的電話號碼、身份證信息填入后，系統會顯示核驗成功，然而當你再一次進入，頁面內容還是和之前并無區別，你不知道自己是不是還要重新輸一次？
2.3 時刻表
「時刻表」主要為乘客提供查詢列班車次的出發時間和到站信息，但這個功能「車站大屏」幾乎已經包含了，這個功能顯得意義不大。
2.4 查票價
這個功能非常雞肋，因為在火車票的售票詳情頁就可以清晰直觀地查詢到列車票價信息，相反在這個頁面，根本無法看到價格，因為價格的字體大小只有20px，乘客幾乎很難注意到。
2.5 查代售點
這個功能主要為用戶提供全國各地火車票代售點的查詢，不過在互聯網技術發展到今天，火車票代售點越來越少了。從12306采集的信息來看，部分代售點缺少電話等關鍵信息，對用戶來說，比較雞肋。
2.6 起售時間
這個功能為用戶提供各車站每日的起售時間，屬于一個低頻功能，可以解決乘客某些極端場景的需求。不過在我體驗下來，比如通過此功能查詢1月29日的車票，顯示北京站起售時間為10:00，但是在火車售票版塊，我也可以直接購買1月29日的車票，這讓我比較疑惑這個功能的價值在哪里。
2.7 正晚點
「正晚點」同樣是一個雞肋功能，而且還需要輸入準確的車次才能進行查詢，車站大屏已經完美可以取代這個功能。
2.8 列車狀態
「列車狀態」比正晚點都還雞肋，讓人憤怒，因為你需要輸入正確的出發地、到達地和出發時間，對了，還有正確的車次才能進行查詢，這樣的操作成本比下載12360APP都還麻煩。
2.9 小結
從這個部分的內容拆解和操作體驗來看，12360的產品設計得不夠細致和貼心，很多功能就像是硬生生塞進去一樣，濫竽充數。其次從他們的產品迭代記錄次數可以看出，近1年更新時間只有5次，也許每一次都是在做加法，沒有想過做減法，所以導致這部分的功能顯得雞肋而且有很大缺陷。
通過對鐵路12306的全面拆解，接下來我將從內容層、功能層、體驗層和視覺層進行總結。
1. 內容層
12306整個產品的內容設計，用一句話總結，可以歸納為——心有余力而不足。可以看到12306圍繞乘客購票、出行的潛在需求場景都設計了對應的服務，比如酒店、約車、點餐、商城等，甚至還有空鐵聯運、鐵水聯運這種多場景的組合售票方式，不過在實際的版塊內容打造中，則顯得比較空洞，體驗一般。這個產品，可以說幾乎沒有創新點，這主要也是由于它是由國有企業設計運營，背景極其復雜，設計目標也飄忽不定。
2. 功能層
在2015年之前，鐵路12360承擔了被譽為歷史上人口遷移最大的春運的搶票工作，那時候一票難求，春運去12360就像是一場噩夢。不過在經過多年的升級和優化以后，目前12360的購票效率非常高，經過筆者多次的測試和調研，目前通過12360購票已經不再是難事。而且還設計了候補搶票這樣的功能，幫助用戶解決買票痛點，可謂非常貼心、友好。
3. 體驗層
鐵路12306的用戶體驗，非常一般，我在這次的產品拆解中至少偵查出了20條體驗陷阱，這些陷阱都會給用戶帶來極其糟糕和憤怒的體驗。比如讓我像個傻瓜搖動手機的站內導航載入頁，這完全就是把用戶當成傻子一樣看待，其次還有一堆數不清的雞肋功能，對用戶的操作體驗造成了嚴重的干擾。我甚至認為愛心版和英文版比標準版使用起來更愉悅，更能減少我的焦慮。
4. 視覺層
作為一個UI設計師，在拆解12306的產品過程中，我對整個產品的設計感到絕望。首先，沒有做到統一性，整個產品毫無設計規范，比如卡片的圓角、品牌色、版塊間距根本不統一，這樣的視覺體驗一眼望去就非常糟糕；其次，圖標、活動圖、櫥窗圖以及詳情頁的設計毫無美感，滿滿的山寨APP風格，特別是訂單頁的ICON，花花綠綠、琳瑯滿目，連最基礎的統一都沒有做到。
作為一款國民級用戶APP，鐵路12306仿佛陪伴了80、90后的青春。還記得10年前老家是黑龍江和河北的大學室友，每年春運開啟之前就為了回家的火車票犯愁，不僅要去遙遠的火車站排隊，很多時候還可能空手而回，那便是最初對12306的記憶。
如今十年過去了，12306解決了億萬人的出行搶票需求，讓我們在春運的路上，可以輕松購買一張回家的票。但下一個十年，我更希望12360的產品團隊，可以重視用戶體驗設計，讓我們不再掉入那些體驗陷阱。
作者：設計大偵探 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
配圖是我們平時在設計工作中經常用到的，一個好的配圖很多時候會直接影響到一個作品的好壞，圖片本身也是一種視覺語言，通過學習跨領域的知識可以幫助我們提升自身所處的領域設計能力，本篇文章和大家討論一些構圖和景別知識，通過對這些知識的了解判斷如何選擇一個好的配圖以及怎么應用好配圖，大多數設計師選擇配圖時都是憑著主觀意識在選擇配圖，你所選擇的配圖很大程度會受到你的主觀意識的影響，這些主觀意識來源于自身審美、文化、環境等因素的，因此在我們的主觀意識基礎上，應該具備一定的客觀依據來幫助我們更好的選擇合適的配圖。
構圖與景別知識在攝影、繪畫、影視中應用很多，但很多設計師容易忽視這些知識，這些知識看似是攝影、繪畫、影視等行業的知識與設計好像沒太大關系，這些知識也是很有必要學習的的理論知識，對構圖景別的理解很大程度會影響你能否把握好設計畫面中的配圖，配圖本身也是一種視覺語言，提升構圖和景別知識對設計師整體綜合實力提升是有幫助的，當你做三維和插畫等設計時同樣也會用到這些知識，了解這些知識會讓你以客觀依據的角度，運用和判斷設計中配圖的好與壞。
目前來看幾乎所有的藝術或商業作品，無論是攝影、繪畫、CG等都離不開畫面的構圖與結構，你甚至能在很多繪畫大師的的經典作品中看到他們作品中也使用了構圖理論，合理的構圖作品，給觀眾美的視覺享受和與眾不同的情感體驗，同時提升畫面表現，關于構圖的知識很寬泛，構圖方式方法也非常多，有的作品中可能包含多種構圖形式，這里給大家大致介紹一些常見的構圖知識，目的是拋磚引玉讓大家意識到良好的構圖能平衡畫面同時，傳達出更清晰明確的圖像信息。
中心構圖是將畫面主體放置在畫面的視覺中心，讓主體成為整個畫面的視覺焦點，通過周圍環境氛圍烘托畫面主體，這種構圖形式聚焦主體，能更好的凸顯畫面主體。
一點透視構圖有較強的空間感和縱深感，畫面的元素會向中心聚焦，會把觀眾的視覺引導向畫面中心，比較適合表現畫面空間感。
黃金法則構圖遵循古希臘學者畢達哥拉斯的黃金分割比例進行構圖，也就是我們常說的 0.618:1，黃金法則構圖有采用像三分法那樣井字構圖，還有采用黃金螺旋的構圖方式，構圖時將主題放置在黃金比例焦點或線上。
對角線構圖中主體在畫面的對角線位置排列，對角線構圖視覺沖擊強，具有動感和不穩定性，更使畫面更有趣味和視覺張力。
主體在畫面中呈三角形狀，正三角形構圖畫面更具穩定性，反之倒三角形構圖會使畫面有緊張感和不穩定性。
字母形構圖畫面呈現字母形態，不同的字母構圖會給觀眾帶來不同的視覺感受，S 形構圖是一種比較常見的構圖形式，S 形構圖迂回延伸使畫面產生優美、雅致、韻律感。
引導性構圖利用畫面中有形或無形的線，引導觀眾的視覺聚焦到畫面的重點，引線不一定是一條線，它是一種具有引導性的東西，光影、道路、河流等都可以做為引導線，引導性構圖視覺表現強，引導觀眾視線突出主體。
三分構圖是最常用的構圖方法，結構由兩條豎線和兩條橫線構成，形成一個井字，也叫井字構圖法，在三分構圖中主體通常放置在四個交點上或線條上，三分法是比較常見的構圖形式，可以在很多攝影和繪畫作品中看到。
對稱構圖是根據對稱軸，使畫面形成的對稱的構圖形式，比較常見的對稱構圖上下對稱、左右對稱，對稱構圖具有平衡性、穩定性、均衡性。
水平線構圖也是比較常見的一種構圖，水平線構圖通常表現寬廣的場景，地平線、海面、湖面等主題，水平線構圖給人寬闊、穩定、平靜、舒適的感覺，水平線構圖主要是是采用橫畫幅來表現。
垂直線構圖中主體呈現為垂直的線條，垂直線構圖給人高聳、莊嚴、挺拔的感覺，具有較強的視覺張力，錘子線構圖常采用豎畫幅來表現。
十字形構圖是水平線和垂直線的組合，十字形構圖畫面會給人平穩、安全、嚴肅、神秘的感覺。
夸張透視會以比較特別和夸張的的視角表現畫面和主體，使畫面整體都具有強大的視覺張力和沖擊力。
虛實對比通過主體和背景的間的虛與實對比，從而突出畫面主體，虛實對比使畫面更有層次和空間感。
明暗對比通常以暗襯托明，在視覺感受中越暗感覺離我們越遠，越明亮感覺離我們越近，明暗對比對比可以使畫面更有立體感，層次感等，通過畫面中的明暗對比形成的強烈反差，可以凸顯畫面中主體，引導觀眾視線到主體上。
色彩對比中包含三個要素色相對比、純度對比、明度對比，同時根據色環中的色相變化，還可以分為同類色對比、鄰近色對比、對比色對比、互補色對比，色相角度變化越大對比月強烈，通過色彩對比可以突出畫面重點、豐富畫面、提升畫面層次，背景色彩與主體色彩形成對比，能凸顯畫面主體。
奇數原則畫面通常是一個、三個或五個主體，通常不超過七個，超過七個時觀眾會將其視為一個整體，當畫面中為主體為奇數時，在視覺上會比偶數更和諧、更美觀。
視覺引導通過畫面內容引導用戶視覺，視覺引導形式有很多種，人物或動物直視、運動方向、肢體語言等，都可以引導用戶在觀看畫面時的視線運動。
通過大小對比使主體與周圍元素形成差異化的視覺沖突，同時大小對比中的次要元素還可以作為比例參考，突出主體的大小，強烈的視覺落差增強版面節奏。
裁剪圖片為不同景別的圖片對板式設計也有很大影響，不同景別的圖片傳達的視覺語言也是不同的，哪怕是圖片朝向的位置都值得我們仔細思考，在配圖時我們要思考通過圖片傳達什么視覺信息給觀眾，所以在我們做設計時，要想清楚當前頁面要傳達什么樣的信息從而采用什么樣的景別。
大遠景通常表現廣闊氣勢宏偉的場景，大遠景的空間感非常強，強化景物與環境的關系，主體相對較小與場景形成強烈的大小對比。
遠景營造主體與場景的關系，通過畫面場景敘述主體和場景的關系，遠景具有較強的空間感，具有開闊的畫面場景。
全景通過場景來體現主體的處境，利用人物和場景的關系強化主題，全景中主體會被強化形成明顯的內容中心，從而弱化場景。
中景表現主要表現人物膝蓋以上，在中景中人物在畫面中的占比更大更為突出，人物會被強化，同時弱化場景。
近景主要表現人物胸部以上，畫面中人物或主體會占有主導地位，強調人物的情感特征，通過細微人物的動作、肢體語言、表情等表現畫面主題。
特寫主要表現人物肩部以上或主體的細微部分，主體被放大，場景弱化到難以分辨，強調主體的情感、心理或產品的工藝結構等。
大特寫會將主題放的更大，展現主體的局部細節，大特寫具有強調和突出主體細節特征的作用，具有極強的視覺效果。
配圖知識是設計師在平時工作或設計練習中必備知識，很多時候我們在選擇配圖時完全是憑感覺在選，圖片也是一種視覺語言，作品整體質量也會受到配圖的影響，本次配圖知識分享希望能幫助大家在之后選擇設計配圖時，在主觀意識判斷的基礎上有一個客觀的依據，寫這篇文章的同時，我也正好根據文章大綱做了一套板式練習作為文章配圖，最后給大家分享幾個高質量的圖片網站（需要翻墻）
攝影類圖片
https://unsplash.com/
https://burst.shopify.com/
CG類圖片
https://www.deviantart.com/
https://wallhaven.cc/
作者：Tomato76 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
同時也方便用戶再次消費某個內容時，減少再次記憶和查找的成本。比如我喜歡做菜，但是年紀大了記性不好，每次做一道菜我都會打開我的某音收藏夾里找到視頻教程，這個老小子的視頻教出來的菜味道真不錯。
收藏夾要解決用戶什么問題
兩個關鍵詞：1.管理 2.分類
管理，就是我們所說的增刪改查?！霸觥保覀冃枰谟脩魹g覽信息時給該信息提供收藏功能，這里要注意的是收藏信息的顆粒度，什么信息可以收藏，一段話？一篇文章？一個用戶發布的完整內容？還是一張圖片？產品對收藏最小單位的定義要明確，因為會影響到對收藏內容的分類。例如微信可收藏的最小單位很多，有鏈接（包含文章）、文件、圖片/視頻、音樂、語音、聊天記錄、筆記、位置，而像餓了么只能關注店鋪，對任何菜品、用戶評論等等都無法進行收藏。b站你可以收藏視頻、漫畫、商品，但是不能他人的動態。
刪沒什么好說的，再來說一下改和查。因為他倆會涉及到收藏的流程。我們知道不同產品的收藏流程是不同的，例如馬蜂窩、閑魚等產品，用戶收藏內容后只給出收藏成功的toast/提示欄提示，并告知收藏到了哪里；
而騰訊視頻、抖音、攜程則是當用戶進行收藏后除了給出成功提示還會給出收藏列表的入口；
最后，像知乎、豆瓣在點擊收藏后直接給出滑出操作框讓用戶選擇收藏夾或創建收藏夾以及是否要轉發。
3種流程的區別
前兩種我認為區別并不大，是否要在提示框里給用戶進入收藏列表的入口，更多還是取決于產品是否想讓用戶離開這個場景，還是讓用戶繼續瀏覽。之前我們提到過閉環，但是閉環一般針對任務而言，但是收藏嚴格來說不算是“任務”，而是用戶的一種“行為”，感知起來區別還是很大的，因為任務是有明確目標的，比如給用戶安排一個任務，讓他對某個商品進行分類收藏，那么用戶會根據這個分類收藏的目標去進行操作，任務結束后給用戶相關的引導和出口。但是在用戶自然的瀏覽場景中，對內容的收藏并沒有具體目標，所以要不要給用戶在點擊收藏后引導進入收藏列表要具體情況具體分析。
其次是知乎、豆瓣，在用戶點擊收藏后給予是否要創建收藏夾的功能，相比于前兩種，對信息內容的管理，更加明顯了。首先為什么他們和前兩種不同呢，像知乎用戶是有KOL效應的，個人的收藏夾可以公開，他人可以查看他人的收藏夾，有點類似于花瓣的畫板，同時對于這類知識、內容類的應用，對于分類的要求和需求更高更多，本身知識的維度就很多，顆粒度很小，所以在用戶進行收藏行為時主動提醒用戶可以創建收藏夾。
那淘寶是怎么做的，它在用戶收藏的時候也給出一個菜單，用戶可以選擇收入到某個收藏夾，也可以默認不放入，還可以去創建并放入，這就是更個性化了。
但是咱們說前兩種沒有給在收藏時給創建功能的就不個性化了嗎？也不是，個性化也要根據產品定位和用戶需求來的，比如馬蜂窩的一些機票車票、旅游產品，做一個收藏夾創建，好像沒必要，因為可收藏的類型不多，個性化標簽也不明顯，顯然是沒必要的。騰訊視頻、閑魚顯然也是。那我們再來聊一個細節。
知乎在點擊收藏某個回答的時候，頁面會喚起收藏模塊，讓用戶選擇你要收藏到哪里，但這里的體驗不是很好，因為用戶想要收藏某個內容必須先選擇收藏夾，如果不選擇則無法收藏成功？
無論你當前是否創建了收藏夾，都必須選擇或點擊完成，如果有創建過，那就需要經歷：1.點擊收藏圖標 2.點擊要收入的收藏夾 3.點擊完成，如果沒有創建過那么默認會創建一個收藏夾。而淘寶則不是，無論你是否創建收藏夾，只要點擊收藏圖表那就已經收藏成功，在這個前提下，你可以選擇是否要收入到某個收藏夾還是新創建一個。
所以知乎、豆瓣的收藏單位大多以回答、帖子為主，這樣的內容系統無法幫助生成標簽，所以需要用戶自己創建分類，在收藏時給予創建功能是合理的，但我認為知乎這樣的設計還是不夠人性化，但是站在業務角度看，就是想引導用戶去創建分類，也是能理解的，雖然在體驗和效率上并不是最優。
創建、分類、搜索都是幫助用戶再次進入收藏空間時能夠更好的查找想要的內容。同時不同產品會有不同的篩選標簽，比如微信閱讀，收藏其實就是書架，哦，應該說，書架就是收藏。篩選維度分為：更新、進度、購買、分類。所以我們在設計收藏功能的時候，要根據用戶的篩選場景和內容來制定合理的篩選維度。
收藏和點贊還有加入購物車的區別
收藏的屬性就是收納、管理和分類，但是和點贊、購物車不同，點贊意味著認同，具有社交屬性，同時也為了幫助產品記錄用戶個偏好用作研究，而收藏則是用戶想對該內容進行收集，比如我正在準備一個辯論賽，我抽了一個反方觀點，雖然我本身并不喜歡這個觀點，但是為了準備辯論的素材和題目我會對這個內容進行收藏，但不會點贊，雖然收藏大部分時候也有對內容的認可，但不完全是。所以收藏更多的是用戶個人對信息的單方面管理，點贊則一個即時互動。
收藏和購物車也是一樣的，購物車承載的是更多消費、商品營銷的表達、算價以及湊單活動，購物車和直接消費強關聯，而收藏夾多關注與對商品的存儲管理、搜索查找，雖然也有一部分需求重合，但用處、和場景還是有很大區別的。
最后，總結一下，設計收藏夾時，我們首先得根據產品定位和用戶需求以及內容的維度來選擇好收藏夾的顆粒度或最小單位，其次，根據業務或用戶需求設定好收藏夾的收藏邏輯和流程，最后，做好用戶對收藏內容的查找以及分類篩選的體驗。
作者：應駿 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中，如果沒有系統的可視化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。
// 為什么要數據可視化
數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數據，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的數據聚合以柱圖形式呈現，很容易就能看出各個地區間數據的差異，并從中洞察規律
關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。
一、選擇適合的圖表
數據可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。
1. 分析數據關系
根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。
構成關系
構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。
常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。
關鍵詞：“占比、比例、百分比”
比較關系
比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。
常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關鍵詞：“增減、升降、漲跌、波動”
分布關系
利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。
常用圖表：散點圖、熱力圖、雷達圖等
關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等
關聯與流轉
流轉關系是B端數據常用的一種關系，它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等，以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。
常用圖表：關系圖、?；鶊D、漏斗圖、進度圖等
關鍵詞：“流程步驟、留存、轉化、關系”
2. 分析數據特征
按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標通常有兩類特征，按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢，離散數據通常統計各分類下數量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據，可使用不同顏色進行分類
層級特征
多層級數據由多個部分構成一個整體，又稱樹形結構數據。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額，通過色調來區分不同類型，顏色的深淺代表分類下的子集，面積體現銷售占比。對比一般結構樹圖表，它的優勢在于可以有效利用空間。
流程特征
流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是?；鶊D重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。
二、強化視覺層次
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。
1. 強化數據特性
使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差
2. 色彩視覺傳達
除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。
我們在之前的文章里有介紹過圖表的取色模型，通過調整顏色HSL值的區間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調來進行分類
數據內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等類型。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議：
定量型：使用深淺色板強調內在順序
如果在同一個分類下包含子類別，或者數據本身具有排名屬性，那么建議使用連續色板來突出他們內在的順序，使圖表更加易讀。
三、圖表中的響應式設計
B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。
1. 布局框架適配
在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。
2. 圖表元素適配
要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。
// 結語
數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型，以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。
二、什么是「組合手勢」
「組合手勢」是基于常規手勢的組合擴展，其通常由兩種或兩種以上的常規基礎手勢所構成，若組合方式及使用場景得當，可助力用戶更便捷的觸達功能。
以前述的視頻場景常規手勢為例，其觸發機制一般可分為兩個階段：step1交互信號→step2執行任務，即用戶通過某一基礎手勢發出交互信號，系統收到信號確認后便可立即執行任務，但整個過程是線性的，手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。
于是我們在現有常規手勢兩階段觸發機制的基礎上，嘗試引入「意圖識別」環節，并梳理出「組合手勢」的設計模型，以探索不同基礎手勢相互組合后的擴展可行性。
「組合手勢」觸發一般可分為三個階段：step1交互信號→step2意圖識別→step3執行任務，前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發路徑。
由于「組合手勢」并不像常規手勢那樣早已被系統定義為可供直接調用的接口，因此，其差異化創新具有較大設計靈活度，尤其需根據具體的使用場景進行綜合考量。
三、「長按組合手勢」激活快捷菜單
1.項目背景
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。
隨著后續視頻場景的功能建設日漸完善，我們便在基礎菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發成本高。
2.競品調研及選型
通過對競品進行調研，我們發現競品均有使用長按手勢作為切入口以觸發相關播控功能、并歸納出“視頻播控觸發”目前主流的三種長按交互選型， 分別為：長按觸發獨立播控面板、長按觸發浮層播控選項、長按觸發特定播控功能。
選型A
「長按觸發獨立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨立播控面板，此方案擴展性較強，但對視頻沉浸觀感體驗有一定的打斷感；
選型B
「長按觸發浮層播控選項」：通過長按手勢可觸發置于視窗上層的浮層選項入口，一定程度上可延續視頻觀看的沉浸體驗，但浮層擴展性有限；
選型C
「長按觸發特定播控功能」：通過長按手勢觸發特定的某個播控功能（如長按“快進”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低；
3.設計方案
1）長按手勢交互擴容
針對目前視頻播控菜單存在的問題，經過和業務對上述三種長按交互選型方案進行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置，并探索一套更便捷的觸發機制，以此對視頻場景中的播控菜單進行設計升級。
但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據，用戶對此功能的使用頻率高、并已形成較深的操控認知，若直接下線“快進”功能則會對用戶使用習慣產生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢？是否有可能將“快進”和“快捷菜單”進行融合？這也是本次項目對于便捷手勢體驗的重要設計探索點。
基于此，我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義，通過「長按+滑選」的機制觸發快捷菜單功能項，以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為：
step1：以“長按手勢”創建一個新模式，即發出交互信號并喚出浮層菜單；
step2：若用戶未松開手指，則系統默認開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標功能項以選擇功能；
step3：用戶滑選錨定至目標功能后，松手釋放即可完成最后的功能執行確認。
「長按+向上滑選」快捷觸發對應功能項；
「長按+向下滑選」快捷觸發“快進”（一定程度上兼容老用戶對于此功能的使用習慣）。
2）容錯性兼容
在設定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程，我們同時也支持點選的操作模式，即用戶長按后若未產生滑選行為便松手，則松手后依然可通過點選的方式觸發對應播控功能項。
3）易用性打磨
差異化的創新設計形式在前期總會面臨質疑和挑戰，本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式，于是在DEMO開發完成后便進行了一次小范圍內的定性可用性測試，以預期在上線前可先收集一波體驗問題進行快速打磨優化。
我們根據測試目標、用戶類別、測試前序準備及測試步驟等環節提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標用戶進行訪談測試。
測試訪談的過程中，被測用戶在進行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時，我們通過觀察用戶操作行為及用戶主動反饋，發現仍有部分易用性細節可進一步打磨優化。
3.1 ）擴展觸發熱區：
考慮到單手握持手機的使用場景，可盡可能擴大定義長按手勢的觸發熱區，屏幕中除頂/底bar框架區以及本身就自帶長按事件的按鈕入口之外，其它大面積區域熱區均可支持長按觸發快捷菜單，以降低觸發難度、提升易用性。
3.2 ）支持跟手觸發：
長按后浮出的快捷功能項，其浮出位置支持跟隨手指的縱向觸發位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實時提示及響應反饋：
靈活判斷當前手勢觸控狀態（如滑入選擇 / 松手觸發），在界面中即時給出相對應的引導提示或振感反饋，以幫助用戶快速適應新的手勢觸發機制。
方案上線及驗證
以AB實驗對本次設計方案進行定量測試驗證：
「對照組」效果：長按觸發“快進”（各播控功能入口仍歸置于基礎菜單面板之中）；
「實驗組」效果：長按觸發“快捷菜單”選項（支持滑選和點選模式）；
小流量實驗上線后，經過近半個月的觀察，大盤指標穩定、播放完成率等滿意度指標穩步提升。
「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強的快捷觸發訴求。
「實驗組」的“快進”雖多了一步觸發步長，實驗前期“快進”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續走高，通過滑選觸發“快進”的操作習慣也快速被培養起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
二期擴展方案
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發的訴求，于是我們對長按菜單進行了二期的設計升級，在長按浮層最右側新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項增多，播控功能整體的使用量得到進一步提升。
四、「組合手勢」拓展探索
手勢交互是用戶在現實世界行為的映射，無論是基礎手勢還是組合類高級手勢，都須符合用戶認知習慣、并融入具體的使用場景中進行設計。
以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐，我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。
1.「右滑返回手勢」激活“小窗播放”
“小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續消費。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發出交互信號而觸發浮出小窗入口，隨后系統根據用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗的連續性。
2.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結語
便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑，從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發，后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
提到按鈕，大部分人印象就是文字加個背景框，并沒有太多需要設計的空間。但是作為B端設計師，相信很多同學在工作過程中都產生過以下問題：
按鈕作為最基本的交互單位之一，幾乎在每個頁面中我們都會使用到。由于不同行業下業務場景的復雜性，很多時候很難直接參照其他產品的按鈕進行復用，也無法用一套布置方案復用所有場景，所以作為B端設計師需要對按鈕控件具備足夠的認知，理解其背后的使用邏輯和規范，才能滿足多層級跨場景的設計需要。
本文結合自身的工作經驗，對按鈕進行了系統性的整理和總結，希望對各位B端設計師同學的日常工作和學習有所幫助。
在詳細介紹按鈕前，我們先簡單了解下按鈕的發展歷史。按鈕的概念起初是源自現實物理世界的實體按鈕，在日常生活中如電源開關、計算器、電話等都是通過實體按鈕進行控制，由于其簡單直觀易操作的特性，即使如今各種電子產品都逐漸發展為觸控屏操作，實體按鈕依舊被保留了下來。
當數字屏誕生后，人機交互設計開始走向數字屏幕后，為方便用戶理解，在很長一段時間內設計師都是采用擬物風按鈕來暗示用戶可執行的操作。伴隨著客戶端設備升級和開發方式的變更，至2013年 Apple 在iOS7上第一次采用了扁平化設計，至此按鈕樣式開始往扁平化發展。隨后歷經了多年發展，按鈕的樣式開始層出不窮，但是無論樣式如何變更，其背后的體驗交互邏輯依舊是物理世界按鈕的映射。
在B端設計中什么樣的組件可以定義為按鈕？我們先來看看國內外設計系統中對按鈕組件的定義：
總結來說，按鈕可以理解為用于承載即時操作和命令的組件。由于B端產品業務邏輯復雜、頁面流程多，相較于傳統意義上的按鈕，B端中的按鈕被設定為可復用、規范化的組件，通過對組件元素進行拆解、歸納、重組，將其劃分為特定類型的組件方便管理和使用。
按鈕相較于輸入框、選擇器、單選框等控件無法進行數據輸入，相較于標簽、文字提示等控件也無法進行信息瀏覽，其關鍵在于【即時性】和【承載操作】，既可單獨完成操作，也可與其他控件聯動，作為觸發操作的行動點。
雖然同樣翻譯為標簽，但是此處指的是 Tag 標簽，而非 Tabs 標簽頁。標簽在樣式上與按鈕幾乎相同，且同樣可以添加圖標標識和觸發操作。兩者的區別在于，標簽側重于信息的選擇、篩選和分類，而按鈕則只是單純用于觸發即時操作，因此很多時候標簽會設置不同顏色樣式以便信息區分。
和其他錄入控件相比，開關Switch最顯著的特點便是和按鈕一樣觸發后立即生效，因此很多初級設計師很容易將其與按鈕歸為一類。
其區別是，開關承載的是兩種互斥狀態的切換，如打開/關閉、顯示/隱藏、啟用/禁用等，此外由于在視覺上符合用戶對現實世界中開關的認知，所以可以直接展示當前項的狀態。
單選框和多選框一般用于狀態標記，但是無法直接觸發操作，所以通常會和按鈕配合進行使用。最常見的搭配場景便是在登錄頁，用戶勾選【記住密碼】或【自動登錄】后標記其狀態，再點擊按鈕進行登錄。
相較于其他組件，按鈕的元素構成較為簡單，分為內容層和容器層，通過將不同元素進行搭配組合，即可設計出不同類型的按鈕類型和按鈕狀態。
內容層：圖標和文字自由組合。內容層作為操作引導的核心必須存在。
容器層：控制顏色、圓角、描邊、投影等樣式，有些設計系統下還會加上交互動效，提升用戶體驗感。
在查閱大廠的設計規范時，相信以下按鈕名稱大家應該都不陌生：主按鈕、懸浮按鈕、圖標按鈕、危險按鈕、下拉按鈕、文字按鈕、CTA按鈕……很多新手設計師會產生疑惑：
為什么要劃分如此多的按鈕類型？
這些按鈕間的區別是什么？
為什么各家設計系統下按鈕分類都不相同，我應該選擇哪種作為參考？
為了區分好按鈕類型，關鍵要先明確類目劃分的邊界。這里為了方便大家學習，我從按鈕的強調程度和使用場景2個緯度將按鈕進行劃分，基本涵蓋了常見的按鈕類型：
在同一個頁面中往往會存在多個行動點，因此需要將按鈕依據強調程度進行劃分，確保用戶可以依據設計的按鈕層級快速找到最需要操作的按鈕。常見的按鈕強調程度可以分為3個層級：
高度強調：承載頁面上最重要和突出的行動點。為了保證視覺層級最高，通常會采用大面積主色填充或投影增加空間層級的方式進行區分，例如主按鈕和FAB按鈕（懸浮按鈕）
中度強調：承載僅次于最重要行動點的常規操作。為了避免太過吸引用戶注意，通常采用中性色進行描邊或填充，也被稱之為次按鈕。
輕度強調：對頁面中其他操作補充或可選操作。為了確保視覺上不凸顯，通常不會填充背景色，常見于文字按鈕和圖標按鈕。在輕度強調中還可以劃分為弱強調（內容填充主色）和不強調（內容填充中性色），由于文字按鈕填充中性色難以和正常文本進行區分，所以一般內容填充中性色只會用在圖標上。
由此我們得到了依據強調程度劃分的幾個常見按鈕類型：主按鈕 > 次按鈕 > 文字按鈕 > 圖標按鈕。接下來針對每種類型我們來展開說明。（FAB按鈕在B端頁面中屬于特定場景下使用的按鈕，不具有通用性，故劃分到使用場景中進行討論）
主按鈕代表著頁面中的核心操作項，是視覺權重最高的按鈕，常用于突出提交、完成、確定等操作。為吸引用戶注意，常使用品牌色填充背景引導用戶視覺焦點。關于主按鈕的使用需要遵循以下2個原則：
次按鈕是使用最頻繁的按鈕，當在頁面中不確定選擇哪種按鈕時，使用它往往是最安全的。次按鈕通常使用中性色，其樣式可以分為描邊型和填充型：描邊型使用最為廣泛，是次按鈕首選的樣式，而填充型相對特殊，在不同設計系體下會根據業務場景選擇是否使用。
相較于描邊型，早年在B端產品中很少會見到使用填充型樣式作為次按鈕使用的，但是可以發現近幾年國內外設計系統如Arco Design、Marterial等，開始陸續將填充型次按鈕納入到按鈕組件庫中。
填充型次按鈕更多的使用場景是在移動端上，其視覺強調程度弱于主按鈕但又高于描邊型，可以更好的表達組件的整體性和吸引用戶注意。
伴隨著硬件設備的發展，桌面端和移動端的操作邊界開始逐漸模糊，各產品開始追求全生態環境下的統一性。為降低用戶在設備切換時的體驗隔閡，一套設計系統需要能同時滿足多端設備的兼容，而填充型樣式更符合其場景需求。最典型的便是iPadOS連接鼠標操作時，懸停態下填充型按鈕明顯比描邊型更容易被識別。
基于以上考慮，在工作中選擇次按鈕樣式時可以參考以下建議：
如果當前項目上已經有在使用的開源庫，盡量以原有組件庫為主。除非自身產品有設備互通的場景或需要同一套設計語言兼顧不同端，否則增加多余的次按鈕樣式只會更加復雜且影響用戶的體驗一致性。
如果是項目是0～1搭建組件庫，根據自身業務場景選擇其中一種樣式使用即可。一般桌面端產品使用描邊型，如果產品生態中有移動端，為了保持設計語言的統一更建議采用填充型。
此外還需考慮前端修改組件庫樣式時的開發成本。
文字按鈕適合承載如取消、還原等無需特意強調的操作，通常使用在表格操作欄、表單頁等場景。為了和普通文本做區分，提示當前內容可交互，需要加上鏈接色（一般是藍色）提醒用戶。
文字按鈕和鏈接（Link）的默認樣式一致，在搭建組件庫時很容易發生混淆。其區別在于按鈕用于發起動作，觸發相應的業務邏輯，而鏈接的作用是導航，作為頁面跳轉或錨點定位的觸點。為了更好的區分，可以在交互樣式上進行處理：
文字按鈕：指針懸停時容器添加背景色。
鏈接：指針懸停時文本添加下劃線。
圖標按鈕的視覺層級最弱，但是由于占據空間小，常用于同時展示多個操作項時使用。由于缺少文字解釋，單純的圖標可能會造成用戶的理解偏差，故建議在指針懸停時加上Tooltip的文字提示進行輔助說明，對于特定操作還可加上快捷鍵指引。
在依據強調程度劃分的基礎上，還有部分按鈕只應用于在特定的業務場景中，所以各設計系統下的按鈕分類會有所不同。以下按鈕的應用場景較為頻繁，故被單獨劃分為一類方便交流和管理。
功能按鈕順應用戶心智，采用綠色、橙黃色、紅色代表了成功、警告、危險三種功能按鈕，用戶無需瀏覽按鈕內容，直接通過色彩即可識別當前操作可能導致的后果。
由于功能按鈕的視覺權重往往比主按鈕還高，在頁面中需謹慎使用，避免對其他頁面信息造成干擾。
相較于普通的描邊型按鈕，虛線按鈕只承載傳輸文件或新增配置項等操作，為方便用戶感知，將其描邊設計為虛線樣式。
由于虛線按鈕只能支持單純的觸發操作，在很多上傳情景下不能滿足其業務需求，故逐漸衍生出單獨的上傳組件，相較于虛線按鈕：
上傳組件支持批量上傳
通常有更大的交互區域且允許支持拖拽上傳，以降低用戶的操作門檻
搭配展示文件列表，用于對已上傳文件進行預覽、重新上傳、刪除等操作
顧名思義，幽靈按鈕不具備實體性，一般底色為透明，其按鈕的內容反色，通常使用在復雜或顏色較深的背景中，例如 banner 圖、官網首圖等，避免按鈕突兀地破壞背景的整體性。由于幽靈按鈕使用的場景不固定，因此無須嚴格遵循現有規范，只要滿足其特定場景下的業務需求即可。
CTA，即“Call to Action”的縮寫，意思是行為召喚。該詞原本是營銷領域的術語，后來逐漸引用至互聯網領域中，即目的在于給用戶一個明確的反饋：當前事件的操作流程已經完成或即將發起一個新的流程。
CTA按鈕之所以會被單獨歸類，因為當按鈕作為吸引用戶采取點擊行為的載體時，時常在事件操作的最后一步出現，作為產品的關鍵觸點之一，可以有效提高頁面或屏幕的轉化。也因此當頁面中存在多個按鈕時，CTA按鈕的優先級往往是最高的，可以通過色彩對比、元素點綴等方式引導用戶點擊。
懸浮按鈕FAB，即Floating Action Buttons的縮寫，其特點是會始終懸浮在頁面的固定位置，不會隨著頁面滾動而消失。
在B端產品中，FAB按鈕更多的使用場景是承載全局性的附屬功能，常見操作包括咨詢、客服、快捷鍵、點贊、收藏、分享、回到頂部等。在設計FAB按鈕時需注意以下要點：
不能干擾用戶在當前頁的正常操作和瀏覽。盡量放置在頁面的固定位置，當操作數過多時可將其他操作下鉆至更多按鈕中。
承載操作須是當前頁的全局操作，無須與其他頁面元素發生聯動即可觸發。如不能承載保存、刪除、清空等操作。
按鈕組不是單獨的按鈕類目，而是按鈕組的集合體，當多個同級操作項同時出現，但不想占有太多頁面空間時使用。通常按鈕組會將最關鍵的主操作露出，其他操作收入更多操作項中。
嚴格來說 下拉菜單Dropdown 并不屬于按鈕類型，但因為其使用場景較為頻繁且時常用來承載多個按鈕操作，故在此處作為單獨類型進行講解。下拉菜單作為操作命令集合使用時，可以簡單理解成按鈕組：將多個操作按鈕收納到同一菜單下。在使用時有兩點需要額外注意：
選擇器Select 屬于錄入控件，在基本形態上和 下拉菜單Dropdown 高度相似，都是通過下拉浮層來容納更多信息，在實際應用時經常容易被混淆。要區分兩種組件，最關鍵是理解其使用場景：
下拉菜單：當頁面上的操作命令過多時，用此組件可以收納操作元素。核心是菜單導航和命令集合
選擇器：用于一組選項中選擇一個或多個數值。核心表單填寫和數據篩選
當下拉菜單用來承載操作項時，各操作項關聯性也會引起下拉菜單樣式上的區別，這里用實際的案例輔助大家理解：
乍一看似乎都是差不多的樣式，在工作中很多設計師也是隨機選擇其中一種進行使用，但是作為設計師，就是應該從細節之處見真章，每一處設計都應有理有據。
簡單來說，以上三種組合按鈕中的操作關聯性是逐漸疏遠的，這一點從按鈕樣式上也可以看出。
新建一：合并同類項。突出新建操作本身，更多操作項是新增的數據類型進行區分，減少重復文案的出現。
新建二：操作延展。強調的是數據導入的形式，提供更多操作渠道供用戶選擇。
新建三：信息收納。各操作項之間并沒有關聯性，只是緩解空間壓力或突出使用最頻繁的操作。
在了解了以上按鈕類型，我們來看看按鈕的交互狀態。不管哪種按鈕類型都會存在相應的交互狀態，設計師在交付設計稿時需要將不同狀態下的按鈕樣式進行標注，方便前端開發。
在剛開始接觸按鈕時也曾被一堆狀態給亂花了眼，光是理解不同狀態的區別已經頭大。其實回頭來看，開始只要記住4種最關鍵的按鈕狀態便可滿足大部分的使用場景，即按鈕的正常態、懸停態、點擊態和禁用態。
在日常工作中，沒有設置聚焦態和加載態并不會影響用戶的正常使用，但是加上后可提升用戶的產品使用體驗，大家可以根據開發成本和實際的業務情況考慮是否加上。
按鈕的初始狀態，即默認情況下的基礎樣式，此處不多做介紹。
當鼠標指針移入按鈕時的狀態。為了暗示用戶鼠標指針已進入按鈕的可交互區域，按鈕相較于正常狀態在背景色彩等樣式上會有明顯的區別。懸停態通常還會配合鼠標指針變化輔助用戶理解，在前端CSS樣式表中常用 cursor:pointer ，指針變化為伸出食指的手。
由于懸停態是由鼠標指針移動引起，故只有設計桌面端產品時需要考慮到，而在移動設備上通過手指操作故按鈕不存在懸停的狀態。（在iPadOS更新至13.4版本后開始支持連接鍵鼠操作，但是在日常工作中很少會出現，此處不予以討論）
鼠標點擊即按下按鈕時的狀態。激活態是在懸停態基礎上發生變化，鼠標指針樣式和懸停態保持一致，按鈕背景色發生變化，提示用戶已觸發點擊操作。
按鈕無法操作被鎖定時的狀態。該狀態是為避免用戶誤操作而設立，如在登錄頁未完成信息填寫時將提交按鈕禁用，提示用戶無法點擊，只有填寫完必填字段后才可以點擊提交。在鼠標懸停時指針變化為禁用狀態，在前端CSS樣式表中常用 cursor: not-allowed，通常會配合tooltip文字解釋說明行動點不可用的原因，避免用戶疑惑。
值得一提的是，禁用按鈕并非只有置灰一種樣式，只降低色彩飽和度和明度也是禁用按鈕的表現手法之一，且相較于置灰更方便用戶識別主次按鈕。
以上是針對不同按鈕狀態的說明，這里并沒有針對不同狀態的樣式進行詳細說明，因為不同的設計體系下可能會采用不同狀態樣式進行展示。為方便對比，這里將常見組件庫中的按鈕狀態進行了整理：
可以發現，除了TDesign中描邊按鈕激活態下增加了中性色填充外，基本按鈕狀態都是保持著一致的梯度變化。這里以正常態的按鈕樣式為基準，將懸停和激活狀態下的色彩變化進行整理：
總結來看，在不同色彩的按鈕上按鈕狀態會按照不同梯度分布：
主色（品牌色）按鈕色彩梯度從淺到深：激活 〉正常 〉懸停
中性色按鈕色彩梯度從淺到深：激活 〉懸停 〉正常
之所以出現這種情況，主要是因為在搭建產品色彩體系時，品牌色一般會采用色板中間色作為主色（通常是第六個顏色），故不管往淺往深都有更多靈活調整的空間。而背景使用的中性色為了避免干擾視覺層級，通常選擇色彩較淺的中性色，因此沒有再往下延伸色彩梯度的空間。
以上介紹的四種狀態建議采用色彩組件庫中色卡進行配色，上圖標注了不同按鈕狀態的配色選擇，下面是AntD和ArcoD的色板生成工具（關于產品取色未來會專門出一期文章進行講解）。
ArcoDesign Palette 色彩工具
Ant Design 色板生成工具
該狀態用于指示電腦光標的位置。在有些場景下不操控鼠標，只通過鍵盤方向或Tab切換選擇頁面元素進行操作，反而是更高效的操作方式。常見的聚焦態按鈕樣式為增加描邊，有的設計系統下會采用和懸停態一樣的樣式。鍵盤操控快捷鍵推薦：
【Tab】前進
【Shift + Tab】后移
【Enter】激活
表明用戶操作后系統正在處理的狀態。由于服務器響應或網絡延遲等問題，有時候用戶操作完需要間隔一段時間才能響應，加載態可緩解用戶的焦慮情緒，避免用戶由于未收到反饋而反復操作的情況。
源自 Arco Design-組件按鈕
接下來便到了本文的最關鍵部分，也是按鈕設計中出現最頻繁和令人頭痛的問題：我的按鈕究竟應該放在哪里？
在此之前先要理解按鈕設計的目標是引導用戶采取我們希望用戶采取的行動。這就需要盡量幫助用戶快速找到需要操作的按鈕并了解執行該操作的結果，同時盡可能避免誤操作?；谝陨夏繕耍覀儚挠脩魧嶋H操作路徑的視角來梳理按鈕設計時應考慮的問題：
按鈕區在頁面中的什么位置——空間位置
有多個按鈕時采用怎樣的閱讀順序更合適——排列順序
按鈕采用怎樣的樣式更合適——視覺樣式
當用戶進入頁面時，除了瀏覽當前頁的信息內容還需要尋找接下來可執行操作的可交互區域，即按鈕區。除了單純通過視覺差異區分按鈕和頁面其他元素外，還需考慮到用戶在信息瀏覽過程中的視覺動線。結合古騰堡法則和格式塔原理，給出以下設計建議：
在沒有其他視覺效果引導時，F型和Z型網頁瀏覽模式可以作為用戶視覺動線的基礎指導，關于以上2種瀏覽模式網上有太多相關介紹，此處就不再贅述。
將關聯性強的信息放在一起，可以降低閱讀成本，提高用戶的感知效率。
這里先討論一下開頭提到的問題：主操作項放在左邊合適還是右邊合適？我們先來看看一些案例：
可以發現，即使是業內頂尖的互聯網公司也并沒有遵從同一套確定方案。我們再看看這位在英國學人機交互的研究生所做的課題實驗：https://www.woshipm.com/pd/3104897.html。具體的實驗過程不再詳細贅述，直接來看結果：對于新用戶而言，確定按鈕的位置對操作時間和錯誤率影響并沒有太大差別。并由此得出更關鍵的結論：不要輕易改變當前產品中用戶已經習慣的按鈕位置。
在此基礎上對于操作項不固定的頁面，給大家整理了以下建議：
最典型的案例便是編輯器類產品的操作項，將同類操作區整理分組，方便用戶查找。
此處的閱讀順序并非特指從左往右、從上往下，而是依據用戶當前視覺動線，優先滿足用戶預期或操作可能性最大的按鈕需要最先被用戶發現。
考慮到人體工程學操作習慣和操作后果的影響，還需注意一些特定的場景：
流程屬性的按鈕如上一步、返回、后退等操作用戶習慣在左邊，而下一步、前進、更多等操作在右邊。
如刪除或清空按鈕，盡可能放置在遠離主按鈕的位置，甚至可以下鉆至更多按鈕中，避免誤觸。
在文章開始基于強調程度劃分按鈕類型時，按鈕的視覺樣式便是基于其強調程度劃分的，頁面中越是需要強調的按鈕其視覺權重越高。前文中只劃分了主按鈕、次按鈕、文字按鈕、圖標按鈕這4種基本類型，此外還可以通過文本粗細、內容量等方式進一步細分。
按鈕的尺寸優先體現在其高度上，而寬度一般根據內容區大小自動適配。通常會將按鈕分為大、中、小三個規格，以滿足不同場景下的使用需求。
關于按鈕寬度需要注意的是，由于按鈕內容的不固定，同規格按鈕可能因為內容量差異引起視覺上的層級誤判。故為了減少按鈕錯綜不齊的情況，建議設置按鈕最小寬度的界限，一般為4個文字+左右內邊距。
相較于其他方面，似乎大家對產品文案總是保持著“點到為止”的態度，但是并不意味著文案不重要，錯誤的文案會讓用戶產生疑惑，嚴重影響用戶體驗。相反好的按鈕文字甚至可以做到即使不去閱讀上下文，單憑按鈕文案即可做出正確的判斷。在一些關鍵節點的CTA按鈕，文案的優化可以帶來轉化率大幅度的提升。因此關注文案細節也是設計師平時需要考慮的問題。優秀的按鈕文案包含以下幾個要點：
按鈕區域寸土寸金，每一個字都要有其存在的意義，如果刪除也不影響信息表達即沒必要存在。
文字表達清晰，避免使用用戶難以理解的專業術語。
常見的“登陸&登錄”、“收獲&收貨”、“即時和及時”都是容易打錯的詞。
以下給大家整理了常見易錯的按鈕文案表，建議保存收藏。
如統一采用動賓結構：修改價格、提交工單、查看更多等。
結合自身品牌特性，在按鈕中融入適當的情感化文案，也是塑造品牌心智的觸點之一。
當前市面上主流的互聯網產品大多都采用了圓角設計，因為圓角矩形相較于直角更具安全感和親和力、在相似內容中識別度更高，且圓角對信息的聚焦性更強。同樣B端設計中通常也會在按鈕中加入圓角，方便用戶更高效的辨別和獲取信息，但是需要注意的是圓角并非越大越好，過大的圓角會導致按鈕操作熱區的縮窄，更不易被點擊觸發。如在移動端產品上都是采用手指按壓，而桌面端采用鼠標指針單擊，相較之下后者對點擊按鈕的觸發精度要求更高，也因此全圓角按鈕（也被稱為膠囊按鈕）更適合在移動端產品上使用。
此外按鈕的圓角設置還需考慮到產品整體的視覺一致性，在不同場景下都要保證統一的感官體驗，如在大尺寸的按鈕上圓角的曲率也應設置更大。
作者：蝦米的設計筆記 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言：
1886年，由卡爾·本茨發明的第一輛汽車距今已經有130多年了，汽車座艙的發展已經來到了一個新的階段，現階段我們稱其為智能座艙。它不僅有著先進的數字化儀表中控大屏，還有流媒體后視鏡、抬頭顯示、智能空調、智能氛圍燈等功能，看得見的看不見的地方無不凸顯著科技進步帶來的變化。
作為HMI設計師，在這個領域也工作了許久，對于智能座艙、HMI的設計有了些見解和思考，本文試圖通過總結實車座艙、工作經驗、設計來展望未來的HMI設計趨勢，以及嘗試分析作為HMI設計師我們應該如何在設計這一領域去趕上智能汽車發展的風口。希望這些想法能讓剛入行或者想入行的設計師同學們對于HMI設計有一個幫助。
一、時代變革下的智能座艙——“第三空間”
二、科技發展帶來的設計需求改變
三、用戶體驗帶來更高的設計要求
四、情感需求引領新的設計方向
五、總結
隨著自動駕駛等技術的進步，智能座艙最后將圍繞座艙電子、座艙內飾全面升級到移動的“第三空間”，將信息、娛樂、互聯等功能進行全面融合，為消費者提供更便捷的體驗。汽車將不再是代步工具，用戶在車內即可實現娛樂和辦公，汽車有望進化成為家庭、辦公場所之外的“第三空間”。
盡管也有人認為汽車只是個代步工具，但更智能化更數字化的智能座艙就是大勢所趨，各家車企八仙過海各顯神通，不停進行車輛的智能化升級，提升智能座艙的體驗，軟件定義汽車，這是行業的共識，許多互聯網公司也加入了這場戰爭。
在這樣的背景下，作為設計師的角度，看著智能座艙的智能化在不斷提升，我們對于HMI設計有了些思考。我們認為會有這幾個方面帶來HMI設計需求或要求的的變化：
硬件技術的革新帶來體驗形式的改變，而完善的設計升華用戶對于新科技的體驗。在“未來”還沒有到來的時候，發揮設計的主觀能動性能，能讓現在成為更好的現在。好的視覺體驗不應只是數字化的體驗，硬件能夠給予視覺更加完整，更加豐富的體驗感受。智能座艙科技能力不斷提高對設計有了不一樣的需求。作為設計師，關注科技和車機硬件技術的進步能夠拓寬我們的視野，延展設計的畫卷。
傳統的HMI由中控系統，屏幕，?向盤控制等模塊組成，受限于應?場景?多只滿?于?駛功能，強調的只有?和?的關系，但隨著??駕駛解放了?的雙?，?和?的關系將被重新思考定義。
1、通過設計提升自動駕駛的體驗，增強用戶的使用信心：
自動駕駛模式下，通過攝像頭特、毫?波雷達、超聲波雷達等掃描記錄下當前?輛所處的環境信息，將路況信息和道路周圍環境車輛等信息進行可視化呈現在屏幕上。在這個過程中，除了硬件的可靠性能否掃描出周圍環境車輛物體之外，可視化的視覺設計也會影響到用戶的信心。
交互層面，需要有更多自動駕駛可視化圖像的交互思考和創新，例如當開啟自動駕駛的車輛在一個復雜的十字路口等待紅綠燈是，周圍復雜的情況會讓用戶恐慌，特斯拉的fsd就會在停下等紅綠燈時，抬高視角，這種方式可以通過屏幕的可視化信息觀察到更多路況車輛信息，從而讓用戶對機器產生信任感。
視覺層面上，一般來說識別度比較重要，能更直觀的展示模型可視化信息就好，但是可視化信息的表現形式可以作為視覺設計的重點，可以是線性模型，也可以是白模等等，要去契合車機的主題、顏色、概念，又要達到可視化的要求。
2、不同的主題模式以及新的視覺風格：
作為決策者的汽車用戶當然需要更多的主題顏色或主題風格選擇，他們不再簡單要求能用就行，不僅僅是更好用的交互，對視覺設計當然也有了新的要求。
一般來說，現在的車機系統最少都要有一套黑白模式，分別匹配白天黑夜的的駕駛場景；有的更是需要在越野、城市、長途情況下有不同的視覺主題界面；或者是運動和沉浸駕駛有不同的界面風格，這些根據需求都是需要去考慮的，如何匹配視覺設計。最常見的黑白模式來說，在設計其中一套的過程中，就要去考慮如何適配成另一套，比如白色模式下的卡片投影，在黑色模式下如何顯示，如果不顯示投影如何去區分卡片。
設計的視覺風格的趨勢不是一成不變的，我們認為他的發展是螺旋式上升的，手機的UI最開始的擬物風格滿滿的向著扁平化發展，但扁平化后大家又開始追求擬物，后面就誕生了輕擬物風格和2.5d等風格，現在又流行簡約3d風格。以前由于車載芯片性能等問題，隨著車載芯片、屏幕性能的不斷發展，未來的HMI設計風格絕對不會一塵不變，他同樣也會追求不同的設計風格，輕擬物、簡約3d圖標甚至3d界面的交互都會不斷產生甚至已經產生，也要求設計師去了解和掌握更多的設計風格。
電動汽車行業飛速發展,智能AI和人際互聯等人車交互概念也跟著興起,對于中控臺的需求和功能復雜度也跟著越發精細起來，全液晶顯示和HUD已經成了基本操作，炫酷、科技感爆棚的HMI設計成為標配。
1、越來的大的車載屏幕：
燃油車時代評價一輛車不可避免的會討論汽車三大件：發動機、底盤和變速箱。但是智能座艙時代，不少人戲稱新的三大件是：彩電、冰箱和沙發。雖然是戲稱，但是我們也可以看出來大屏幕車機等提升座艙體驗的設備越來越成為用戶購買汽車的一個指標。當然也有人不這么認為，但是市場是很誠實的，大屏幕的車機就是更受歡迎，筆者曾問過一個剛畢業幾年準備買自己人生中第一輛車的朋友，你買車會在意車的中控屏大小嗎？他的回答是：當然會，大就是好。
可以看出，作為HMI設計師，面對的情況就是越來越大的屏幕尺寸和分辨率以及越來越多屏幕數量。這也給了設計師更多的發揮空間。交互上可以有更多的交互形式，同時也有了更高的視覺要求，需要有場景、有主題、有氛圍等等等。作為座艙內最顯眼的屏幕，也不簡單是呈現功能那么簡單，它也成為汽車內飾的一部分，除了車內的氛圍燈，屏幕內也需要呈現更多的設計美感。
2、虛擬現實技術的發展：
雖然前文提到了駕駛員不再是單單駕駛者，但是首先駕駛這一需求是不會消失的，其次且隨著自動駕駛的發展，用戶也希望能通過虛擬現實技術看到更多的信息來幫助自己完成抉擇決策。未來虛擬現實增強技術將在安全駕駛方面扮演著更為重要的角色。虛擬現實增強技術對于用戶而言，具有很大的直觀性，通過結合現實路況信息，實時出現一些虛擬箭頭來直觀地引導我們前進，從而避免在駕駛中出現開過路口和分散駕駛員注意力的情況。
其實目前大面積應用的hud也算是虛擬現實技術的一種，AR-hud早已經成為了現在智能汽車的標配，未來幾年，我認為會有越來越的的用戶擺脫低頭看儀表的習慣，hud可以幫助駕駛者更便捷更安全的獲取駕駛、車輛、車道等信息。
我們都知道hud這一技術最早是作用于軍用戰斗機的，隨著技術的進步虛擬現實技術會不斷下放到民用汽車上，所以作為設計師對這方面的技術也需要有更多的了解，如何運用在汽車上，設計出更加符合汽車操作和行駛邏輯的虛擬現實技術的視覺信息。
另一個方面就是虛擬成像，科幻電影中的虛擬成像來進行互動和對話或許也會成為未來的HMI設計趨勢，但這可能要很久以后才能實現了，或許同元宇宙一樣久-_- !!!
以用戶更能理解、更能接受的方式展現全新的智能化座艙，提升操作的舒適性和高效：用更簡單的方式傳達更直觀的信息。這是我們在用戶體驗基礎上做設計需要做到的。
用戶對于智能座艙的操作不熟悉，產生不信任感，我們需要以設計為連接點，和用戶溝通。科技滿足人的基本需求，藝術升華體驗。在科技飛速進步的當下，科技研發固然關鍵，以眼睛為窗戶讓用戶體驗到科技的進步同樣不可缺少，幫助用戶用視覺感受未來、提高體驗是作為設計價值的最高追求。
·沉浸式的體驗感
當車輛從工具變為一個能夠讓人沉浸和享受的空間，在原有的交通屬性之外增強智能座艙的空間的娛樂屬性。當在車內等待或者不想下車在車內躺一會，小憩、k歌、電影等可能都是會干的事，露營、閑聊等也可以是智能汽車提供的環境。所以我們需要將有限的畫面變成無限的遐想空間。
1、契合功能的氛圍設計：
不要好奇為什么有人為什么會在車上睡覺，會在車上看電影，但是這個需求是一定存在的，作為“第三空間”，這是智能座艙應該要勝任的能力。
設計師需要做的就是打造契合這些場景下的氛圍感，通過氛圍燈音效可以打造出一個適合觀影、聊天的氛圍，前文提到屏幕也是車輛內飾的一部分，也需要通過視覺畫面、動效去一起營造這個可以沉浸的氛圍。
2、視覺設計的畫面感：
當科技滿足了基本需求后，我們需要更出色視覺設計來升華用戶的視覺體驗。屏幕作為一幅畫框呈現我們想要的畫面，我們認為HMI的界面設計會更多的趨向于整體的畫面感以及場景化，通過打造一個屏幕內的場景空間，在服務和交互體驗上突破創新，給用戶體驗智能座艙的沉浸式體驗空間。
目前已經有不少汽車的都已經用場景化的UI來上到自己的中控儀表上。場景主題的HMI已經不只是單單的概念無法落地，虛幻引擎技術的加入也能讓更多的三維場景能夠落地到實車上。
·信息內容需化繁為簡
智能座艙的一個很大的特點就是幾乎將所有車內功能按鍵、報警都搬進了屏幕內，那么幾乎所有的信息都要通過屏幕獲取，所有的功能都需要通過屏幕點擊操作完成，但是當所有的內容信息功能都堆積在一起時，任誰看著都會產生信息焦慮。
通過設計去凸顯重要消息和重要功能是解決問題的重要方法。許多汽車中控屏都將空調和座椅的快捷操作加入到了屏幕的底部dock欄，因為空調是使用頻率十分高的功能。交互層面的設計需要做到簡化常用功能的使用層級步驟，視覺設計需要做到讓重要功能顯眼易操作。
·一觸即動的反饋
我相信所有人都會認為如果車機使用起來如果不流暢，體驗會很糟糕，特別是如果極其卡頓，會不愿意使用，這也是許多人駕駛車輛的時候寧愿放著更大的中控屏不用，而去用手機導航的一個重要原因。受制于車載芯片的性能和屏幕的質量，過去確實這種卡頓是沒有辦法解決的。但是這些隨著芯片性能和技術能力的提升，或許芯片已經不是造成車輛卡頓的罪魁禍首。
如果車機上的動效做的不夠流暢舒適，也會產生“卡頓”感，同樣是對用戶體驗的破壞。所以一定要做好動效反饋，掌握好動效節奏，讓用戶感受到一觸即動舒適感，是可以大大提高用戶體驗的。關于具體的動效設計受篇幅影響就不展開了，我認為這一塊車機與手機和pad上的動效體驗一致，蘋果靠著極其出色絲滑流暢的動效設計讓人使用起來體驗感十分舒適。界面中的元素彼此關聯，而非獨立存在。好的動效設計是在界面中某一個元素發生變化時，與之相關聯的元素也會產生邏輯上合理的變化。動效不是獨立存在的，而是彼此關聯著的。界面是由元素所組成的整體，所以當界面中的某一些元素發生變化時，周圍的環境也會受到影響。
動效設計像交互設計、視覺設計一樣已經成為用戶體驗的一個重要組成部分。一款具備舒適動效標準的車機系統能給車主帶來更好的客戶體驗。當然，做好同開發的對接也很重要哦?。?！
當科技水平很高且生活中處處是科技的產品，人類就會越加渴望高情感的環境。科技本身并不是冰冷的，它帶有溫度、靈感、和情感；科技也不是孤立、靜止的，它在不斷地尋求自身的發展并拓展與人類的關系。我們需要通過設計讓科技與用戶完成情感上的交流，讓其更具有藝術感和親和力，讓車機從“孤島”成為烏托邦。
·是助手更是伙伴
語音助手通過智能對話與即時問答的智能交互，實現幫忙用戶解決問題，而智能語音助手在智能座艙中的地位越來越受到重視。在功能的基礎上，如果智能語言助手能夠跟有溫度有情感，用戶也能夠更信任系統，擁有更好的使用體驗。
如何讓語言成為助手和伙伴呢，我們認為如果只是冰冷的vui光效反饋，是做不到溫度和感情的，可能我們需要一個語言形象。當用戶喚起語言是，會有一個具體的形象出現在屏幕上或屏幕外，讓用戶產生與系統對話的感覺，產生愿意與其對話的意愿，建立情感觸點；另一方面，也可以打造一個提高汽車品牌產品力點IP形象。
所以語音形象的設計，我們認為也是HMI設計師需要考慮和思考的，需要設計出契合品牌的IP形象，來成為用戶的專屬語音助手和伙伴。他or她需要有豐富的表情、豐富的肢體動作，甚至有情緒來與用戶進行互動反饋，從而達到提升用戶體驗的目的。
如何設計出一個有溫度有情感的語音助手大家可以翻翻之前發的文章《車載智能助手設計：智能座艙的合作伙伴》，希望能對大家有所幫助?。?！
·無微不至的細節設計
博大而深沉的情懷讓人贊賞，但微小而細膩的情感讓人感動。總有人能夠被某個看似平凡的細節深深打動，這便是細節設計的價值，我們精準的去定位用戶群體，探索用戶的情感需求，當然希望能夠做出打能夠做出打動人心的細節設計。除了下面幾個點當然還有更多的細節設計，就需要在設計過程中去慢慢體會和發現了了。
1、多模態交互方式：
人機的交互方式早就已經不再是單單的觸屏操控，理想L9的后排屏幕，通過手勢或者語音都可以進行操作，將手放在屏幕前半米外的位置挪動，屏幕就會有光標跟著手移動，握拳就是點擊確認，盡管這種交互方式目前來看還有瑕疵，但是作為設計師看到的應該是在車上，會有更多更自然的多模態交互方式出現，可不僅僅只是手勢，通過文字、語音、視覺、動作、環境等多種方式進行人機交互，充分模擬人與人之間的交互方式，這不只是個噱頭，而是實打實的體驗設計。語音不就是一個典型的多模態交互的方式嗎。我們相信會有更多更自然交互方式，讓人既自然更加自然，做到“無感”的舒適。
2、情感化設計：
前文說到語言助手的設計需要情感，但情感化設計是不僅僅體現在語音上，其實情感化設計是共通的，這是一種設計思維，這種思維可以體現在很多設計方面，比如，我們在視覺設計上也可以去傳遞感情。而我們認為，未來的HMI設計在很多地方都需要去考慮到用戶群體的情感共鳴。下面這個例子，重型卡車的儀表設計，鋼鐵元素是賴以生存的車，“門”是向往的家。依托大卡車司機在慢慢長路上對家的思念和向往，用“門”的元素去撬動這種情緒，以情感作為窗口，去引起卡車司機的共鳴。
HMI設計當然不僅僅只有這些，還有很多，我們試圖總結一些關于HMI設計師需要去思考去了解的東西。新能源汽車的快速發展，同時也帶著智能座艙有了更高的需求，隨著這些因素，智能座艙對設計的要求無疑會越來越高。作為HMI設計師也需要對技術帶來的革新變化有敏銳的觀察能力并思考；同時也要有充足的知識體系和思考發掘能力去完成提高用戶體驗的設計；同時也要有代入式的情感去進行情感化的設計.... 等等等等。這當然也不是一朝一夕的事情，也需要我們設計從業者伴隨著快速發展的汽車這個行業一同去進步。共勉?。?！
作者：EPUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Vue框架作為當前主流的前端框架之一，作者尤雨溪更是國內開發者心中男神，作為開發工程師你是否知道Vue框架名字的由來？你是否知道Vue框架作者尤大大創作Vue過程中的幾個節點？今天就來帶領大家深入Vue背后的故事
其實尤大大最初專業為室內藝術，并非計算機，但是尤大大在后面到帕森斯設計學院進修藝術研究碩士學位，學習的是科技與設計項目，它涵蓋了編程、設計和新媒體藝術，也正是在這個時候尤大大自學了JavaScript，開始用JavaScript進行創作，畢業后就進入了谷歌，尤大大為谷歌瀏覽器開發了一些實驗性的互動場景，把它們放到了作品集中，尤大大在采訪中提到曾在學校期間開發了一個克隆版的Clear應用，它是一個有著很新穎的手勢操作的待辦事項應用程序，它應該算是“滑動來完成”手勢操作的開拓者了，所以就在網頁上重置了他的大部分功能，它在黑客新聞（Hacker News）上火了起來，被很多網站報道了，這件事讓谷歌的招聘官注意到了尤大大，那時候谷歌有很多為谷歌瀏覽器開發的實驗性場景，包括一些3D動效、2D的物理效果和可視化的處理等，都是尤大大他們在用的瀏覽器上實現的，這在當時是前所未有的，它真的體現了JavaScript的強大，不知什么緣故尤大大就接到了谷歌招聘官的電話她說，你有興趣加入我們的創新實驗室嗎，作為我們招收的五人之一，尤大大當時真的不敢相信，都沒給他們發我的簡歷就直接有人給打電話讓加入谷歌，那肯定是要去的，尤大大非常高興，自己不用也搬家，工作場地就在紐約；
尤大大聊出這段經歷：“工作兩年多，做一些有意思和實驗性的項目，稀奇古怪的點子，比如說，十年后的搜索界面是什么樣子的，或者如果整面墻都是可以互動屏幕的會怎樣？如果谷歌能夠聽懂你說的每一句話？諷刺的是這件事現在幾乎已經成為現實了，我們要做出一些關于這方面的概念視頻和這種交互操作的原型，在2012年。在很長的一段時間內，我都在用原生的JavaScript來手寫這些原型，因為這些原型不會使用傳統的UI界面，他們需要很多特殊的處理，這些處理手段在如今普通的應用中很難見到，我嘗試著去用一些現有的框架進行開發，但是很多時候我發現他們不能解決我的問題，我使用的第一個框架是Backbone，Backbone更像是一個為應用搭建的結構，他不會幫助你控制視圖，盡管Angular提供了數據綁定，能將視圖和數據狀態同步起來，但它太約束你寫代碼的方式，所以它也不能很好的處理我正在進行的工作項目，因為這些項目很注重交互而不是如何成為一個完整的應用程序，我開始思考如何才能讓我的工作變得更高效，就在那時我開始想或許我可以自己開發一個我自己的框架，最初我的目標就是開發一個非常簡單專一的工具，僅僅就是同步DOM和一些JavaScript對象，這是最初的想法，在這個初始項目有了一點人氣之后，我們開始擴大開發范圍，一點點加入一些新功能到這個生態環境中去，最終使他變成了一個框架?！?
尤大大對Vue.js進行的首次提交是在2013年的6月份，它剛開始的名字是Seed.js，據尤大大說當時想不到一個更好的名字，但是當尤大大要在NPM上發布的時候，發現Seed.js在NPM上已經被占用了，所以只能再想一個，尤大大表述：“我覺得，這是一個視圖（View）的框架，但是就叫他View的話有點太直接了，所以我就把“View”放到谷歌翻譯里面，然后我找到了它法語的翻譯——vue，只有三個字母，看起來很好，也沒有在NPM上被占用，所以我就用了這個名字?！?
尤大大自述：“我基本上就是為我自己創建的這個框架，所以我的期望是，我希望，開發出一個我自己喜歡的框架，這也是我為什么要做這個框架的原因，我當然還在谷歌創意實驗室工作，所以我把它發布成了我的私人項目，應該有幾百名用戶，我覺的有幾百個GitHub的星星，給了我很多初始用戶?！?
你有沒有想過你會通過這個賺到錢？尤大大：“完全沒想到，當我出版的時候，并不是真的在說我想將其發布為一個可持續的項目，就像一個音樂愛好者為了樂趣而做一個專輯，你知道那種感覺不是為了賺錢，你發布這個音樂，只是因為你享受創作它的過程，并且你希望其他人能聽到它，所以開發Vue.js的過程就像是一個途徑像是我在做一個人們在真實世界中真的會用到的東西，相比我在谷歌創意實驗室的工作來說，我們把做的東西給經理們看，但誰知道這個東西什么時候會變成現實呢（這里主要的意思是在谷歌中想法的出現到真正的落地的周期都是不確定的，甚至都不知道能否落地）所以我有一種沖動，要開發一個人們真正會用到的東西，我當時并沒有想那么多，但有一個熱門的開源項目會幫助找到下一個工作，這就是我加入Meteor的方式，他們基本上很傾佩我在Vue上做出的工作，所以他們直接跳過了面試的過程，當場就給了我工作，所以我很高興，這才是你進行開源項目工作獲得的真正的好處之一；
尤大大在Meteor工作的時候，仍然在持續的開發Vue.js，因為尤大大覺得它在那時就像自己的孩子一樣，我們可以看到上面尤大大的提交記錄，在Github上看到一個非常綠的圖表，因為尤大大在每個周末都會完成很多提交，當時進行更多的工作也越來越有必要了，因為Vue的用戶越來越多了，據尤大大表述Vue一直在成長所以會出現更多的問題，更多的Bug要被修復。
就在那段時間，Taylor發了一條推特提到了Vue.js，那是2014年，Taylor Otwell 是Laravel的作者，Laravel是一個非常流行的PHP框架，大家都知道在2014年那段時間PHP火的一塌糊涂。
Taylor那天在推特上說：“目前自己在學習React，但是狀態很迷惑，React很難，我正在學習Vue.js，因為它看起來很簡單”，雖然看起來這不像是一個正式的對Vue的認可，他只是在說我正在學習Vue.js"，然后很多人開始問他：你覺得Vue怎么樣，它好用嗎？基本上在每一條回復中，他都說，沒錯，它很棒，這開始看起來像是一個對Vue公開的認可，然后所有的Laravel用戶就會想，哇，如果Taylor喜歡Vue，那它肯定很好呀，所以我們也應該試一試，所以Vue就獲得了很多來之Laravel社區的用戶"
Taylor表述：“我當時在網上查找一個JavaScript框架來開發這個叫Laravel Spark的產品，它是一個快速開發腳手架，幫助你開發你自己的軟件和服務體系，幫助人們啟動他們自己的生意，就像我一樣，我感覺到不知所措，我看了其他的框架，他們有復雜的編譯流程，需要很多工具才能起步，我嘗試了Vue.js發現你可以用Windows筆記本就能寫出一個簡單的網頁應用你不需要其他的編譯工具，僅僅需要添加一個CDN鏈接，寫幾句JavaScript，你的網頁就跑起來了，對于我這個不是很熟悉JavaScript的人，至少可以說這么簡單就可以實現那么多功能，真的讓人耳目一新而且還不需要學習很多其他的工具，我記得我發布了一條推特說《我發現了這個很棒的新玩意叫Vue.js，像我一樣的新手，都可以寫出JavaScript應用程序，真的很令人驚嘆》因此我們為Laravel Spark采用了Vue.js，最后產生了，你知道的，為Laravel帶來了超過一百萬美金收入，成千上萬個用戶搭建了他們自己的生意，所以這真是一件對Vue.js和Laravel都很棒的事情，幫助簡化了不知道多少，使用Spark搭建的業務，都同時運用了Laravel和Vue.js”
上面說到的這些都發生在尤大大決定全職開發Vue.js之前，在那之前Vue.js還處于只是在前端社區中比較有名的階段，尤大大還沒想過要將它作為自己的全職工作，甚至是從中賺錢，直到尤大大學習到Taylor的做法之后，才知道Laravel是那么龐大，意識到或許自己真的能干點東西出來，但開始有人發起帖子和討論說：“我到底該用哪個？我應該用Vue.js嗎？”，你能看到的很多的回復都是：“不要用，因為它還是起步階段”、“它不穩定，它僅僅由一個人維護著，天知道它什么時候就消失了”，尤大大想證明這些人是錯誤的，要讓Vue.js變成一個V1.0版本的可生產的框架，所以尤大大花費了整個2015年的假期，用3個星期的時間把所有東西都開發好，更新文檔，然后在2015年10月，尤大大發布了1.0版本；
當時Vue.js剛剛發布了1.0版本，還不存在像今天這樣的核心團隊，只有大概三個人，他們都忙著弄好文檔和修復Bug，在1.0發布之后，當時的論壇就像是一個荒地；LinusBorg 就到論壇里去回答很多的問題，在論壇里非常的活躍，LinusBorg 了解到很多。
LinusBorg自述：“ 人們在他們項目中遇到的問題，我都在我空閑時間里干這件事，持續了三到四個月之后，Evan了解到了這個情況，他就給我發了一個Slack邀請，之前我們從未交流過，我也沒開啟任何問題討論，沒提出合并請求，我沒在代碼上做出任何貢獻，但我從一開始就注意到Vue.js框架不僅是正確的編碼，不僅是一個庫，還需要一個描述它工作原理的文檔，幫助你解決問題，它應該是我們需要的能想到的最好的文檔，我們必須要扎身到社區中去，我們需要額外的工具和支持，這就是我被邀請到Vue團隊的原因，因為我慢慢成長為社區領袖，我也確實加入到了Vue的核心團隊，即便在沒有對代碼和內容作出貢獻的情況下，不過之后我為了我所謂的自尊心，我學習了源碼，研究了一些代碼庫，看了一些問題，然后開始四處作出一些貢獻”。
尤大大自述：“我認為在1.0版本之后，我開始嘗試著進行全職工作，或者這個東西還真能給我一些收入，讓我能夠把它當作一個全職工作，這時我開始覺得我在Meteor和我在Vue.js上的工作存在一些差異，在Meteor我只是一個普通的開發者，我沒有做決策的權利，雖然我可以提出建議但我還遠沒到那種，說我們應該怎么做的那種地位，這讓我對Meteor的發展有一些悲觀，相比之下，Vue.js一直在快速成長。我注意到用Meteor的人比較少，而用Vue.js的人越來越多，所以那時我就覺得或許把Vue.js作為我的全職工作是值得的”
LevelUp教程的Scott Tolinski在Vue火了后，人們一直要求他做一個Vue.js的教程，在這個系列的教程中，會為大家講到所有關于Vue.js的知識。
Scott Tolinski表示：“Vue.js出現的正是時候，因為很多人從Angular一代出現或更早之前就開始用Angular，人們都覺得Angular一代很簡單，但當Angular二代推出的時候它幾乎是一個完全不同的版本了，那個時候React也正在被推出，所以很多開發者開始用React，他們覺得React是個能夠登上前端寶座的新東西，但這些開發者就會失去使用Angular一代的那種簡單，輕松的感覺，就會感覺到有一種差距，這個由Angular一代的缺失而導致的大洞，Vue.js正好在這個時候出現了，它填補了一個空白，因為人們想要更低的入門門檻，還想要React的這種強大和靈活性，而這就是Vue.js的強項了，它吸取了多個框架和平臺最強的部分”。
尤大大自從有了全職開發Vue.js的想法，就在探索能讓自己經濟上獨立的辦法，尤大大做的第一件事就是設立一個Patreon（眾籌平臺）賬號，結果發現還真的不錯，在建立那個賬號不久之后，就能拿到2000美元一個月，尤大大的一位朋友郭達峰，他是“上線了（Strikingly）”的CTO，一個YC投資的公司，他的公司有個小基金用來支持開源項目，純粹是出于做好事的想法，如果能拿到這個支持的話，尤大大就完全可以辭掉工作，并開始全職開發Vue.js了，這就足以讓尤大大邁出這一步，至少可以去嘗試一下。
Serah Drasner在CSS-tricks工作，是一個寫手，Serah Drasner問Chris Coyier：“我覺的我要寫一篇關于Vue.js的文章”，他說聽起來不錯，所以Serah Drasner開始寫關于Vue.js的一篇文章，感覺要寫挺長的，Serah Drasner問Chris Coyier：“什么情況下一篇文章需要分為一個系列來寫”他說，什么時候你覺的你需要寫一個目錄的時候，那個時候Serah Drasner就該分開寫了，Serah Drasner自述：這個時候我寫的谷歌文檔就已經有25頁長了，然后我寫完了最好一章，動畫，最后就有了一個共有五篇文章的一個系列，我接著不斷的寫關于Vue.js的東西，下個月我寫了更多的文章，然后做了一些Demo和一些開源項目，我覺得從那個時候開始，我就對這個框架感到非常激動，我想要投資更多的時間到其中去，所以Evan和Chris Fritz就邀請我和他們一起制作文檔，同時進行一個新的項目叫cookbook，然后我就開始領導cookbook項目并且加入了Vue.js核心團隊，現在我幫助運營Vue文檔的見面會，Vue團隊的見面會我真的很喜歡和這個團隊一起工作。
“在家里工作絕對是非常自由的，你可以自己定制時間表，除去不需要通勤的第二大好處可能就是你不需要穿的像Tom Dale一樣?！?
尤大大：“想象一個在中國的人想要學習一個新的框架，他們去官網發現只有英文的文檔，如果這個框架本身就非常難懂的話就更糟了，他們就會很難學會這個框架，但當他們到Vue.js官網的時候發現這里有中文版的文檔，他們讀了一下發現文檔是由母語是漢語的人寫的，一些技術性的內容直接用漢語表達的話會有些奇怪，因為你必須對技術名詞想出一些很好的譯名，比如說綁定（binding），引用（reference）或視圖模型（view model），有些東西你甚至都翻譯不了，因為漢語是我的母語然后英語版本的文檔也是我自己寫的，所以我能夠改寫一些術語，讓它的漢語翻譯更自然，這種語言上的熟悉讓他們能夠讀懂你的框架，比他們用自己不熟悉的第二語言來學習要快的多，制作這樣的中文文檔，絕對幫助提高了Vue.js在中國的使用度”；
Jinjiang Zhao：“在中國，很少有人在科技界很知名，所以在中國，人們把Evan看作是一個英雄，一個中國開發者開發的人人都喜歡的框架”；
Gu Yiliang：“這在中國真的很不尋常，我們看不到有人能在開源項目上對世界作出這么大的影響，不僅僅是在中國內部，Evan，他是世界頂尖的，而且他還是中國人，所以我覺得這就是他有這么多中國粉絲的原因”；
Taylor：“他是一個中國人，當中國人看到這一點的時候，他們覺得自己是這其中的一部分，覺得自己是Vue社區的一部分，這是一種很真實的感覺因為他們與Vue的創始人是聯系在一起的，Evan為中國社區的作為創造了一種強大的現象，它在中國的開發者之間建立了一種強大的聯系，每個人都希望成為這個群體的一員，它讓你感覺很棒，當你是這個群體中的一員時，Evan能融入這個群體，這種力量是非常強大的，這是他能在中國成功的巨大原因，它能夠融入到這個群體中真的很驚人”；
Jinjiang Zhao：“那個時候移動網絡非常的復雜并且不穩定，尤其是在中國，很多人還在用GPRS數據，所以我們嘗試搭建一些新的，小體積高性能框架，幫助我們開發成千上萬個網頁，來支持千萬級別的流量，這個量是非常非常大的，我在Github發現了Vue，所以我們的故事就開始了”；
尤大大被到阿里巴巴園區，做一個小的科技講座，介紹Vue背后的基本想法、是怎么開始做它的、用Vue的好處到底是什么、相比一些手寫的jQuery。
他們花費了很長時間，一年或一年半，一些開發者終于接受了Vue，并開始使用它，現在越來越多的人都在用Vue，在那之后，阿里巴巴也越來越多的用Vue了，人們也開始對Vue.js有更多的了解，因為尤大大在知乎上的存在，同時也因為Vue.js在中國以外也獲得了更多的關注，這些消息也反向流回中國，人們才發現有一個新的框架叫Vue.js，事實上很多人都是以一個開源項目的身份認識到Vue.js，然后他們才意識到原來這是一個中國人寫出來的，Gu Yiliang采訪中提到：“我們主要是在我們的企業管理應用上使用Vue.js，像是谷歌的AdWords，我想為什么不參與到Vue.js其中呢？它在發展，它是潮流，中國開發者不僅僅把他當作一個開源項目開發者，而是一個開源項目領導者?！?
Leo Deng：“我很熟悉Ember.js，而Vue.js看起來和它很像，所以我開始用Vue.js寫一些東西，確實起作用了，我感覺它像是我已經學過的東西，Vue.js有非常高質量的中文文檔，幫助了很多入門級的工程師進行開發，我們用它來開發生態系統，社區，我覺得這就是它這么流行的原因，在中國我們有很多的軟件工程師，但是我們沒有一個像他那樣的巨星?！?
Serah Drasner：“在軟件工程領域，不光是Vue.js，在所有軟件開發領域，我們都有一個概念叫做“終身仁慈獨裁者，描述有些人是項目行動策劃的關鍵大腦，來推動項目的前進，它并不意味著，有些人把它搞混了，認為這意味著沒有其他人為這個項目而工作，這完全是錯誤的，你可以看到有非常多的人在為Vue.js和Vue核心而共同工作，它確實意味著它背后有一種推進力量，我覺得當存在一個像Vue.js這樣不是產自大公司的項目，是有好處的因為它的內容是非常真實的，我們得到的好處就是，我們不是被某一個公司推動的"，這意味著不是大公司在指定規則，是人們?！?
Taylor：“Evan有一個總體的巨大的圖景，Angular和React是由大公司搭建起來的，從一開始就有很多人參與其中，它們像是被一個委員會設計的，但對與Vue.js和Evan來說，在他大腦中有一個單一的圖景，他希望創造這個整體的框架，我覺得這對于創造一個非常好的產品是非常重要的，這也是Vue.js如此成功的原因?！?
LinusBorg：“前端市場被臉書的React統治，Angular是谷歌的，然后就是我們，像是一堆書呆子做他們自己的框架，完全是因為他們想做?！?
Scott Tolinski：“它給人的感覺不像是一個公司，這樣的話會讓人更激動，更多像是民間的，光是這種想法就足以讓人們感到興奮，讓人們想去使用它?！?
LinusBorg：“Vue.js仍然在成長，它不是在推翻前端領域成為統治者，這不是它的目標，我們只是很高興能為這個項目而工作，我們很高興看到它的成長，也對它未來的發展感到很激動，我也不是很確定?！?
尤大大：“我很自豪當初邁出了那一步，離開了早9晚5的工作，并開始投身于我真正熱愛的事業上去，有時候我會看著那些星星，我們有了那么多用戶，那么多的下載，但是什么給了我最大的成就感和滿足感呢，是每次我看到這些人們"，尤其是在結束一場集會之后，人們會走過通常握著我的手說謝謝你，Evan，謝謝你讓我的生活變得更輕松，就是這些場景讓我覺得，這就是我開發Vue.js的原因，我創造了這個東西，我把他分享給人們，希望它能讓人們的生活變得更輕松，人們向我走過來，感謝我做出了這個東西，這也算完成這個循環了"
如今Vue框架火爆IT行業，已成為前端工程師的必備技能，其實也是博主我現在飯碗依靠的技術，Vue現在的Star數近20w，使用者更是數不勝數，正如尤大大表示自己很自豪的邁出那一步，其實作為受益者的我們更是感恩尤大大當時所做的決定；在CSDN的《新程序員004》中也曾攥入“與Vue.js作者尤雨溪暢談他的程序人生”的篇幅，有興趣的朋友可以閱讀一下尤雨溪Vue登榜GitHub之路看似不難，加油每一位前端人。博主作為尤大大的忠實粉絲且作為Vue技術的熱愛者并在CSDN構建了Vue技能樹，歡迎大家打卡學習哦 https://edu.csdn.net/skill/vue
uni-app 是一個使用 Vue.js (opens new window)開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。DCloud公司擁有900萬開發者、數百萬應用、12億手機端月活用戶、數千款uni-app插件、70+微信/qq群。阿里小程序工具官方內置uni-app（詳見 (opens new window)），騰訊課堂官方為uni-app錄制培訓課程（詳見 (opens new window)），開發者可以放心選擇。uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序開發框架（詳見 (opens new window)）、更好的App跨平臺框架、更方便的H5開發框架。不管領導安排什么樣的項目，你都可以快速交付，不需要轉換開發思維、不需要更改開發習慣。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
一、前言介紹：
隨著現在網絡的快速發展，網上管理系統也逐漸快速發展起來，網上管理模式很快融入到了許多商家的之中，隨之就產生了“網上圖書購物系統”，這樣就讓網上圖書購物系統更加方便簡單。
對于本網上圖書購物系統的設計來說，系統開發主要是采用java語言技術，在整個系統的設計中應用MySQL數據庫來完成數據存儲，具體根據網上圖書購物系統的現狀來進行開發的，具體根據現實的需求來實現網上圖書購物系統網絡化的管理，各類信息有序地進行存儲，進入網上圖書購物系統頁面之后，方可開始操作主控界面，主要功能包括管理員：首頁、個人中心、圖書分類管理、回收類別管理、新書榜管理、特價區管理、舊書回收管理、用戶管理、訂單評價管理、回收預約管理、圖書回收管理、管理員管理、系統管理、訂單管理。前臺使用：首頁、新書榜、特價區、舊書回收、公告資訊、個人中心、后臺管理、購物車、客服。用戶：首頁、個人中心、訂單評價管理、回收預約管理、圖書回收管理、我的收藏管理、訂單管理等功能。
本系統主要講述了網上圖書購物系統開發背景，該系統它主要是對需求分析和功能需求做了介紹，并且對系統做了詳細的測試和總結。具體從業務流程、數據庫設計和系統結構等多方面的問題。望能利用先進的計算機技術和網絡技術來改變目前的網上圖書購物系統狀況，提高管理效率。
二、系統分析：
可行性分析主要是針對這個項目開發是否有意義和價值觀來進行的全面分析，在分析的過程當中發現這個系統所存在的不足之處。就拿這次網上圖書購物系統的設計與實現來說主要是針對一些用戶在發布網上圖書購物系統信息時遇到不方便的操作和問題來進行解決問題的，最后能夠讓網上圖書購物系統開發得到最大的用處。而且對于用戶方面我們可以提供給一個簡單方便操作的網上圖書購物系統。所以我們要計算開發這個系統它能否有效的解決好這個系統經濟問題，在開發完成以后所帶來的利益是否大于開發過成當中的成本。所以可行性的研究與分析是這個系統在開發和設計上是必不可缺少的一部分。從該系統文章的全部來看，我們要從以下幾個方面進行分析：
技術可行性：在技術方面我們要從現有自己掌握的技術能否設計出我們當初所預定的目標。
經濟可行性：在這次系統開發和設計過程當中所用的經費是否大于以后給社會帶來的價值觀。
操作可行性：系統在用戶使用過程當中是否方便、簡單，能否達到大部分的用戶會使用。
技術的可行性分析主要是針對開發該系統所用到技術進行分析，對于網上圖書購物系統的設計，可以在任何一個地方都進行使用和管理。通過當前我們所學的程序開發和語言介紹利用以上的技術開發該系統是比較合適的。而且我們在使用的數據庫也是要保證這個系統的完整性、數據安全性好的條件。
經濟可行性主要是決定這個系統是否具有價值存在，是否具有開發意義，如果開發的項目不能夠節約物品和資源，反而使用的大量的人力、財力和物力不成正比甚至小于投資成本，那么該項目是不具備開發意義和價值的。在開發本項目的初期，節約成本是最基本的，設計和開發都是由本人一人完成的，并且在開發中使我學習到了很多的知識，也開拓了自己的眼界，在通過可行性分析之后，該項目的利大于弊，所以該項目是具有開發意義和價值的。
網上圖書購物系統的開發登錄界面它是我們最常見的一種登錄窗口來完成的，用戶可以使電腦來進行登錄并簡單的訪問不需要做任何的操作。對于此次的系統開發它主要是基于B/S結構和java技術及MySQL數據庫來完成，讓系統開發更加完美和完善，所以我們開出的系統界面更加人性化，用戶使用也更加方便。而且系統在使用過程當中也擁有方便操作、易管理等特點。
經過以上的敘述，所以開發此系統在經濟上、技術上是滿足開發條件的。
1.如果我們想要對前后臺處理的層次分明那么我們就要采用B/S模式來進行系統的開發這樣就可以方便用戶的使用。
2.對于系統的開發和設計我們就要采用大家日常所需要的要求，這樣一來可以提高系統的適用性也能保證系統利用價值。對于一個系統來說一個好的框架是很重要的，因為一個好的框架它可以提高系統的穩定和高效性。
3.在系統界面上也要設計一個方便快捷的登錄界面，這樣就可以提高用戶對系統操作性和適用性。
4.在系統模塊設計當中我們要對系統各個模塊進行合理簡化和設計，這樣就能提高系統使用性。
5.對于一個完整的系統來說對于它的測評和測試是比較重要的，所以我們在軟件設計程序中要保持軟件占用的時間和速度快的特點。
6.對于這個系統來說我們首先要考慮所設計出的系統它具有那些突破和體現，所以我們盡力去改進這個系統去適應用戶。
對于一個新的網站來說開發新網站我們就要做出這個系統的任務需求分析，因為對系統分析的質量好壞它可以決定這個網站開發的意義，俗話說得好一個好的開頭是成功的一半，對于開發這個網上圖書購物系統來說前期的分析是比較重要的，所以任務分析它可以決定這系統的開展和設計，這樣就可以保證用戶滿意性。
任務的需求它能決定這個系統開發過程當中一個重要環節，所以我們在系統開發過程所用質量是比較重要的，因為我們在系統應用過程當中不一定那會出現問題，所以我們在進行對系統分析是比較重要的，因為它可以決定這個系統功能和需求。
本課題要求實現一套網上圖書購物系統的開發與實現，主要實現功能包括管理員：首頁、個人中心、圖書分類管理、回收類別管理、新書榜管理、特價區管理、舊書回收管理、用戶管理、訂單評價管理、回收預約管理、圖書回收管理、管理員管理、系統管理、訂單管理，
前臺使用：首頁、新書榜、特價區、舊書回收、公告資訊、個人中心、后臺管理、購物車、客服，
用戶：首頁、個人中心、訂單評價管理、回收預約管理、圖書回收管理、我的收藏管理、訂單管理 網上圖書購物系統。
2.3.3用戶登錄注冊時序圖
前端用戶發送登錄請求-驗證輸入的賬號虛線-執行數據查詢-返回查詢結果-判斷用戶是否存在-前端根據結果集執行不同的操作。
通過系統需求分析，本網上圖書購物系統主要實現功能包括；管理員：首頁、個人中心、圖書分類管理、回收類別管理、新書榜管理、特價區管理、舊書回收管理、用戶管理、訂單評價管理、回收預約管理、圖書回收管理、管理員管理、系統管理、訂單管理。用戶：首頁、個人中心、訂單評價管理、回收預約管理、圖書回收管理、我的收藏管理、訂單管理等功能。其功能結構圖如下圖所示。
在該系統的信息中，由于數據庫的支持，我們可以對數據庫進行收集、整理、更新和加工等操作。由于數據庫的存儲功能強大，所以數據庫已經成為了計算機必不可少的，一個數據庫的好壞直接影響該系統的質量和效率。一個系統中的數據庫是必不可少的，并且起著決定性因素。通過之前的系統分析，可以規劃出本系統中使用的主要等，下面設計出這幾個關鍵實體的實體關系圖。
訂單管理實體E-R圖如圖4-2所示
三、功能截圖：
通過填寫用戶名、密碼、角色等信息，輸入完成后選擇登錄即可進入網上圖書購物系統。
網上圖書購物系統，在系統首頁可以查看首頁、新書榜、特價區、舊書回收、公告資訊、個人中心、后臺管理、購物車、客服等內容。
新書榜，在新書榜頁面可以填寫圖書名稱、分類、標簽、圖片、作者、出版社、發行日期、價格等內容進行立即購買。
圖書頁面，可以收藏，加入購物車，查看詳情以及評論和購買等操作。
購物車詳情，可以添加數量和刪除。點擊購買進行模擬支付結賬。
選擇收貨地址后點擊支付下單：
支付成功后查看物流狀態信息：
查看回收詳情，點擊回收預約填寫相關信息，完成后管理員進行審核。
個人中心可以查看修改個人信息，查看訂單得各種狀態，以及對收貨地址進行查看修改和收藏進行查看。也可以收貨地址頁面可以填寫聯系人、手機號碼、地址、默認等內容進行添加地址
普通用戶后臺管理：
可以對客服進行留言聊天。
管理員對新書榜管理查看圖書名稱、分類、標簽、圖片、作者、出版社、發行日期、價格等信息進行詳情、刪除、修改、查看等操作。
四、代碼實現：
-
-
/**
-
* 新書榜
-
* 后端接口
-
* @author
-
* @email
-
* @date 2022-01-18 07:36:34
-
*/
-
@RestController
-
@RequestMapping("/xinshubang")
-
public class XinshubangController {
-
@Autowired
-
private XinshubangService xinshubangService;
-
-
/**
-
* 后端列表
-
*/
-
@RequestMapping("/page")
-
public R page(@RequestParam Map<String, Object> params,XinshubangEntity xinshubang, HttpServletRequest request){
-
-
EntityWrapper<XinshubangEntity> ew = new EntityWrapper<XinshubangEntity>();
-
PageUtils page = xinshubangService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xinshubang), params), params));
-
return R.ok().put("data", page);
-
}
-
-
/**
-
* 查詢
-
*/
-
@RequestMapping("/query")
-
public R query(XinshubangEntity xinshubang){
-
EntityWrapper< XinshubangEntity> ew = new EntityWrapper< XinshubangEntity>();
-
ew.allEq(MPUtil.allEQMapPre( xinshubang, "xinshubang"));
-
XinshubangView xinshubangView = xinshubangService.selectView(ew);
-
return R.ok("查詢新書榜成功").put("data", xinshubangView);
-
}
-
-
/**
-
* 后端詳情
-
*/
-
@RequestMapping("/info/{id}")
-
public R info(@PathVariable("id") Long id){
-
XinshubangEntity xinshubang = xinshubangService.selectById(id);
-
xinshubang.setClicknum(xinshubang.getClicknum()+1);
-
xinshubang.setClicktime(new Date());
-
xinshubangService.updateById(xinshubang);
-
return R.ok().put("data", xinshubang);
-
}
-
-
-
/**
-
* 前端保存
-
*/
-
@RequestMapping("/add")
-
public R add(@RequestBody XinshubangEntity xinshubang, HttpServletRequest request){
-
xinshubang.setId(new Date().getTime()+new Double(Math.floor(Math.random()*1000)).longValue());
-
//ValidatorUtils.validateEntity(xinshubang);
-
-
xinshubangService.insert(xinshubang);
-
return R.ok();
-
}
-
-
-
/**
-
* 刪除
-
*/
-
@RequestMapping("/delete")
-
public R delete(@RequestBody Long[] ids){
-
xinshubangService.deleteBatchIds(Arrays.asList(ids));
-
return R.ok();
-
}
-
-
/**
-
* 前端智能排序
-
*/
-
@IgnoreAuth
-
@RequestMapping("/autoSort")
-
public R autoSort(@RequestParam Map<String, Object> params,XinshubangEntity xinshubang, HttpServletRequest request,String pre){
-
EntityWrapper<XinshubangEntity> ew = new EntityWrapper<XinshubangEntity>();
-
Map<String, Object> newMap = new HashMap<String, Object>();
-
Map<String, Object> param = new HashMap<String, Object>();
-
Iterator<Map.Entry<String, Object>> it = param.entrySet().iterator();
-
while (it.hasNext()) {
-
Map.Entry<String, Object> entry = it.next();
-
String key = entry.getKey();
-
String newKey = entry.getKey();
-
if (pre.endsWith(".")) {
-
newMap.put(pre + newKey, entry.getValue());
-
} else if (StringUtils.isEmpty(pre)) {
-
newMap.put(newKey, entry.getValue());
-
} else {
-
newMap.put(pre + "." + newKey, entry.getValue());
-
}
-
}
-
params.put("sort", "clicknum");
-
-
params.put("order", "desc");
-
PageUtils page = xinshubangService.queryPage(params, MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, xinshubang), params), params));
-
return R.ok().put("data", page);
-
}
-
-
-
}
-
<!DOCTYPE html>
-
<html>
-
<head lang="en">
-
<meta charset="utf-8">
-
<title>新書榜</title>
-
<meta name="keywords" content="" />
-
<meta name="description" content="" />
-
<meta name="renderer" content="webkit">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-
<link rel="stylesheet" href="../../layui/css/layui.css">
-
<link rel="stylesheet" href="../../xznstatic/css/common.css"/>
-
<link rel="stylesheet" href="../../xznstatic/css/style.css"/>
-
<script type="text/javascript" src="../../xznstatic/js/jquery-1.11.3.min.js"></script>
-
<script type="text/javascript" src="../../xznstatic/js/jquery.SuperSlide.2.1.1.js"></script>
-
</head> </div>
-
<div class="pager" id="pager" :style="{textAlign:1==1?'left':1==2?'center':'right'}"></div>
-
</div>
-
</div
-
</div>
-
<script src="../../layui/layui.js"></script>
-
<script src="../../js/vue.js"></script>
-
<script src="../../js/config.js"></script>
-
<script src="../../modules/config.js"></script>
-
<script src="../../js/utils.js"></script>
-
<script>
-
// 獲取輪播圖 數據
-
http.request('config/list', 'get', {
-
page: 1,
-
limit: 5
-
}, function(res) {
-
if (res.data.list.length > 0) {
-
let swiperList = [];
-
res.data.list.forEach(element => {
-
if (element.value != null) {
-
swiperList.push({
-
img: element.value
-
});
-
}
-
});
-
vue.swiperList = swiperList;
-
-
vue.$nextTick(() => {
-
carousel.render({
-
elem: '#test1',
-
width: '100%',
-
height: '430px',
-
arrow: 'hover',
-
anim: 'default',
-
autoplay: 'true',
-
interval: '3000',
-
indicator: 'inside'
-
});
-
});
-
-
//類型查詢
-
categoryList();
-
//類型搜索
-
$(document).on("click", ".category-search", function(e){
-
vue.swiperIndex = $(this).attr('index')
-
pageList(e.target.innerText);
-
});
-
// 獲取列表數據
-
http.request('xinshubang/list', 'get', param, function(res) {
-
vue.dataList = res.data.list
-
// 分頁
-
laypage.render({
-
elem: 'pager',
-
count: res.data.total,
-
limit: limit,
-
groups: 3,
-
layout: ["prev","page","next"],
-
theme: '#065279',
-
jump: function(obj, first) {
-
param.page = obj.curr;
-
//首次不執行
-
if (!first) {
-
http.request('xinshubang/list', 'get', param, function(res) {
-
vue.dataList = res.data.list
-
})
-
}
-
});
-
window.xznSlide = function() {
-
jQuery(".banner").slide({mainCell:".bd ul",autoPlay:true,interTime:5000});
-
jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_piclist ul",effect:"leftLoop", delayTime:200, autoPlay:true,triggerTime:0});
-
jQuery("#ifocus").slide({ titCell:"#ifocus_btn li", mainCell:"#ifocus_tx ul",delayTime:0, autoPlay:true});
-
jQuery(".product_list").slide({mainCell:".bd ul",autoPage:true,effect:"leftLoop",autoPlay:true,vis:5,trigger:"click",interTime:4000});
-
};
-
</script>
-
</body>
-
</html>
五、文檔目錄：
六、項目總結：
對于本次的系統開發來看，它主要是把我以前所學的知識進行了一次綜合的應用。經過這次畢業設計的制作它主要是把我以前所學的理論知識應用到社會實踐當中。通過這一次的網上圖書購物系統的設計與實現它能夠有效把計算機知識與實際問題相互應用，通過計算機網絡技術來解決用戶生活當中的實際問題，從而提高我的編程能力。雖然在這次畢業設計當中我遇到了很多的問題和困難，但是通過不斷的調試和老師的幫助讓我圓滿的完成了這次畢業設計。通過這次畢業設計的制作讓我對計算機實際應用得到了很強的鍛煉，同時也大大的提高了我的動手動腦能力，讓我也感受到了其中的樂趣和喜悅。
通過這次項目設計的撰寫把我在大學期間所學到的東西都應用上了，但是我覺得還是微不足道的，因為在這次畢業設計當中讓我深深的了解到對于軟件開發和學習理論知識它是兩個完全不同的概念。但是通過這次軟件的開發讓我在以后的工作當中打下了良好的基礎。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn