“民無信則不立，業無信則不興?！薄梢姡湃瘟τ谝粋€國家或是企業來講是非常重要的基礎。

據權威機構數據顯示，2021 年第七次全國人口普查后，在我國 14.1 億人口當中，租房人群已經超過 2 億，租房已經成為一二線城市年輕人生活的新常態。整個租房市場在疫情過后也逐漸回暖，各大租賃平臺競爭日趨激烈，爭相拿出各種補貼政策吸引租戶，前有自如針對畢業大學生按月付、0 押金的“海燕計劃”，后有泊寓推出的 98 折入住、免費換房的“港灣活動”。在互聯網技術日趨成熟、人口紅利逐漸消失的當下而言，平臺的服務能力趨于同質化，需要比拼的是誰有更深的內功基底：那就是打造出差異化的競爭核心。差異化的競爭核心對于房產、金融行業來講，就是企業（平臺）的信任體系建設，從滿足用戶基礎的功能訴求——建立起用戶與平臺信任的關系——最后讓用戶對平臺（產品）產生信仰與依賴，和Apple、Airbnb這樣的公司一樣，最終實現品牌的溢價價值，這也是馬斯洛需求層次理論——滿足用戶從基礎的生理需求到自我價值的實現。

圖 1 馬斯洛人的需求層級與產品價值層級映射

此外，我們在 19 年貝殼租賃滿意度報告中發現，用戶在對租房信息渠道的選擇上更關注真房源和平臺的可信度等方面。因此，我們希望打造一個簡單、安全、可信賴的線上租賃環境，幫更多用戶解決租房問題，建立起租客、房東與平臺的信任鏈接，從而構建起整個平臺的信任價值體系。

圖 2 用戶原聲

產品中傳遞給用戶的信任是什么

我們先看一下信任的定義是什么？

在社會科學或心理學中來講，信任被認為是一種依賴關系，是一種穩定的信念，指的是個體對周圍的人、事、物感到安全、可靠、值得信賴的情感體驗，在個體感到某人、某事或某物具有一貫性、可預期性和可靠性時產生，值得信任的個人或團體意味著他們尋求實踐政策，道德守則，法律和其先前的承諾?！鲎浴栋俣劝倏啤?

對于產品給用戶的信任感來講，可以拿戀愛的過程舉例更為形象：

初識——信任——戀愛——信賴——結婚

圖 3 戀愛的過程：信任感的建立

用戶最初接觸產品時，雖然有清晰的目的訴求（找個靠譜的伴侶共度一生），但是因為認知不夠，并不能了解產品能幫自己解決怎樣的問題，帶來怎樣的價值，這個時候需要產品通過各種方式來建立與用戶的情感鏈接，也就是建立信任感（戀愛）的過程，只有解決了用戶核心的訴求并不斷給用戶提供預期外的驚喜，用戶才會慢慢認識到產品的價值，變的越來越離不開了，這個時候就自然而然的進行下一個環節轉化(結婚）了。

所以說從產品層面去塑造信任感就是：理性（解決用戶最基本的核心功能訴求）+感性（提供用戶超預期的服務）這樣的過程，需要注意的重點還是解決用戶核心訴求為準，讓產品變得能用并好用，否則一切都是空談。

刨析問題&信任歸因

通過前期的電話訪談和問卷調研，我們發現貝殼租賃用戶對平臺信任感較弱，存在懷疑平臺房源真實性、經紀人服務質量、平臺隱私安全保障等問題，于是我們首先定義了用戶對與社會、對行業、對平臺的信任度初始閾值，用研同學依此為基準進行問卷投放，利用結構方程模型對結果進行驗真及提煉，最終總結出包括平臺背書（例如強化貝殼真房源保障）、隱私保護（用戶個人信息不會被泄露）等 12 個方面的信任關鍵因子。

我們由此梳理出了 10 多個觸點作為搭建租賃業務信任體系的主脈絡，希望通過穩固認知、建立保障、提升質量、構建共情能力等方面入手進行系統改造。

圖 4 信任初始閾值及關鍵因子沉淀

如何搭建產品的信任感

通過前期對關鍵因子的梳理，我們總結出了匹配業務訴求、建設心理預期、強化品牌背書、建立服務保障、營造情感氛圍、精琢設計細節等 6 要素作為產品設計中搭建信任體系的指導準則，下面我會以租賃首頁、心愿單改版等案例逐一拆分來講。

圖 5 分層拆解信任 6 要素

1. 匹配業務訴求

我們通過數據發現，有近 30%的用戶是通過首頁搜索來找房的，但是根據滿意度報告結果來看，好多用戶提出了搜索維度少、關鍵信息不明顯等問題，同時在搜索過程中，我們也看到了用戶對地圖找房、區域搜索功能有更高的期待。

圖 6 用戶基礎訴求

同時我們對舊版本的心愿單進行了數據分析和調研發現，有主動表達找房訴求且成交的用戶僅占總成交人數的 6%左右，心愿單并沒有很好的匹配用戶的找房訴求，原因在哪？我們梳理了 3 個問題所在：1 是舊版本的心愿單簡單的把用戶之前帶看、咨詢、關注過的房源一股腦塞在了一起，變成了房源列表的收藏夾，弱化了心愿 2 個字，對用戶幫助作用不大，而用戶對于找好房、找對房的主動表達訴求并沒有得到滿足；2 是聯系經紀人的商機入口隨處可見，用戶在操作時容易誤觸與經紀人的對話窗口，引起心理反感；3 是用戶添加了自己感興趣的房源到心愿單后，產品沒有提供用戶后續的服務支持，導致用戶慢慢流失掉；

結合上述問題，我們重新定義了首頁和心愿單的業務核心，也就是提供給用戶找房過程中主動表達自己訴求的窗口。在新版首頁搜索中，我們新增了預算入口，并強化了搜索時的區域、地鐵等關鍵信息幫助用戶更好的進行決策；

同時在心愿單中，我們讓用戶可以快速的創建自己的專屬找房卡，根據用戶日常瀏覽、關注等行為向用戶推薦相似房源，滿足其不同維度的找房訴求，另外我們弱化了商機展位，避免不必要的打擾，讓用戶在安靜的場景中持續感受到心愿單帶來的服務幫助。

圖 7 新舊搜索功能對比

圖 8 新舊心愿單功能對比

2. 建設心理預期

大多數人都會遇到這種情況，當決定做一件事時就會產生很高的心理預期，且隨著時間越長，預期會加倍的增長，當結果出現后，一旦和自己的想象出入很大時，就會產生很大的挫敗感，甚至會選擇直接放棄；

由此可見，在做產品設計時，幫用戶建設好心理預期是很重要的；在新版心愿單設計中，就很好的利用了這一點，當用戶在首次進入時，通過宣傳導語能一目了然的感受到我們的服務宗旨， 我們強調一起幫用戶規劃心愿而不是簡單、機械的創建一個表單，整個產品的背后有大數據和平臺的服務支撐，它不僅僅承載的是用戶的找房功能，還能幫助用戶具體描摹出對租房偏好、體驗的直觀感受，讓用戶對心愿單的認知更加清晰明了；另外在用戶點擊關注房源后，我們也會通過提示的方式提前告知其下一步動作，避免用戶搞不清從哪里能看到自己選擇的房子。

圖 9 強調服務主旨，建設用戶心理預期

3. 強化品牌背書&建立服務保障

針對之前滿意度報告我們發現，多數用戶在租房、買房等進行大宗消費時往往都缺乏安全感，因為擔心遇到假房源或者是租金過高的情況，所以在設計產品細節時，我們格外重視品牌和服務保障的宣導，例如在心愿單詳情頁里我們把客觀的瀏覽數據和價格浮動變化進行外露展示，目的就是增加用戶對產品的真實認知，進而獲得安全感；在具體的房源詳情頁里，我們也在宣導貝殼平臺真房源、貴必賠的服務保障，打通產品與用戶之間的信任隔閡。

針對其他品牌長租公寓頻頻爆雷的情況，貝殼第一時間上線了公寓租房安心保障計劃，我們將權益細則根據用戶線上看房、下訂、簽約、支付等流程拆分為遇假房必賠付、未留房必賠付、有違約必賠付、有損失必賠付 4 大權益點進行強化宣導，并將常見案例以問答形式濃縮成風險提示進行外展，加強用戶的安全防范意識。

圖 10 透傳保障權益，強化用戶安全感知

4. 營造情感氛圍

人類的行動和感知經常會受到情感所支配。因此調動用戶積極情緒，打造情感上的認同和共鳴，是產品建立信任體系的重要環節。心愿單所描繪的宗旨就是用心服務幫你找到理想的家，通過描繪家的理念，我們希望帶給用戶也是溫暖、貼心的感受，所以我們從設計層面上對整體的文案進行了精細打磨，讓統一的情感化語言貫穿全流程，例如在找房卡上，我們沒有采用常規的疑問句形式，而是選用設問句的形式來調動用戶情緒，營造溫情氛圍，例如“你的租房預算是多少？預算多少都是自己溫暖的港灣；”“你想在哪里租房？風景優美、交通便利你都可擁有”通過這些精心設計的文案，我們希望給予用戶“我即將要做的事情是與往常不同的，是有意義的”心理暗示，也有心愿單“許愿”過程的儀式感。

5. 精琢設計細節

當人們下班后回到家中后，有些人會選擇從冰箱里隨便翻出點食物湊合著做為晚餐；而有些人則會從超市精心采購食材并根據菜譜烹飪，菜肴出鍋后，還會仔細擺盤，并拍個美照上傳朋友圈；快餐雖然解餓，卻難以滿足用戶更深層次的情感體驗；產品設計也是如此，因為更專業，所以更信賴，專業的產品能帶給用戶更多的信任感和安全感，而精致的 UI 界面就是產品嚴謹、專業度的直接表達。我們可以看到舊版的租賃首頁、心愿單在視覺情感化表達較弱，難以讓用戶產生好感和信任的鏈接，在新版設計的過程中，我們圍繞著“理想的家”的主題進行了精致的場景插畫繪制，并利用文字排版合理拉大了空間，讓原本擁擠的信息內容呼吸感更強；整體色彩延用了租賃頻道的主色調-暖黃色，也是跟主題“家的溫暖”保持契合，帶給用戶一致的視覺感受。

圖 11 精致的視覺表達滿足用戶更深層次的情感體驗

小結

圖 12 信任心智模型

信任心智是可以通過改變關鍵因子進行優化和重塑的，同時人的信任度也是分層級的，分別由自我信任-關系的信任-組織的信任-市場的信任-社會的信任組成，所以產品的信任感營造需要從多方面維度去打造的。我們先要通過數據分析、定性訪談等手段，定義出用戶對于社會、行業、平臺本身的信任邊界在哪，“例如用戶對貝殼平臺提供的服務保障了解多少，真房源的感知程度又是多少”，并基于此梳理出服務專業、信息透明、內容全面、服務專業等關鍵因素作為搭建信任體系的主脈絡。最終的實現主要分為三個層面：本能層上通過精致的插畫設計、人情味的文案話術、明晰的交互引導來凸顯服務場景的儀式感和品質感；行為層上打造公正的信譽評價、完善的客服系統、安全的支付體系、完整的房客信息滿足用戶的訴求；反思層上宣導（真房源、貴必賠）的平臺服務承諾夯實用戶的信任基礎；達成由基礎訴求滿足（用戶能用）——能提供用戶超預期的服務（用戶易用）——再到與用戶彼此建立起良好的信任體系（用戶愛用）——最終打造一個有品牌信仰的服務平臺。

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

文章來源：優設  作者：貝殼KEDC

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

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

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

前言：

入行做車載 HMI 已有 2 年余久，也該沉淀輸出一些行業內容，HMI 行業還是一片藍海，很多設計師都不敢輕易的進入這個新型的行業，覺得有難度、門檻、視覺要求高、這篇文章先帶你入行，文章還是以一些 HMI 基礎知識作為講解，在設計規范方面的內容，我會添加很多干貨結合實際案例講解。

先給大家打一個預防針（規范是用來打破的，本篇文章只做為參考價值）

1. 設計規范包含什么內容

設計規范包含視覺規范和交互規范，本章節先說一下視覺規范，車載交互內容會安排在后續寫作中…

2. 視覺規范：

車載端設計和移動端、web 端設計顯示差別還是蠻大的，最主要的差異就在于布局的不同，接下來我們從文字、顏色、布局、圓角、圖標等角度講解，PS：偶爾還會穿插一些工作心得的內容。

文字規范：

文字是 UI 界面設計中重要的組成元素，對于文字的使用是檢驗設計師基礎功底的時候，用得好壞會直接影響到用戶在使用產品的過程中的一個體驗，文字的使用從這幾個緯度出發：字體選擇、字號大小、顏色、字重、行高.

1. 字體選擇

（我要做一個良心的博主，讓你們避免侵權問題，別再傻乎乎的犯字體侵權的錯誤了）

在做車機系統設計的時候，需要選定該款車機中文、英文、數字或多國語言需要用什么字體。如果在乙方公司呢，客戶會指定給到你字體包，插播一段小插曲（職場心得：當客戶選定字體后，如果該款字體是付費字體，你得先和客戶確認是否得到使用許可，避免后續官司糾紛）在甲方爸爸工作的同學一般會遇到兩種情況：

• 公司已明確字體（請專業字體設計師設計一套）
• 用常規設計的字體，建議使用中文字體：思源黑體、英文/數字：Roboto。如果有做海外項目的，對于 Roboto 未涵蓋的語言，建議使用 Noto Sans 字體。Noto Sans 源自類似于 Roboto 的度量標準，旨在實現視覺上和諧的國際化。

這邊肯定會有人問為什么不能用蘋果字體呢？它不是免費字體嘛？

普及一下：首先該車機系統屬于商業用途，未得到許可使用，這就是侵權，在 app store 上 發布的 app 是可以免費使用的，因為這是在蘋果生態下使用，所以不屬于侵權。

2. 字號大小與字階

車機端的字號大小的制定也是要循規蹈矩

字號肯定要遠大于移動端和 web 端，為了確保文字信息的掃描性，結合了：基于 IDX & 同濟 (2020) 百度 Apollo 中控視覺基礎研究項目，設置清晰的文字階級參數，還有谷歌 Android Automotive OS 研究，以下是用字的規范（標紅色區域是他們之間的區別）

可參考谷歌：字體大小的遵循 4px 倍數大小增量

我們在做項目的時候，規定的字體大小維持在 4px，這樣有助于保持一致性和視覺層次感

用字的注意事項：

字體大小控制在 20px，這個要謹慎使用，一般都是使用在小標簽輔助類的文字上，最小的正文字號為 24px

設定文字規范有兩個好處：

• 文字樣式復用，不管對于設計師還是開發同學來說，都是極大提高工作效率的一件事情
• 對于界面設計來說，有規可循，避免設計時降低整體的視覺感

3. 字體用色規則

• 文字與背景顏色對比度要遵循 WCAG 的標準，需要考慮到無障礙設計需求，因此保持在 4.5:1 – 7:1 對比度，確保文字清晰易讀
• 將注意力集中到最重要的區域內容
• 文本元素之間傳達視覺層次感

4. 字體字重

字重是指一種字體的粗細樣式，下面展示字重的種類：

上實際案列講解：

謹慎使用中等字體粗細 ，盡量別用最粗的字體，這樣會使得頁面感覺差別很大，過度的不是那么自然，沒有了細膩、輕盈的感覺。所以在制定字體規范的時候就盡量將 Bold 字重去掉，如果你想通過加粗字體的方式來和下面信息作為區分，請選擇 Medium 字重（根據實際項目需求來定，我的規范只做參考價值）

5. 字體行高

為什么要加這一 pa，因為這個問題一直有小伙伴問到我，我就一次性解決了，文字模塊需要增加安全距離，這塊比較復雜。不行我后期錄一期視頻講解，下文也有詳細的講解。

字體文本的高度一直困擾著設計師，我該用什么方式去對接開發？在設計過程我們是否可以使用文字字號的高度進行對齊方式，而不是使用文字區域的行高？NO 肯定是不可以的。

微信朋友圈主頁作為案列：

文本的行高肯定是要大于字號的，個人動態的字號為 16px（在@1x 設計稿中）如果是多行文本的時候，微信是手動調整了文本行高（正常 Line：22px 微信實際 Line：20px），當行高為 20px 的時候，需要將文本上移 3px 才能使得圖片和文本視覺在一條線上面，如果按照這個進行開發的話，開發小哥需要在 CSS 屬性過程中注意圖片和文本之間的實際差異，這種左右高度不一致的設計，會直接導致在開發布局過程中變得更加繁瑣。

最后的結論：按照文本的行高來對接開發

普及一下小知識點：車載段落的行高一般為字號的 140%-180%的視覺呈現，提供舒適的閱讀環境給到用戶（取整數）

下面是一些專業性的知識 了解一下：

在設計字體過程中，字體設計師一般都會給字體預留安全距離，讓字體展示更加穩定。

我們在做設計的時候，將字號設置為 30px，但實際字體的空間是需要包含上下部分的安全距離，最終實際高度就變成了 42px（Font:pingfang） 穿插一個小干貨：在不同字體下相同字號，行高（Line height1）是不同的，Ant Design 的 30 號字，行高為 38px （詳見配圖計算方式）

顏色規范：

1. 使用場景

場景：白天陽光暴曬（陽光強度有很多檔位早、中、下午） 、 梅雨季節陰雨連天 、夜晚模式、地下隧道等。

駕駛汽車在室外不確定因素會比較的多，光線強度的干擾尤其重要，照明會根據一天中的時間，天氣，窗戶的色調等等而有很大不同。當你設計的車載應用程序在現實世界中使用時，設計時在計算機上看到的顏色并不總是相同?？紤]顏色亮度如何影響駕駛條件，以及低對比度的顏色在陽光直射下如何被洗掉。始終在多種光照條件下預覽您的應用以查看顏色的顯示方式。如有必要，請進行調整以便在大多數案例中提供最佳的觀看體驗。

最初車機廠商系統大多數都是偏愛深色背景，具有代表性的兩家系統谷歌的 Android Auto 系統和蘋果 Carplay 系統，我在做項目最初也是沿用了深色系。

2. 色彩中的“TF BOY”組合

我想用一句蘋果的官方話說：“配色可以提供交互性，提供視覺連貫性，并且對界面賦予生命力?！边@句話總結得真的非常到位。集中注意力認真聽，重點來了，UI設計中顏色的使用法則，在一個頁面設計中需要講究 60-30-10法則， 在60％+30％+10％的比例下創造一種平衡感，是為了視角能夠從一個焦點舒適地過渡到下一個點，避免給駕駛中的我們產生視覺落差很大的感覺。

一個項目車載系統的色彩規范，包括了品牌色、語義色、中性色。

品牌色：又稱為 “強調色“ ，通常一個車載系統只有一個品牌色，也是出現頻率較高的一種顏色，強調色一般使用場景為：tab 的切換選中，按鈕開啟狀態、音樂在播放中的音符小動畫等等 （拿我練習稿講解）

語義色：語義色需要在 UI 界面中承載著具有準確的信息傳達，在復雜場景里顏色的傾向性應十分明顯，減少用戶的理解成本和理解時間，給出行體驗者帶來良好的駕駛體驗。

根據交通標志的定義，紅色表示禁止、停止、危險，那么用戶需要在第一時間識別出這種信息，黃色為警示或不良結果等，綠色則代表通行、成功，上訴說的顏色為狀態色。下面要講一下功能色：說到鏈接色，大家第一時間肯定想到的是藍色。

中性色：主要用于除文字外，還被運用到背景色、分割線、置灰填充、邊框、等場景中 （注：根據背景色的變化，系統其余顏色也隨之而變，這是兩套用色規范切換）。

3. 如何制作 HMI 色彩規范？

盡量使用較少的顏色，顏色飽和度不要過高，避免對駕駛的視覺干擾，吸引駕駛者的注意力，讓老司機翻了車。

避免讓交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的顏色，則很難知道在何處點擊）。

保持色彩一致性（請勿使用不同的顏色來任意區分單個屏幕中的重復組件。當顏色不能增加價值時，請謹慎使用）。

建立視覺層次（通過不透明度值或者是同一色系，但不要過多的使用不透明度或對比度）。

盡量使用深色背景，這是市面上很多車廠的選擇（不過蔚來、特斯拉、小鵬、carplay 都相繼推出了白色版本，來適配白天，我們項目中后期也加入白天模式，經過路測在陽光很刺眼情況下，黑色會反光，無法看清顯示屏幕內容），最終在實際各種照明條件下，對應用配色方案進行測試。

車載 UI 系統中使用足夠色彩對比度，上述在使用場景中有所提到。

繼續講干貨

(在后續文章安排里我會單獨拿出 WCAG 從感知，可操作性，易于理解和穩定性去詳細講解，這次先挑重點說)

WCAG 全稱是 Web Content Accessibility Guidlines（網頁內容無障礙指南）它們是一組是網頁內容更容易訪問的建議，主要針對殘疾人。一共分為三個級別 A（最低）、AA、AAA（最高）

講個概念：兩個白色的對比度是 1:1 , 白色（#FFFFFF）與黑色（#000000）的對比度為 21:1

做顏色對比的網站鏈接，搭梯子訪問：https://next.rsuitejs.com/en/tools/palette

要滿足 AAA 級準則，文本視覺呈現及文本圖像至少要有 7:1 的對比度，針對大號文本以及大文本圖像至少有 4.5:1 的對比度

總結：

對于顏色運用的細節，是證明了一位設計師的深度、且具備耐久力。上述內容對于顏色的規則不適用全部的設計方案，還是具體項目具體分析，用戶人群不同，運用場景也不一致，比如駕駛者和后排人的屏幕設計內容肯定會有差別。還有一個點在設計需要閱讀內容頁面，例如：微信發來的消息、設置中文本，最好能夠達到 AAA 標準。

布局規范：

HMI 的設計和其余終端設計，最大的差異就在于布局，布局是整個頁面設計的框架，也是最重要的內容之一，在講該模塊內容，我會從實際項目案例出發。開始制作車載 UI 系統，需要和汽車廠商確認車載 UI 可在屏幕中，設計的尺寸區域（注：其中“屏幕”是指應用正常工作空間而不是到邊緣的全部空間，有的廠商把固定按鍵也鑲嵌這塊區域中）。

1. 屏幕尺寸有多少種類別？

我們先要了解一下熱門和主流車機分辨率。眾所周知我們車機上的屏幕尺寸和分辨率種類可以說是種類繁多，在設計過程中設計師主要還是關注屏幕的分辨率是多少？（ 需要我們設計的屏幕為儀表盤、中控、有的車載還包含有副駕駛和后排娛樂屏幕 ）

特斯拉（Tesla）

Model3 1920*1200 15 英寸（底部控件的尺寸為 120 像素是固定 ）Model S/X 用豎屏設計 分辨率 1200*1920

蔚來

ES8 10.4 英寸 分辨率 1600*1200 / ES6 11.3 英寸 分辨率 1600*1400

理想 ONE

比較特殊，它擁有 4 塊屏幕，儀表盤 12.3 英寸 1920×720 / 中控屏 16.2 英寸 2608×720

副駕駛娛樂屏 12.3 英寸 1920×720 / 再外加功能控制屏 10.1 英寸的 1280×720

小鵬

G3 豎屏幕 15.6 1920×1080 P7 控屏，在目前汽車產品中屬于分辨率較高的梯隊 2400×1200 精度超過 2K（普及一下 2K 分辨率標準為 2048×1080 像素）

接下來給大家觀看蘋果的 CarPlay 系統分辨率和谷歌車載系統

CarPlay 系統分辨率：800 * 480、1280 * 720、960 * 540、1920 * 720

相信大家已經找出規律了：在設計橫屏的時候高度基本都為 720px，其余橫屏幕按照比列縮小。

這塊內容非常重要，以至于關乎到后面整個系統的布局方式，蘋果的 CarPlay、谷歌 Android Auto、國內的百度 carLife+等都有自己的車載系統，如有的車企屏幕分辨率不一致，就無法適配成功，會出現拉伸等現象，除非通過定制化服務重新按照廠商的尺寸去重新搭建一套。我們項目中涉及到的屏幕和 CarPlay 尺寸大致很像，但布局方面我們有自己的想法，后面在自適應布局中會提到。

2. 間距的規范制定

制定一組間距值，用于布局中元素和組件之間的固定縱向和橫向的間距，參考規格布局 8 像素點網格上構建，這意味著規范中的 UI 組件和元素之間相隔 8px 的倍數

谷歌 Android Auto 間距規范一共制定了常用的九種數值，P0 – P8

注意事項：提供 4px、12px 間距大小，是為了對齊較小的元素之間的距離，這兩個數值謹慎使用，在大屏幕車載系統內，也有很多間距需要大于 96px，因此在對于這些數值制定規范的要求就是 8px 的倍數即可使用。

說到這邊肯定會有人有疑問，我們在做規范時能不能將間距不設定成 8 的倍數，4、5、6……倍數是否可行呢，當然是可以的，“規矩是死的，人是活的“。只要是按照倍數疊加完全都 OK，如果選定一種倍數，就不能加入其他倍數，如果頁面出現多種間距會使得頁面沒有節奏感，打破了親密性原則。

3. 車載模塊中布局

這部分對于想接觸車載設計同學非常友好。講一下通用的布局，具體交互設計等待我后續更新文章，這次就簡單按照 1920×720 分辨率每個模塊我都會稍微帶一下。

4. 自適應布局

講完前面每個模塊的大致布局，接下來我們來探討一下自適應布局，這個真的非常非常！?。〕壷匾?，工作后期經常會遇到這個問題，甲方爸爸后續有增加屏幕分辨率的需求。我們前期在布局上花費的時間相對較多（但后期維護起來可以減少你很多工作量，前期需要你規劃好基礎框架）

下面拿實際做過的案列來陳述：拋出一個問題，我們如何將分辨率1920×720頁面的內容轉變成1280×720 呢？

（有同學說，直接丟開發然后他們寫自適應布局）導航相關頁面需要調用地圖的接口，這個開發是可以直接去寫自適應，但其余元素還是需設計師重新來排版。

（還有人說直接縮放比列，調整頁面布局）這個方案在比例相差很大的時候是行不通的，但同比例或者很相近是完全 OK 的，正巧我們項目上有 800×480 分辨率，和 1280×720 極其相似。

（還有人表示不服：折疊某塊區域內容，將該區域內容做成 icon 點擊后彈出來）該方法可以使用在部分內容。

有的模塊內容沒法降低層級，這個辦法就不行，遇到這類的情況我們就直接將這塊內容適配做成 1280×720 尺寸。

如果前兩種辦法都行不通，有的內容就得需要做彈性布局控件了，例如設置頁面，當中間空間很大的時候，放置到短屏中可以根據彈性布局拉伸該控件長度，拉至適配該屏幕的設計，如有需要請留言，后續彈性布局我會寫一篇文章詳細說明使用。

我們項目多種分辨率進行轉化基本都按照這些方案推進下去的，來一句雞湯：辦法總比困難多，真的只要用心做事情，沒有什么困難能難倒你的，還有不要做理想主義者，要做實踐者，實踐才會見真理。

不好意思，一下子說多了沒收住 ，進入正題。謹慎重新改變布局 ： 第一是增加開發工作量，其次就是增加用戶的學習成本，當然，屏幕是豎屏的時候則就需要重新布局，因為橫寬比例變成了相反數值。（旋轉屏幕大家可以去看看比亞迪的唐、漢車型）

上述的內容都是我們一步一個坑踩過來的，“且看且珍惜”。

圓角的規范

1. 如何制定圓角的大小規則

更圓的角和全圓角的使用

對主要動作和組件使用更圓的角（更大的角半徑 or 全圓角），是需要重點突出的，圓形對大多數直線形狀具有更大的視覺影響，如果在頁面有足夠空間的前提下，全圓角形式會和其他按鈕做出反差，鼓勵用戶去點擊。比如：全局消息通知按鈕、電話模塊中接聽、掛斷、下拉負一屏中的按鈕等 （下方是練習稿案列）

較低的圓角和直角的使用

對于不需要 or 低強調的元素，使用較低角半徑 or 0px 圓角=直角，例如：工具欄或列表可以用較小的圓角，專輯封面不需要再強調，所以直接將它降到 0px，我們項目音樂專輯大封面就用的直角，具體問題需要具體去分析，像音樂控件的外輪廓就是帶圓角的，因此專輯封面在容器里面就必須帶有圓角，不然設計風格則就不統一。

還有一個模塊，就是在音樂分類的情況下會有很多專輯封面，我們對比一下兩種方案：有圓角 or 無圓角，兩張圖對比下來，帶有圓角的專輯封面有更明顯的邊緣產生了視覺差的感覺，而直角的專輯看起來就沒有，不易突出，因此不太可能引起我們的注意。所以在網格布局中，圓角的效果更好

谷歌對于圓角的定義

在設定圓角規則時，需要注意一個事項：大小種類不宜太多，不然顯得雜亂無章。

注意：即使應用布局是在 8dp 網格上構建的，但仍會提供 4dp 的半徑大小，以幫助在較小的組件中形成元素。該值應謹慎使用，因為它不是 8dp 的倍數

總結：圓角還是直角沒有對錯之分，合適的才是最好的。

圖標規范：

1. 圖標的種類（車載圖標分為應用程序圖標、系統性圖標）

應用程序圖標

現在 HMI 的設計趨勢已經去掉了應用程序圖標，取而代之的是卡片化的設計方案，簡單說一下卡片式設計有兩大好處，第一，把學習成本降至最低，第二，增大的接觸面積讓駕駛時誤觸率也降到最低，給到用戶最直觀的體驗就是簡單易用。不過有的汽車廠商對這一塊還是有需求，我們就稍微再提一下。

我自己也負責過有應用程序圖標的項目，在 1920×720 中為 160px 分辨率和蘋果@3x 分辨率相同 ；在相對較小的屏幕中應該按照比例同比縮小，如同 800×480 分辨率中首頁中的應用程序圖標為 80px，這是如何計算的呢？

項目中還有一款車型的屏幕分辨率為 1280×720，由于屏幕變窄，應用程序圖標需要縮小到 120px，高度 720 and 480 有一個共同 240 的倍數，所以最終小屏幕的應用程序圖標為 80px，圓角大小也隨之而變：R：24/18/12。其余分辨率按照實際情況使用。

系統性圖標（后續 HMI 組件庫搭建文章中我會詳細的講解）

該系統提供了許多小圖標（代表常見任務和內容類型），供導航欄和選項卡欄中使用。最好盡可能使用這些內置圖標，因為它們是人們熟悉的。

2. 圖標的尺寸

大廠是如何制定圖標尺寸

很多博主在講到圖標尺寸的時候都是一筆帶過，拿著別人得出的結論，卻沒說怎么計算出來，對于車載來說，前期發布這些研究報告的內容極少，所以我對圖標的計算想找到了計算方式，如果大家想知道怎么換算的話可以查看：https://zhuanlan.zhihu.com/p/158099749

根據百度 IDX 駕駛體驗中心，在對于《車載 HMI 界面效果客觀指標實驗報告》在基于視距為 50cm，計算出最小圖標為 9mm 推薦使用 12mm。視覺上的 1cm 的實際像素是多少呢？這就是一個錯誤的想法，上面文章中也有提到屏幕分辨率無法與物理長度單位進行轉換，（實際項目工作經驗告訴我，因為相同的屏幕大小但是分辨率不一樣，所以得出的結果不能共用）

PPI 的計算

我就大概講一下計算原理，這個根據屏幕的分辨率，我做過一款相同屏幕尺寸的車機，都是 8 寸屏幕，但分辨率一個為 1280×720，另外一個則為 800×480，每一個格子為一個像素。

最小圖標尺寸計算

接下來找一下分辨率 1280×720 最大公約數為 80，最后得出結論屏幕的比列 16:9

兩邊比例的平方相加 = 屏幕英寸的平方

根據勾股定理 （16X）^2 +（9X）^2=8×8 最后 x 算出的結果為 0.4357

16:9 的 8 英寸屏幕 長度（單位：英寸）=0.4357×16 =6.9712 寬 =0.4357×9=3.9213

國際計算單位 1 英寸 = 2.54cm

所得出屏幕的長度（單位：厘米）=6.9712×2.54≈17.7cm 寬 =3.9213×2.54≈9.96cm

分辨率：1280×720 寬度約等于 10cm 來計算，720/10 = 72px

分辨率：800×480 由于他們屏幕大小一致（英寸）480/10=48px

得出結論：視覺上的 1cm 的實際像素是有所差距的。

按照設計規則：按 4 的倍數來制定，因此最小圖標為 40px（這個結論只是作為推薦使用，在做項目的時候，變數有很多，甲方爸爸就喜歡超級大的，你也沒辦法，所以還是按照項目來制定）

為了計算這個我還特地的回顧了高中學習的開根號、初中的最大公約數都搬出來了，幸好當時數學還算是個小學霸，哈哈哈~~~

下面展示一下：

谷歌 Android Auto 圖標大小規范

基礎的圖標：主圖標：44px 次要圖標：36px 第三方圖標：24px

頭像的使用：小頭像：56px 中頭像：76px 大頭像：96px

百度車載生態開放平臺下載了他們組件庫，進行了研究。

基礎為圖標：48px 次要圖標 40px（最小圖標尺寸）

這邊還要說一下，對于大圖標的尺寸設定，會有很多尺寸 icon，后續我還會在輸出關于車載圖標詳細的內容，敬請關注吧。

3. 圖標的點擊區域

圖標觸摸區域分為駕駛中使用和靜止中使用

例如說駕駛中需要調節空調的內外循環，原本老車機的硬按鍵替換成了屏幕中的按鈕，原有的硬按鍵已經通過長期使用有了記憶性，有觸感并且操作硬按鍵大小適中，所以在操作中減少了操作時間，降低了危險系數。新能源汽車在設計的時候可以通過增大觸摸區域降低誤操作、無法點擊使得駕駛員視野長時間遠離方向盤的情況，研究表明視野超過 2 秒以上停留，就會存在危險。

靜止使用例如：在設置頁面中調節車輛設置中的屬性，巡航模式、電動尾門打開百分比的調節等等。

谷歌制定觸摸區域的規則

最小觸摸目標尺寸為 76 x 76px，需要在單個圖標設計基礎上再額外增加一塊觸摸區域，易于駕駛中可操作，在靜止使用的話，我們可以遵循蘋果設計規范中最小手指觸摸的區域為 44x44px

這是我根據實際項目并在車內進行路測（路測：駕駛中測試）中得出結論。

還有一種特殊情況：文字+圖標組合點擊區域，在 icon 很小的時候也可以考慮將文字也組合一起，增大點擊區域

4. 圖標設計的統一規則：

• 統一風格
• 統一光源
• 統一線條粗細
• 統一圓角/直角
• 統一傾斜角度
• 斷點的距離、大小統一

5. 最后最一個小插曲：命名的規范

之前經常有小伙伴問我，落地項目的 icon 切圖命名規范怎么制作？就拿我之前做的風格稿首頁來說，首頁音樂卡片中的“下一首”的圖標如何命名。

首先分析這個 icon 在哪個頁面當中 or 用在哪里，接下來就是他的屬性是什么 icon 還是 button，其次就是這個 icon 代表什么，這個 icon 的大小，因為在一個系統里面會有重復功能 icon，所以是有必要增加大小（這塊內容是選填項），最后在增加這個 icon 是處于什么狀態下，狀態分為：禁用、常態、按下、選中

最后呈現：首頁_音樂_下一首_常態 ，對接開發應該是翻譯成英文。

有時候英文命名也可以用縮寫比如設置：setting 你直接可以寫成 set icon ic button bt（如果全局使用就使用   All）

總結

聽完小米的發布會，是我觸動較深的一次，視頻彈幕中滿屏刷著““干翻特斯拉”，小米造車一誕生就背負著全民的期望，創始人雷軍已經功成名就，但還是愿意押上全部的聲譽和未來十年的人生，全力 all in，我心中只有敬意，祝小米早日造車成功，“干翻特斯拉”，我們設計師也愿意和這個行業賭一次，行業深耕下去，砥礪前行。

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

文章來源：優設  作者：設計界的影帝

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

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

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

What 是什么

簡介：「輸入線索」是指用示例輸入或說明文本以占位符（Placeholder）的形式顯示在輸入框中，以幫助用戶理解需要輸入的內容，或給出相關線索的一種設計方式。

例子：  在 Ant Design 輸入框組件 的示例中（如下圖），我們可以看到「輸入線索」可以更好地幫助界面說明輸入字段的內容或解釋輸入字段的功能。

Why 為什么

「輸入線索」這種設計模式可以讓界面不言自明。由于輸入線索的內容位于用戶輸入的位置，因此用戶往往不會忽略這個信息。

對比：「輸入線索」VS「輸入說明」

「輸入說明」與「輸入線索」都是輔助用戶輸入的設計模式，這些模式可以幫助用戶明確輸入信息的內容形式。

那么這兩種模式有什么差異性呢？

使用「輸入說明」這種模式時，快速瀏覽用戶界面的用戶可能會輕易地忽略說明信息，因為用戶的目標是盡可能快地完成表單，然后進入下一步操作（雖然有的場景下這也是其中一個設計目標，但在這里不討論）。因此，過多的文本說明也會給用戶帶來較大的心智負擔。

Google 注冊賬號頁是結合使用「輸入說明」與「輸入線索」的一個典型案例。通過使用「輸入線索」告訴用戶需要填寫的內容，通過「輸入說明」來補充填寫信息的相應意圖，進而使得用戶可以清晰地意識到需要填寫什么，并輸入相應信息。

When 什么時候使用

用戶可能不一定清楚需要在輸入框中輸入的內容。在設計上，你可能不希望在輸入框附近上添加更多的字，造成視覺壓迫。還有一種情況，如果界面空間有限，無法使用「輸入說明」時，也可以考慮使用「輸入線索」。當出現下拉菜單或者組合輸入框時，往往需要配合該模式進行使用。

使用條件

· 輸入框要求輸入的內容可能不容易讓人馬上理解；

· 設計上不希望在其他地方補充新的內容；

· 可以承載文本的輸入空間可能沒有太多；

· 配合下拉菜單或者組合輸入框使用；

How 如何使用

1. 選擇適當的提示文本

· 對于下拉列表，使用 “選擇”、“選取”等單詞，英文使用 Select Choose 或者 Pick 等；

· 對于文本輸入框，使用“輸入”等單詞，英文使用 Type 或 Enter；

· 盡量使用祈使句，以動詞短語開頭；

· 以描述輸入內容的名詞結尾，例如“選擇狀態”，“在此處輸入消息”或“輸入患者姓名”等；

2. 提示文本的位置

有關文本提示的位置應該和輸入值的位置一致。 比如，提示本身不應該是下拉菜單中的可選值。

Example 案例

案例一：Ant Design Pro 登錄功能預覽

用戶需求：用戶登錄功能的預覽與體驗

Ant Design Pro 是一個中后臺開發的模板腳手架，其并不提供真實賬號登錄服務。因此 Ant Design Pro 的開發者為了模擬真實使用環境，提供了一個可正常登錄的賬號，賬號密碼分別 user 和 ant.design ，其余情況下用戶輸入的賬號密碼均會提示不正確。

在這個場景下，通過將正確的賬號密碼以輸入線索的方式顯示在占位符中，巧妙地告訴體驗 Ant Design Pro 的用戶正確的賬號密碼。

案例二：163郵箱登錄頁面

用戶需求：登錄賬號

163郵箱登錄頁面的賬號輸入框中的輸入線索非常有用。正常用戶在看到后綴有 @163.com 時可能并不一定能意識到可以輸入手機號碼。而通過在占位符中 顯示「郵箱賬號或手機密碼」，高效便捷地提示了用戶可以直接輸入手機號碼進行登錄。

案例三：小米賬號登錄頁面

用戶需求：輸入賬號密碼

「輸入線索」有一種設計上的變體，稱為「浮動標簽」。因為一般來說，當用戶激活輸入框時，占位符文本會消失。而「浮動標簽」不會消失，通過移動位置和更改大小駐留在界面中。這種設計方式可以使得界面變得簡潔、優雅。

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

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

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

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

華為會定期派員工去兩個地方做用戶研究。第一個地方是華為手機線下門店，這個地方很好理解，通過觀察和訪談顧客，能挖掘到不少體驗設計需求。另外一個地方我完全沒想到是——手機維修中心！來維修手機的用戶都是憤怒而且失望，如果員工能體會到這些用戶的心境，對產品的設計底線和情感關懷應該會做得更好。

另外一方面，通過數據分析、競品分析得來的信息，我們不過是依據腦子里已經存在的假設再設計方案驗證罷了。有很多信息是未知的盲區，未知的盲區有潛在不可預估的風險，通過用戶訪談探索盲區能幫助我們打破固有觀念，補齊短板，做出更貼近用戶的設計方案。

通過訪談確實得到了想要的信息，也為后來產品優化提供方向。訪談期間發現了一些實用的小技巧，在此分享給各位讀者。

技巧 1：通過預訪談修正大綱

我猜設計好訪談大綱的你迫不及待的馬上想去訪談用戶，但是如何證明現在的訪談大綱的正確的呢？萬一設計的問題不對，那自然得到的訪談結論也是錯的。所以在設計好訪談大綱后，可以先只預約 1 個用戶，或者和目標用戶相近的朋友進行一次訪談預演習。通過這次演習找到大綱問題或者訪談中遇到的其他突發情況，對大綱進行修正之后再批量預約用戶進行訪談。

也可以把大綱當作一款互聯網產品，每一次訪談之后對大綱進行反思迭代，讓下一次訪談更好。

技巧 2：寒暄和循循漸進

如果和訪談的用戶一開場就單刀直入的提問，可能用戶此時剛從其他事情抽身出來，注意力和記憶力都還沒進入訪談狀態。開場立即提問會讓用戶懵，因此建議一開場先和用戶寒暄，比較輕松的聊一些和產品相關的問題，給訪談熱熱身。

技巧 3：鼓勵用戶暢所欲言

中國人講究和氣生財，尤其對陌生人更是客氣得很。不敢當面指出你的問題，擔心你面子上掛不住或者生氣。另外你認為是很重要的細節，用戶可能不太在乎。為了從用戶言語里得出更多信息，要鼓勵用戶多說不好的地方，甚至可以賣慘宣稱收集不到足夠的問題會被老板罵，求用戶多吐槽。

技巧 4：不要使用用戶不懂的術語

雖然在客戶面前說些黑話會讓你顯得很專業，或者你和同事在公司里有約定的簡化術語。但是用戶并不懂這些，所以在用戶前面收起你身為互聯網人的身份氣質，好好的說人話來和用戶溝通，本身也是在設計真正的用戶體驗。

技巧 5：多詢問曾經的真實經歷

越是寬泛和抽象的問題越難回答，不知道該從哪個角度開始講起?！皬膱鼍爸袑ふ彝袋c”可不能只是嘴上說說的場面話，詢問用戶曾經的真實經歷，就是獲得現實的用戶使用場景，具體的問題也能讓用戶回憶起當時的細節，這樣你才能從細枝末節中找到痛點。

技巧 6：穿插現場操作，鼓勵口述想法

用戶訪談是非常消耗時間的方法，好不容易訪談一次就盡量榨干所有價值。建議訪談過程中穿插一些讓用戶現場操作的小任務，觀察用戶的現場操作，根據行為分析出體驗優化點。同時注意讓用戶一邊操作時一邊說出腦中的想法，獲取用戶的思考過程，更能得到有價值的信息。

技巧 7：不要問封閉式問題

封閉式問題得到的信息很少，而且所有的問題答案都只是你對現有已知信息設置的。如果要獲得封閉式問題的答案，不如網上直接發問卷來得效率高呢，在訪談中問這些性價比不高。我們盡可能多問開放式問題，多收集未知的信息。

技巧 8：給用戶榮譽感

“垃圾是放錯地方的資源”——說明對某些人不重要的信息對另外對人可能非常有價值。用戶對訪談中說過的話認為并不是很有意義的信息，但是對于你來說可能就是提升產品體驗的高價值問題。

我幾乎每次訪談的最后用戶都會對我說“我就隨便說說，希望能幫到你”，這時候就真誠的告訴用戶這些信息很有價值，讓用戶心中獲得訪談的榮譽感，這樣可能比給物質獎勵讓用戶更開心。并且榮譽感會激勵用戶之后再給你反饋更多產品使用問題，持續得到有價值的反饋。

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

文章來源：優設  作者：龍爪槐守望者

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

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

前言

在項目實際開發我們會遇到表格列過多，表格內容過長的困擾，表格數據的展現很不理想，今天我為大家介紹如何結合Datatables 使用表格固定列；

效果展示

1、在屏幕足以展現內容的情況下

2、模擬屏幕過小 或表格列過多的情況

從效果圖可以看出，我將左側兩列和右側一列 作為固定列 ，中間內容可拖動顯示

開始使用

//引入juqery datables fixedColumns 根據各自的樣式需求 本人使用的是bootstrap 
<link href="您的資源目錄/dataTables.bootstrap.css" rel="stylesheet">
<link href="您的資源目錄/fixedColumns.bootstrap.css">
<script src='您的資源目錄/jquery.js'></script>
<script src='您的資源目錄/jquery.dataTables.min.js'></script>
<script src='您的資源目錄/dataTable.fixedColumns.js'></script> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

初始化datatables

//異步請求獲取表格渲染數據
var dataTable;
$(function () {
    dataTable = $('#表格ID')..DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {url:  "您的請求URL"},
            "scrollX": true,
            "autoWidth": true,
            "columns": [
            ...
            ]
    });
}) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

初始化fixedColumns

new $.fn.dataTable.FixedColumns(dataTable,{
    "iLeftColumns":2,  //開啟左側兩列固定
    "iRightColumns":1, //開啟右側1列固定
    "drawCallback": function(){
        //重繪的回調執行
    }
}); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

原理解析

在datableas 初始化后 根據設定的開啟固定列，獲取datables 對應表格數據 進行復制，然后采用position: absolute 在原表格 上加多一層固定列表格的展現，感興趣的朋友可以瀏覽器DEBUG查閱；

出現的問題

1、固定列出現滾動條

出現這個問題是 dataTable.fixedColumns.js 插件計算固定列寬的問題，可以在源碼進行修改；或者在fixedColumns.js 重繪成功后回調中執行

$(".DTFC_Cloned").css("width","auto"); 


    

        1
    

2、采用ICheck 插件無法點擊 和 勾選問題

原因：因為異步加載數據的問題 ，我們每次在datables重繪的回調函數中 進行ICheck 再次初始化；
而dataTable.fixedColumns.js 是 datables 初始化完成后才執行的 ，上文也提到固定列實現的原理，其復制了固定列數據 position: absolute，那么展現給我們看到的是已經初始化的ICheck ，真正可以勾選點擊的其實在下一層；

解決思路：在fixedColumns.js 重繪成功后回調中初始化ICheck； 再重新注冊全選 和反選事件；

//朋友們可以根據需求 自定定義自己的初始化和事件注冊
new $.fn.dataTable.FixedColumns(dataTable,{
    "iLeftColumns":2,
    "iRightColumns":1,
    "drawCallback": function(){
        //重繪Icheck 這里是我封裝的初始化方法
        iCheckInitFunction();
        //重新設置全選事件 這里是我全選/反選的注冊事件
        TableiCheck(".DTFC_Cloned thead tr th input.i-checks", ".DTFC_Cloned tbody tr td input.i-checks");
    }
}); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

修復版的 dataTable.fixedColumns.js 下載

大家可以選擇適合自己的樣式

默認展開

    

        // 所有節點加載完成后觸發
    

    

        $('#jstree1').on("ready.jstree", function(e, data) {
    

    

        
    

    

        // 默認選擇節點
    

    

        $('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);
    

    

        
    

    

        // 默認展開/打開全部
    

    

        $('#jstree1').jstree().open_all();
    

    

        
    

    

        });
    

    

        
    

    

        // 選擇更改時觸發
    

    

        $('#jstree1').on("changed.jstree", function(e, data) {
    

    

        console.log(data.selected);
    

    

        });
    

默認收起

    

        
    

    

        // 所有節點加載完成后觸發
    

    

        $('#jstree1').on("ready.jstree", function(e, data) {
    

    

        
    

    

        // 默認選擇節點
    

    

        $('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);
    

    

        
    

    

        // 默認關閉/收起宣布
    

    

        $('#jstree2').jstree().close_all();
    

    

        
    

    

        });
    

    

        
    

    

        // 選擇更改時觸發
    

    

        $('#jstree1').on("changed.jstree", function(e, data) {
    

    

        console.log(data.selected);
    

    

        });
        

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

        

             
        

        

            


        

        

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

        

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

        

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