[TOC] # 設計原則 ## 清晰（Clarity） * 縱觀整個系統，任何尺寸的文字都清晰易讀，圖標精確易懂，恰當的修飾且不易被察覺，聚焦于功能，一切設計由功能而驅動。 * 留白、顏色、字體、圖形以及其它界面元素能夠巧妙地突出重點內容并且表達可交互性。 * 網頁的一切表現和表述，應該盡可能貼近用戶所在的環境（年齡、學歷、文化、時代背景），而不要使用第二世界的語言。此外，還應該使用易懂和約定俗成的表達。 ## 高效（Efficiency） * 足不出戶：能在這個頁面解決的問題，就不要去其它頁面解決。 * 簡化交互：交互是為提升用戶體驗，不可以為了酷炫的效果而提升用戶操作的復雜度或學習成本。 * 互聯網用戶瀏覽網頁的動作不是讀，不是看，而是掃。易掃，意味著突出重點，弱化和剔除無關信息。 ## 一致性(Consistency) * 一款內部一致的應用能夠貫徹相同的標準和規范：使用系統提供的界面元素、風格統一（眾所周知）的圖標、標準的字體樣式和一致的措辭。應用所包含的特征和交互行為是符合用戶心理預期的。 ## 提示(Hint) * 通過網頁的設計、重組或特別安排，防止用戶出錯。 * 中級用戶的數量遠高于初級和高級用戶數。為大多數用戶設計，不要低估，也不可輕視，保持靈活高效。 * 幫助性提示最好的方式是：1、無需提示；2、一次性提示；3、常駐提示；4；幫助文檔。 * 對用戶容易產生困惑的敏感信息進行提醒 ## 即時反饋(Feedback) * 反饋認證交互行為，呈現結果，并通知用戶。系統自帶的iOS應用對每一個用戶行為都提供了明確的反饋。可交互的元素被點擊時會被臨時高亮，進度指示器（progress indicator）顯示了需要長時間運轉的操作的進度，動效和聲音加強了對行為結果的提示。 * 用戶在網頁上的任何操作，不論是單擊、滾動還是按下鍵盤，頁面應即時給出反饋。“即時”是指，頁面響應時間小于用戶能忍受的等待時間。 # 設計基礎 ## 字體 * font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微軟雅黑",Arial,sans-serif; ## 排版 * 行高默認為字號的1.5倍 * 對齊方式（兩端對齊，冒號對齊，左對齊） ## 色彩 * default #212121 * primary #00bcd4 * success #009688 * info #03a9f4 * warning #ffc107 * danger #e51c23 * pink #e91e63 * purple #673ab7 * indigo #3f51b5 ## 常用布局 * zqui-content和zqui-content-padded作為ZQUI整個框架中的外層容器 * zqui-list和zqui-card-list為列表類布局容器 * zqui-row 柵格布局容器 * zqui-grid 宮格布局容器 * zqui-bar 定義工具欄類 ## 組件動畫 暫無 # 卡片式設計 ## 特性 **響應式** * 在滿足各種屏幕尺寸需要之上，卡式設計能非常便捷地幫助用戶焦距到特定的內容，也讓設計師在設計時合理又簡潔地進行內容的布局。 **邏輯有序性** * 卡式設計能讓混亂的不同元素種類的內容在排版上提供一種奇妙的有序性。 **易讀性** * 卡式設計一個非常重要的特性就是它們包含的信息十分簡潔，這讓它們變得有趣且引人入勝，但這也讓網站內容變得比較單一，很快就一覽無余。 **平等性** * 卡式設計還有一個特性就是平等，這里的平等當然不是絕對的，也就是說，卡式設計里每張卡片，它在整個網頁中的重要性是差不多相同的。這也就讓大家省去了為內容進行等級排序的麻煩。 **通用性** * 卡式設計幾乎可以用于任何行業任何用途，它的創作彈性非常大。在設計風格上可以說沒有任何定論，給了設計師非常大的可發揮的創意空間。 ## **注意點** **留白** * 留白是老話題，但卡式設計會非常容易忽略這個問題，因為你的注意力焦點都在卡片上面，一不小心你就陷入到了一片混亂里。你必須善用留白（或者也叫負空間）。不僅是卡片外的空間，甚至卡片內部，對于產品展示以外的空間也需要謹慎的處理。 **細節** * 卡式設計帶來了簡潔，但與此同時也必須強調一點，那就是內容的豐富性。這在一定基礎上必須保證頁面能提供足夠多的頁面內容來引導用戶，否則用戶只會感到茫然。 **模塊但不死板** * 卡式設計有其重復性，但并不意味著它必須得單調沉悶。別怕給你的項目中增加點吸引人的個性化的東西。客戶也許不喜歡而否決掉，但它增加了你為創作所付出的一種可能性。炫目的小動畫、別具一格的配色風格或者是讓人耳目一新的字體，這些都值得去嘗試。 **使用網格** * 這一條其實不用多說，想要讓網頁看上去更協調，網格可謂功不可沒。 ## 參考資料 * [什么是卡片設計？](http://www.ui.cn/detail/20944.html) * [卡片式設計有什么好處？](https://www.zhihu.com/question/21473866) * [形式與功能：卡片式設計思考](http://www.sj33.cn/digital/wyll/201607/45842.html?1469282898) * [卡片式設計用戶界面](http://www.woshipm.com/pd/446701.html) * [簡約不簡單！帶你重新審視正在流行的卡片式設計趨勢](http://www.uisdc.com/card-based-design-trend#) * [考點匯集！幫你梳理卡片式UI的設計最佳實踐](http://www.uisdc.com/best-practices-for-cards) * [不是萬能！卡片式設計并不能支撐所有的設計需求](http://www.uisdc.com/card-ui-design-doesnt-work)