不管是平面設計、品牌設計，還是UI設計，配色都是一個基礎，決定著作品的視覺效果。這篇文章就從色相、純度、明度（色彩的三大屬性）三個角度，展開談談色彩的搭配。
之前我也無意中看到餓了么把「超級會員」改成了「吃貨卡」，感覺還不錯。雖然并不了解餓了么的會員業務，但這次改版體現了一些有趣的設計思路，正好對應了我們在設計上的疑惑點。于是就著該讀者的問題，一起來聊聊其中有意思的點。
比如，如何在同質化的功能上做出一些創新且有價值的改變；如何降低營銷感，把商業需求統一到用戶需求上；如何不需要再糾結今天到底吃什么了……
我們「以為」的，就是真實的嗎？
今天的文章，從一張圖開始。
在《認知與設計》的第一章里，作者提到了關于感知的話題，在影響感知的幾種方式里，第一種就是「感知的啟動」，其中很典型的案例是下面的一張素描，你能看出畫面中是什么嗎？
一條斑點狗。
或者你沒看出來？如果你看到了這只狗，就很難再回頭把這張素描看做隨機無序的點了。就像書里說的那樣，我們看到的很多東西取決于別人告訴我們它是什么。
產品功能也是如此，它告訴了我們這是什么，我們就會這么認為。如果一開始設計的就是吃貨卡，也許很多人不會想到它是會員的變體，而是僅僅當做一個福利卡來看了。對于超級會員和吃貨卡的感知差別僅僅在于定義上的不同，而非本質的改變，這是很有意思的一個點。
拿生活中的一個例子去看，相同的杯子，我們可以叫它咖啡杯，同樣也可以叫它養生杯，當面對不同的叫法時，我們是不是就會產生不同的代入感？
而產品大多數時候都是通過渲染場景、營造氛圍來達到這個目的，我們通常將其稱之為產品定位。
所以產品需要定位，需要一個鮮明的形象，然后讓產品中的所有信息、功能、風格、色彩都去表現它，才能樹立起用戶的認知，帶來深入人心的記憶點。于是，相同的功能在不同產品中的差異除了內容的填充、使用的方法、規則的定義外，還可以改變的就是 —— 包裝。
就餓了么這次改版的「吃貨卡」而言，它本身并非一個新功能，只是「超級會員」的一個變體，會員的本質就是產品根據用戶的投入而給予的特權。所以產品只是集合了這一部分有投入有特權的群體罷了，至于怎么稱呼，會員也好、吃貨也罷，在產品層面都是一樣的。
會員，官方的解釋是：通過正式手續加入某個會社或專業組織的人。
在任何地方，我們都可以成為會員，但不是任何地方，我們都能變成吃貨。所以吃貨卡這個定義，一下子就把強烈的產品屬性透傳了出來，并聯結了我們的目標用戶，會員的「積分」也自然地轉化成了「吃貨豆」，這種概念上的改變，就是一種包裝。
這是我在這篇文章中要聊的第一個點，就是通過品牌塑造來重新包裝一個功能，而包裝的形式要依附于產品定位。
第二大點，我們來聊營銷廣告與產品功能的碰撞。
在廣告濫用和形式多變的今天，我們已經逐漸習慣至無感那些具有豐富色彩和設計元素的廣告內容，以至于可以自動篩選出它們，打上標簽，從我們的視覺中過濾出去。
但總有一些廣告似乎天生具有一種隱秘的商人氣質，帶著精明的窺探，去誘導大家瀏覽、點擊、分享、消費。
廣告是產品的一種營銷語言，而營銷有時就是讓利，以廣告的形式，通過優惠與福利來抓住用戶的心，而用戶往往會認為這是欺騙。那么當商業目標和用戶目標無法趨于一致的時候，我們又該如何讓用戶為產品站臺呢？
首先，對于廣告的刻板印象常源自我們接觸廣告的失敗經驗，其大致可分為三類。
第一類「虛假利益」?？浯蠛锰帲蚰梅亲罱K的利益引誘，直到我們了解了詳情才發現自己是個被騙的傻瓜。
于是，產品通過弱化營銷性的信息流廣告，并加上清晰的廣告標簽，公開透明的讓用戶感受到自己被平等地尊重，即滿足商業利益，又解決了用戶的訴求問題，將兩者利益統一。
但這一類并不是我們今天要聊的重點，我們繼續往下看。
第二類「難度操作」，比如那些假的關閉圖標、廣告背景中極小的跳過按鈕、或者在領取福利時的層層步驟，都是用戶在接觸廣告時難度操作的體現。
前兩種對用戶來說無法原諒，而最后一種往往會作為一種營銷策略，去增加用戶獲得獎勵前對產品的投入，比如瀏覽、轉發、消費等，這是沒有問題的，關鍵是用戶是否提前獲知了我們得到獎勵的所有條件。我們厭惡的，是超出我們預期的那些負擔任務。
吃貨卡的任務模塊在優化后就直接展示了任務詳情。但是首頁領任務的提示卻隱藏了任務的重要條件，比如「下 2 單，賺 400 吃貨豆」，實際是兩筆超 20 元的訂單。那是否會存在一類用戶，沒有點擊查看詳情而直接下單，下單之后，發現并沒有完成進度？因為外賣費用沒有超過 20 元。
如果產品是擔心用戶因為 20 元的門檻而不做任務，那么在點擊查看后的任務詳情不是把這一類用戶推向進一步的否定嗎？我們因這樣的手段能夠額外獲得多少增長，同時，又有多少用戶因此對所有的任務失去信任，我們無法準確計算，因為得到是顯性的，而失去是隱性的。比如一些音樂產品的會員機制，用戶辦理好之后想聽某首歌，發現還需要另外再付費，于是卸載了軟件。
另外，改版后吃貨豆的領取方式也對應發生了改變，不是直接的發放，而是轉為點擊領取。
雖然趣味的動效消解了部分用戶對冗余操作的厭惡感，但還是能從反饋渠道中看到用戶對這種強制限時去領取獎勵做法的反感。這種領取模式也可說是一種變相簽到，只不過這種簽到的獎勵不是你通過額外行為主動賺取的，而是在已經得到的情況下被迫操作領取，和支付寶領取積分的方式一樣。限定時間內不領取，還會消失。
游戲積分的領取，之所以有領取操作，是因為積分積攢的寶箱獎勵，是額外的收獲。玩家玩游戲的目的是體驗游戲而不是為了積分與寶箱，這兩者之間是有差異的。
多余的操作看起來增加了頁面的曝光度，帶來了更多的轉化可能，卻「實在」地提高了用戶獲得獎勵的成本，從而間接降低了獎勵的價值，因為投入產出比太低，所以用戶常常寧愿放棄這樣的獎勵。
產品想要讓用戶感覺到方便和實惠，體驗滿意，但又通過這種點擊才能領取的方式，強制綁定用戶與頁面，來觸發用戶的下一步行動。表面上可玩性增強了，實則是體驗感的缺失。
第三類是關于「過度選擇」。交互設計有一本經典的入門書籍叫《Don’t make me think》，描述了如何通過設計幫助用戶理解與操作，來提高產品的易用性。同理，當我們思考營銷在產品中的表現時，難道就不需要考慮用戶了么？
過去的營銷就像過去的產品一樣，以產品實現而非用戶為中心，表現產品的實現方式而不去考慮用戶的心理模型。
比如軟件需要我們命名才能保存，特別是系統自帶的記事本軟件，不僅需要自己輸入文件名，還用 *txt 占了命名位，使用星號讓我們無法直接保存。相比之下，很多軟件已不再需要用戶命名，會直接提供默認命名，還有像 Typora 這類產品，可以自動將我們的第一段文本內容作為默認文件名。
對營銷而言，以實現為中心的設計想法體現在制造了盡可能多的活動類型和規則上，希望觸達不同的用戶。而事實是，在過度選擇的壓力下，很多用戶直接選擇了忽視。
如果去看餓了么會員舊版的設計，我們會發現它有紅包、獎勵金和折扣商品三類福利，三者的關系是相對分離的。
其中的規則是，當我們成為了會員：
所以我們有三種獲得紅包的途徑：領取、購買、兌換。
再看新版吃貨卡的設計，在直接領取與購買紅包不變之外，新版強調以用戶的消費去獲得獎勵，不管是直接兌換紅包或者兌換店鋪的專屬紅包，都是以吃貨豆兌換為核心。相比舊版，將商鋪折扣商品，替換為吃貨豆兌換專項紅包，其實本質是一樣的，無非就是為了提高吃貨豆與吃貨卡的利用率罷了。
在這樣一個前提下，產品增加了紅包類別，給予了用戶更多選擇的自由。雖然隨著紅包的分類維度變多（專享和吃貨聯盟的紅包、特定品牌和分類的紅包、具體店鋪的紅包），產品的規則趨向復雜，但是理解變簡單了，我們也只需要做好兌換這一件事就可以。
復雜的規則仍然可以呈現出簡明的設計，我們不需要用戶來負責過濾這些復雜信息，而應當要求產品，站在用戶這邊，去降低理解成本。自然地，產品與用戶就能并軌而走，商業需求與用戶需求也可統一。
當然，或許也會有用戶反感這樣的功能被活動化，但不得不說，這確實是一個品牌的升級。
這篇文章從幾個角度聊了「吃貨卡」好與不好的地方。
當然它不僅僅是一個會員功能的改版，在概念玩法上也是一種升級。從設計角度看，確實有創意的表現，雖然也有不可取之處，但是它背后的設計思考是值得學習的。
我們知道，設計雖然會受到許多框架和規則的限制，但從問題出發，思考方案的過程才是設計本身最有意思的地方。好比游戲，也是因為規則與框架的限制，以至于才有了如今豐富多彩的游戲形態。
所以即使看向那些常規的功能和成熟的設計，我們也可以融入一些不一樣的東西，站在過去到現在的經驗上，再做出一點改變，使其更具可玩性。
文章來源：優設 作者：呆呆U理
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2020年已經過去一大半，這些時間以來，我一直在關注數字設計領域未來的設計趨勢。從年初就開始收集，到今8月份了，我想是時候將發現的一些趨勢風格分享出來，這些風格很有可能繼續延續到2021的產品設計上。
對于UI界面視覺趨勢，同樣需要我們高度重視。畢竟每年改版方向，視覺風格研究是必不可少的一個環節，下面正式開始。
今年在各網站上看到大面積的漸變色設計，相對前兩年來說越來越少，設計上有所克制。大面積的漸變色雖然視覺沖擊力強，但大部分停留在概念中。
從今年設計中我們可以看到設計更加理性與克制，將漸變色彩運用到關鍵功能上，突出強調重要信息。
機票選購界面，將漸變色運用到頭部位置去強調功能。
運用在功能卡片上，突出重點信息。
如上圖，設計上同樣只將漸變色運用在背景上，其他卡片上基本沒有漸變色。
幾何圖形設計是目前運用最多一個設計手法，今年發現一些比較抽象藝術化包豪斯風格幾何圖形，在UI設計中大量運用，且效果還不錯。
這種圖形帶來好處就是記憶性強，應用廣，它不僅可以拓展在品牌包裝，品牌圖形延展，還可以運用在UI設計中。
卡片設計采用一些具有意向符號的圖形，來表達功能的設計，形成記憶點。
品牌設計上，也是重復這種極簡包豪斯風格幾何圖形。將logo元素提取，進行包豪斯風格化，重復運用在設計中。
今年這樣的設計屢見不鮮，大量3D運用在界面設計中，二維的界面已經不再滿足當前設計需要。設計師去探索更多維度學科與UI界面融合，形成一種全新的視覺感官。
uber的概念官網就通過3D來呈現，表達功能亮點。
將二維世界三維化，將是2021年重要的趨勢。目前國內外線上有一些產品，開始在部分功能模塊使用這樣設計手法，如Naver，支付寶等。
可以說是趨勢輪回，毛玻璃的效果又回來了。這也是今年在各網站設計上出現頻次多一些的設計。
新的毛玻璃效果更加去注重功能說明，用在視覺強調的地方。
如上圖設計，毛玻璃運用在頂部關鍵信息上。這樣設計即可減少其他色彩運用，還可以對功能信息進行強調。
毛玻璃效果運用在個人中心，人物頭像位置，進行設計強調。
運用毛玻璃去包裝UI界面，可以提升品質感與神秘感。
將功能與場景融合設計，用戶在使用產品過程中，能產生更多情景體驗感觸。這也是最近今年喊的比較火的一種設計思路。在各網站上，這樣設計出現次數越來越多，設計效果沖擊力強，得到很多設計師的認可。
場景中關鍵人物元素與設計進行巧妙集合。
運用超現實設計手法，將人物與酒店場景進行排版布局。
將制作材料與產品集合。
擬真植物元素與土地進行巧妙集合，在視覺上傳達逼真效果。
雜志化設計風格鮮明，可以有助產品去打造強化記憶點。雜志化設計的優勢可以不受到網格約束，排版使用大字體，同時設計排版上更加個性。我們在做產品概念探索前期，可以多去嘗試這樣的風格。
擬物圖標又回來了，Apple新版本的Big Sur系統，就采用擬態圖標，這也是一個新的嘗試，當然也是一個開始。我們很有必要時刻關注這個趨勢，未來將會在更多設計中看到擬物化圖標的出現。
不過這種風格也不能大面積運用在界面中，我們可以運用在一些關鍵功能入口設計上。
在天氣上的運用，相對之前扁平化設計，目前具有空間的擬物化設計，增加了真實感。
圓形趨勢，我想大家也許會忽略的點，最近幾年設計中，圓形的設計無處不在。它的好處不言而喻，親和力強、場景覆蓋廣，幾乎任何設計都能去用圓形。因此我們有必要去注意圓形運用技巧。
星巴克的web UI概念設計，采用圓形與產品進行集合設計排版。
新擬態趨勢是2020年受到廣泛關注的趨勢之一，這種趨勢大量使用了柔和的陰影和微弱漸變，使設計既具有未來感又具有現實感，并且為熟悉的界面帶來了新的感覺。相對之前大面積濃厚陰影而言，目前新的簡化擬態界面，會克制使用這些元素。
2021年擬態界面，更注重功能與體驗。擬態效果會使用在關鍵功能上，如儀表、按鈕，又或者需要重點強調的地方，避免了大面積使用這種設計手法。
2021年的趨勢相對來說，有繼續延續2020年一些設計風格，這些風格將會在繼續加強，同時我們也有發現，目前越來越多3D元素與二維界面進行集合設計，能更生動傳達功能與將故事，2021年大家務必要注意這種趨勢的延續。
作為設計師，我們對設計的思考不能只停留在表象層面，而更多的需要圍繞信息傳達這一設計的本質功能，以充滿自省的精神深化和反思自己的設計意識，同時要時刻保持對趨勢的敏感度。將新趨勢合理的運用在產品設計中，以產生最大化收益。
文章來源：優設 作者：功夫UX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
１．安裝
Windows 安裝請參考
默認安裝為c:/usr/ ?？梢詧绦腥缦挛募?，以便啟動snmp agent：
snmpd
會提示需要配置snmpd.conf。
No log handling enabled - turning on stderr logging
Warning: no access control information configured.
It's unlikely this agent can serve any useful purpose in this state.
Run "snmpconf -g basic_setup" to help you configure the snmpd.conf file for this agent.
NET-SNMP version 5.5
不必使用提示中的命令，因為此命令引用了perl，但是perl的對應模塊無法跑起來?？磥韕erl要完蛋的傳說并不是空穴來風。
snmpd.conf可以自己創建到/usr/etc/snmp/snmpd.conf內。
２．修改配置文件
配置之前的說明：我在網上看到的所有配置都是com2sec，group，access這三個配置，但是從默認的snmp.conf文件中有一段話：
沒必要使用 com2sec/group/access配置，使用ro(w)user，ro(w)community結合合適的views，就可以覆蓋大多數需求了。
2.1 配置監聽地址
snmpd默認監聽本地IP的UDP161端口，等待snmp請求
agentAddress udp:161
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2.2 配置視圖(view)
格式：view viewName type oid[mask]
參數說明:
viewName : view名稱
type : 有兩個值：include和exclude(包括或者排除)
oid：可以訪問的oid(mib子樹)
[mask]：對oid的掩碼 (可選參數)
案例：
view systemonly included .1.3.6.1.2.1
2.3 配置共同體(community)
格式：ro(w)community communityName source
參數說明：
rocommunity定義一個只讀權限的共同體，rwcommunity定義一個讀寫權限的共同體
rocommunity6或 rwcommunity6表示監聽IPv6。
communityName：共同體名稱
source：可以訪問的IP地址范圍，默認為”default”，即任何IP都能訪問。
可選參數：－V viewName 限制共同體只能訪問viewName下的節點
實際配置文件
agentAddress udp:161
view systemonly included .1.3.6.1.2.1
rocommunity public default
3. 測試
修改完配置之后，重啟snmpd：
snmpd
連接測試：(該節點表示獲取主機內存大小)
snmpwalk -v 1 -c public localhost .1.3.6.1.2.1.1.1
SNMPv2-MIB::sysDescr.0 = STRING: Windows DESKTOP-70OA76Q 6.2.9200 Professional
得到類似以上的結果，就說明snmpd配置成功。
配置MIB庫
Windows版本的snmp自帶有很多MIB，位于C:\usr\share\snmp\mibs
因此可以對OID和MIB name做互相轉換：
snmptranslate -On SNMPv2-MIB::sysDescr.0
.1.3.6.1.2.1.1.1.0
snmptranslate .1.3.6.1.2.1.1.1.0
SNMPv2-MIB::sysDescr.0
添加自己的mib
之前的筆記有提到自己創建的一個定制mib文件
https://github.com/1000copy/tbit-guard-snmp/blob/master/tbit.mib
可以把它加入到C:\usr\share\snmp\mibs目錄內，文件名無所謂。然后為snmptranslate加入選項 -mALL ，表示加載所有在此目錄內的mib文件：
snmptranslate -m ALL .1.3.6.1.4.1.66666
你應該看到如下消息，表明mib加載成功：
tbitinc::tbit
詳細的說明如下：
-m MIBLIST
指定一個用冒號分隔的MIB模塊列表（不是文件），以便為這個應用程序加載。 這將覆蓋（或增加）環境變量MIBS、snmp.conf的內容。指令mibs，以及硬編碼到Net-SNMP庫中的MIBs列表。如果MIBLIST有一個前導的'-'或'+'字符，那么所列出的MIB模塊將被加載到默認列表之外，分別位于該列表之前或之后。
否則，將加載指定的MIB，而不是這個默認列表。特殊關鍵字ALL用于加載MIB目錄搜索列表中的所有MIB模塊。 每一個名字不以". "開頭的文件都會被解析為是一個
MIB文件。
-M DIRLIST
指定一個以冒號分隔的目錄列表來搜索MIB。 這將覆蓋（或增強）環境變量MIBDIRS和snmp.conf指令mibdirs。
以及硬編碼到 Net-SNMP 庫中的默認目錄 (/usr/share/snmp/mibs)。
如果DIRLIST有一個前導的'-'或'+'字符，那么給定的目錄會被添加到默認列表中，在這個列表的目錄之前或之后進行搜索。
分別進行搜索。 否則，將搜索指定的目錄，而不是這個默認列表。
請注意，列表中出現在后面的目錄要比前面的目錄優先。 要避免搜索任何MIB目錄，請將MIBDIRS環境中的
變量為空字符串（""）。
請注意，使用-m選項或mibs配置指令指定的MIB將從-M選項（或等價物）列出的目錄中加載。
mibfile指令采用的是指定MIB文件的完整路徑，所以不需要在MIB目錄搜索列表中出現。
很多時候，設計師需要在公開場合借用幻燈片演示設計作品，或者給客戶展示的設計方案，又或者是需要在文章當中，展示作品，選取配圖。如果你希望你的展示和演講更加具有吸引力，那么可能需要針對這些視覺素材進行處理，讓你的觀眾或者讀者，被內容吸引，被信息打動，能夠 Get 到你所要表達的東西。
今天這篇文章，梳理了 20 個對關于幻燈片/演示文稿的處理技巧和經驗總結，希望能夠幫到你。
在創建任何用來展示的幻燈片之時， 你首先要搞清楚一個問題——你的目標或者目的是什么。明確了這一點，才能做好下一步的設計。
除了了解自己的目標，你還要搞清楚你的觀眾或者你的受眾是做什么，有什么特征，對什么感興趣，會具備什么樣的動機，這樣你在設計的時候，才能夠更加具有針對性。如果是甲方，那么甲方是什么樣的人？你是否要提供一個具有代入感的故事，在最后再進行報價是否合適？搞清楚觀眾，后面的問題你就有答案了。
如果你的幻燈片準備得過長，那么最好大概每20分鐘就需要中斷，適當休息一下，或者調整演示內容的媒體形態，讓你的聽眾可以借此修整，并重新集中注意力。
講故事能夠更好地同用戶建立聯系，保持用戶的參與感，集中注意力。如果用戶無法集中注意力，那么你的展示和設計做得再好都沒有用。你可以參考一些常見的、有效的敘事框架，拿捏好關鍵的因素：
關鍵角色：客戶、用戶、組織、團隊等；
核心問題：挑戰、痛點、風險等；
框架指南：產品、公司、服務等；
完整歷程：解決問題的愿景、具體執行計劃等；
抵達成功：光明的未來、最終的成就等；
這意味著，如果你的幻燈片當中的內容，下面的觀看者無法在 8 秒內消化，那么它可能就失去效果，并且用戶會快速分心。
幻燈片要簡短，不要讓它像書本一樣堆滿信息，你應該提供最快速有效的簡短展示，減少文字，增加輔助的視覺效果，幫助用戶集中注意力。
如果你的文本內容無法進一步增減，那么你需要做的就是梳理出它的層級關系，讓字體的層級來輔助觀看者更快 Get 到其中的信息。我們習慣于快速掃視，而不是逐字閱讀。
凸顯重要內容，控制好字號大小，排版結構，讓觀看者能夠清晰閱讀內容。過于鮮艷的色彩會產生視覺頻閃，對比度過低會讓可讀性極差。
在實際的展示的過程中，展示者在電腦上看到的，和最終在大屏幕上演示的內容是不一樣。演示給下面觀眾的內容一定要簡約直觀，而更多的輔助信息只需要顯示在展示者自己的電腦上，作為提示即可。
提取最重要的信息點，使用更大的展示性的字體來呈現，這是有助于讓這些信息脫穎而出的，而不是簡單地、沒有篩選地鋪陳出來。
信息圖和簡單的數據展示有著極大的差別，信息圖所展示的信息更易于被觀看者理解和吸收，使用信息圖還能讓整個展示過程更加視覺化、富有創意。
我經常會聽到這樣的要求：「這套幻燈片只能有7個頁面，同時我們不能刪除任何內容。」
千萬不要將內容塞到固定數量的幻燈片當中，那是沒有任何意義的。一套用來演示的幻燈片的數量應該是可以增刪的，它們的數量取決于你所要展示內容的多少，以及呈現的方式。對于絕大多數的展示和演講而言，20~30 張幻燈片是一個合理的數量。
留白是制作幻燈片時最容易被忽略的元素，通常而言，我在修改幻燈片的時候，將留白的空間放大三倍，視覺上的呼吸感就正正好好。
好的圖片素材，通常會有著相對充沛的感情和自然的敘事。在你的幻燈片當中，需要采用更加富有真實感的照片，以營造真實的敘事感。不幸的是，這種設計知易行難，絕大多數的圖庫所提供的照片都缺乏這種應有的真實感。當然， Unsplash.com 所提供的照片，相對而言會好一些，而且是免費的。
影響幻燈片視覺樣式的因素有很多，主題、受眾、品牌等等等等，都會有影響。但是不論情況如何，你都應該讓整個幻燈片所采用的字體、圖標、配色、插畫的樣式始終保持一致。其中，最常用的方法是定義整個幻燈片的模板，來協助你保持一致性。
不要把幻燈片用信息全部填滿，可以在其中插入一些可以幫助觀看者「中場休息」的幻燈片，它可以起到過渡作用，也可以幫助觀看者不用一直緊繃著情緒。
轉場動效和動畫可能會成就你的整場演示，也可能讓它淪為一場災難。我的建議是，盡量讓動畫和動效微妙一點，讓它們緊貼內容，對信息提供支撐，而不是喧賓奪主。
對于較長且復雜的演示，讓觀眾看到進度條，了解整個演示的進程是非常有必要的，當他們感受到演示的進程，就能體會到掌控感和安全感。
做好幻燈片之后，一定要自己排練一下整個過程，走一遍之后會讓你對于整個演示過程中，哪里有問題，哪里要改進有更清晰的認知。借助排練來排查問題，迭代展示，非常有必要。
當然，設計幻燈片和設計 APP、網頁是截然不同的，但是設計思維層面上，這幾個領域確實完全相通的。你可以借用各種設計規則和方法來將幻燈片設計得更加合理優秀。
文章來源：優設 作者：Taras Bakusevych
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在B端產品中，數據主要通過表格的形式展現。本文是我從實際工作出發，結合項目和過去經驗對于復雜業務類的表格設計的一次總結。
表格（Table），又稱為表，是用來收集、整理、組織、分析數據的二維矩陣。它既是一種可視化交流模式，又是一種組織整理數據的手段。
通常表格的組成元素以及相關元素會有多個部分，筆者根據自己設計表格的工作經驗將表格概括為容器、篩選區、功能性按鈕、表頭、表體以及底欄等六個部分，其各個部分包含的相關元素如圖所示。
容器：包含表格的所有內容。
篩選區：包括搜索和條件篩選。方便用戶快速查詢定位數據，一般位于表格上方。
功能性按鈕：比如常見的[新增]按鈕和各種批量操作按鈕。
表頭：說明數據的內容，可以包含篩選、排序等功能。
表體：包含行和列數據，按列可以分為多選列、數據列、操作列。（多選列=多選框；數據列=呈現業務展現需要的信息；操作列=針對單行數據的操作按鈕，比如管理、編輯信息等。）
底欄：包含數據量、單頁條目、總條目、分頁等，底欄數據也可以放置在表格頂部。
1）幾種常見的風格樣式
a.網格型：表格有均勻而明顯的分割線，邊框單元格比較明顯。
b.水平線型：僅顯示水平線可減少整個網格的視覺噪聲。
c.斑馬條紋型：隔行交替使用不同底色來區分數據。
d.自由形式：移除所有分割線，通過盡可能減少視覺噪聲來創建極簡外觀。
2）關于樣式的選取技巧
網格型：對于數據之間的關系緊密（列信息較多而沒有足夠空間用留白來分割信息）且有對比關系的。
水平線型：它能顯著減輕表格在垂直方向的視覺重量，提升用戶進行大量數據對比時的速度。因此對于所有數據集大小，此樣式都是最常見的。
斑馬條紋型：每行交替使用不同的顏色背景是幫助用戶在閱讀時保持其位置的另一種好方法。對于較大的數據集，建議使用此樣式，在較大的數據集中，交替模式將很清晰，并且不會引起特定行突出顯示的混亂。
自由形式：對于小型數據集，如果用戶在閱讀時不需要幫助就可以保持位置，則建議使用此樣式。
信息內容的有效傳達是表格設計的本質，就表格本身而言應該是隱型的，應該讓用戶注意力聚焦在核心內容上。所以，邊框的顏色應非常淡，不能妨礙快速瀏覽。
表格是為可讀性而生的，一個結構清晰的布局能大大提升用戶對信息的接收速度和理解程度。因此，設計易讀，易掃視，易比較，易操作的表格結構是表格設計的首要目標。
下面我將以公司財務中臺的表格改版為例，逐步說明表格中每個結構的設計。
這是改版前后樣式對比圖：
篩選區可以看作表格的導航，由搜索和篩選這兩部分組成。一般搜索和篩選會同時出現，但是兩者一般很少同時使用來對數據進行定位。搜索更多的是對單一或者包含某個字段的的數據來進行定位；篩選則是用來查詢一類數據。
根據MECE分析法，篩選區可以有以下的表現形式：
常用搜索少用篩選，若篩選項多，可以選擇隱藏篩選項，篩選少可以展示出來；
搜索和篩選都常用，可以將搜索和篩選都展示出來；
常用篩選少用搜索，篩選和搜索同時展示；
篩選和搜索都不常用，展示搜索隱藏篩選。
1）搜索
在樣式上，搜索可以分為簡單搜索、標簽搜索、高級搜索等三類。
簡單搜索：由一個搜索框和一個按鈕組成?？梢暂斎胍粋€或多個條件進行搜索。
標簽搜索：在簡單搜索的基礎上加上標簽，即先選標簽，在輸入搜索內容。
高級搜索：即點擊更多展開其他搜索條件，減少了更多條件對用戶的干擾，但降低了易發現性。
2）篩選
根據篩選的位置，可以分為標簽篩選、表頭篩選兩類。
3）案例小講堂
對于數據集較大的B端系統來說，往往篩選條件比較多，都將其展示出來會導致空間占比過大，影響了用戶對表格信息的獲取。下面以我公司的財務中臺為例，講講如何優化篩選區，希望對大家有所啟示。
3.2.3 版本中篩選區樣式
篩選條件全部展開，目的是讓用戶對信息進行快速的查詢、過濾，以快速準確完成目標任務。但業務復雜，數據集過多少，篩選條件也相應增加（空間占比大），看起來非常冗余，不利于快速定位目標。為了平衡掃描、查詢、過濾、分析等這些操作，復雜業務的表格區篩選需要進行一定的優化處理，這樣才能滿足滿足業務需求同時，又符合用戶心智模型。
方案A 整齊劃一
整合篩選項，采用表頭篩選+標簽篩選的樣式，縮減篩選區的頁面空間占比。
討論結果：雖然這個方案使篩選區的空間占比縮小，整體頁面也看似整潔不少。但表頭篩選在復雜的業務系統中存在幾個弊端：
a.數據集往往很龐大，表格不能展示所有字段，往往采用列固定的形式來呈現數據的完整性。以財務中臺為例，高頻篩選功能已被遮擋（如上圖），篩選前需先對表格進行橫向滾動，無端增加操作；
b.應無法展示全部字段，用戶無法清晰的感知到篩選了哪些內容，增加認知學習成本；
c.表頭中的屬性并不是都可以進行篩選，用戶不可感知哪些可以篩選，需要滑動表格檢索。
方案B 強調主次關系
采用展開式的標簽篩選樣式，對不常用的篩選項做隱藏處理。但因業務場景的復雜度，高頻篩選功能還是很多，沒有解決本質的問題，如下圖：
方案C 分狀態展示（逐漸呈現）
在方案B的基礎上進行了優化。提煉與流程相關的狀態，按步驟顯示，每一步只顯示當前需要關注的內容，如圖：
狀態的提煉過程
1）整理每個單據的狀態，理清關系
結合業務流程可以很明顯的注意到，單據只有通過了審核才能收款，只有收款才能進行核銷。狀態是一種遞進關系（審核 ?? 收款 ?? 核銷）。
2）結合財務人員的工作流，提煉出單據的以下幾種狀態，之前存在到問題（表格中單行數據的操作不一致），也得到了完美的解決。如圖：
1）按鈕的表現形式
建議在復雜系統設計中使用圓角矩形的按鈕樣式。
理由如下：
a.人眼處理圓角更容易（認知負荷說）
Jürg N?nni（Visual Perception的作者）表示，視網膜中區處理正圓形的時候是最快速的，而處理邊邊角角的時候則比較費力，大腦處理的速度也較慢。于是，長得圓潤的圓角矩形相較于一般矩形，對于使用者來說就容易接納許多。
Barrow Neurological Institute （巴羅神經病學研究）的研究也顯示，一個物體的顯著度與邊角的角度呈線性變化，銳角相較于鈍角要顯得更明顯突出。換句話說，角度越尖銳，物體就看起來越明亮；而越明亮的物體就越難以直視。
如上圖所示角度越尖銳，看起來越顯眼，在視覺上也比較令人感到明亮，不適，大腦的認知符合也越高。
b.使相似的內容更容易被區別
舉個例子，如下圖所示，即便間距相同，B 排的圓角矩形辨識度還是明顯比A 排的矩形高。
這是為什么呢？
首先，第一眼看過去的時候，A 排的矩形整體是連在一起的，中間找不到斷點。而B 排矩形，因為有圓角的關系，所以斷點很明顯。
其次，兩種矩形的視覺聚焦：A 排由于直角的關系，視覺聚焦向外推，整體的效果比較發散。這會使得第一眼看過去的時候，容易分不清楚哪一條邊框屬于哪一塊矩形。反之B 排因為圓角收攏的關系，視覺聚焦向中心推，區塊就比較容易區別開來。
綜上所示，圓角矩形是非常有效率的容器，在復雜場景業務中（存在很多種功能型按鈕），按鈕采用圓角矩形樣式最提效。
這里要注意，圓角不是越大越好
在相同面積中，按鈕的可操作區域隨著圓角的增大而遞減，因此在同等尺寸下的按鈕中，小圓角的按鈕明顯比大圓角的按鈕更容易操作。
同時在實際業務中，按鈕常常被當作原子與下拉框聯動組成下拉菜單控件。如若使用半圓按鈕則無疑增加了下拉框的設計難度并且匹配起來也會略顯突兀。
2）批量操作按鈕的位置思考
來看個舉個例子（針對財務中臺批量操作的優化方案）
現存問題
方案A 信息前置
批量操作按鈕全部展開不做折疊處理，信息前置來降低認知成本，方便用戶記憶。
討論結果：對于復雜業務來說，會有很多批量操作功能，按鈕很多，造成頁面擁擠，進而影響用戶操作體驗；一個位置出現2個主按鈕樣式，不推薦。
方案B 沉浸式操作體驗
對于一開始不可用的批量操作按鈕進行隱藏，勾選激活狀態，顯示在篩選區。
討論結果：方案B的阻斷性強 — 無法兼顧批量操作和數據篩選功能，無法滿足復雜系統的場景操作。
方案C 上內容下操作，前2個方案的優化
不做隱藏，類灰布置于底部。勾選觸發操作條件，未做勾選時，用戶點擊時給出引導操作提示
為什么選擇方案C？理由如下：
首先，根據古騰堡原則，用戶的在做表格操作的時候，視覺流是左做到右，從上到下，方案A和方案B的視覺落腳點在表格的上方，顯然是不符合眼動規律的。
其次，批量操作的功能屬于財務中臺的核心功能點，隱藏不是第一選擇，而是類置灰的特除處理（在按鈕旁給提示信息）
2.3表頭設計
表頭在能夠概括的情況下，盡量簡練、準確，一般可根據上下文關系來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身。如果精簡后的生僻字段難以自我解釋，可以跟一個釋義標識，鼠標懸停時出現該字段的詳細解釋，同時滿足新手用戶、普通用戶以及專家用戶的需求。
在數據的對齊方式上，有以下3個建議：
a.文本左對齊
b.數字右對齊
c.表頭與信息內容對齊方式一致
文本左對齊，符合正常的心智模型（閱讀習慣從左到右）；表頭與內容對齊一致，則是為了簡化和降低視覺噪音，以便更好的獲取數據信息。數字右對齊，有利于數據間的對比。
要注意的一個細節，例如，當列數＝2的時候，由于列與列直接的間距過大，導致兩者的關聯性較弱，如圖：
這時又該如何處理？
為了增強列與列之間的相關性，當鼠標hover在行的時候，產生高亮。這種方式可能不是最優的，但目前只能想到這種方法，如果讀者有更好的想法歡迎留言。
2)數字的字體選擇
建議選用：Helvetica Neue、Helvetica、Arial、sans-serif.
蘋方在數字字符上，不同數字寬度不一致，導致千位分隔符不在一條線上。而Helvetica Neue數字等寬，千位分隔符有序的排列在一條線上。所以，選擇Helvetica Neue作為數字字體的首選字體。數值上下對比的時候，相同位置的數字在同一條豎線上，更加容易對比。
3)對操作項進行“解耦”處理
在財務中臺系統中，常常由于權限的不同或者單據狀態不同這兩種原因，使得每行的數據擁有不同的操作項，如下圖所示：
存在的問題：
當信息過載，操作項這個list非常長的話，頁面將會非常擁擠；
文字按鈕因為視覺特征比較明顯，造成了不必要的分散注意力；
誤操作率相對較高，同樣因為表格空間有限，當操作區非?？拷?，很容易一不小心就點錯了。
針對這個問題所出的解決方案，如下：
方案A 下拉框樣式
討論結果：下拉框中可能存在不同操作，同樣避免不了誤操作這個問題。
方案B 錯位顯示
討論結果：首先，這樣的設計浪費大量的屏幕空間；其次，浪費開發工作量！因為在列表中實現一系列權限判斷和操作，在詳情界面中往往還需要再開發一次相同的權限判斷和操作；再次，不同單據可能存在操作順序不一樣，上下移動鼠標會存在不同操作，用戶代價非常高。
方案C 以不變應萬變
回歸『一個界面一個用戶任務』的原則，列表中的單行數據只保留[查看]或[管理]操作，所有其它的單獨操作都去往該單據的詳情界面完成。
討論結果：從開發的角度上看，此方案界面高度解耦，功能迭代方便，節約開發工作量；從認知成本上看，列表界面操作高度一致性，利于養成用戶習慣；從操作效率上看，在詳情頁用戶會明顯確認目標單據，幾乎不會誤操作； 同時此方案節約了大量屏幕空間，更有利于用戶對信息的獲??；
4)關于表格中套表格的解決方案
場景：在財務中臺中，有這樣一種用戶，需要對表格內的數據進行對比并編輯。
來看看之前的頁面：
這樣處理的不足點：
1.在查看和編輯信息時，無效的信息太多。降低了獲取信息的效率；
2.切換單條數據時，頁面出現跳動，無法快速檢索到相對應的信息；
對此，在3.3.2版本中，我們對其做了相應的優化。運用側視圖（快速視圖）的方式來呈現信息。一旦選擇一個單據，它就會從側面彈出的。
這個方案，它可以保持上下文，易于使用，即使是在垂直滾動視圖中顯示大量字段的情況下也效果良好。同時信息呈現的地方是固定的，利于檢索，查找。
5)行高的制定方法
開始之前首先明確一下開發是怎么實現行高的。
從上圖可以看出，開發在實現設計稿時，通常是按照行高來寫的。
因此，表格行高=文字行高+上下間距。其中，文字行高可以設定為字號的1.2~1.8倍，上下間距可以設定為字號的1~1.5倍。
行高影響每行信息的易讀性。除了上述的做法外，還有以下2種做法，來保證各場景下獲取信息的效率與易讀性。
做法1：不同分辨率使用不同行高
設計兩套不同的行高，在大分辨率下顯示較高的行高，給數據間提供更多呼吸的空間；在小分辨率下顯示較小的行高，使一屏內可以看到更多的行高。Gmail就是這樣設計的，如下圖所示：
做法2：自定義行高
自定義行高為興奮需求，可以提高用戶的用戶體驗。所以我們可以視表格的具體情況來設計設置行高的形式，可以放置在設置按鈕里，也可以在外部按鈕較少的情況下展示出來。
2.5底欄設計
最后是表格的底欄，底欄也是不可缺少的一部分，承載的作用主要是告訴用戶數據條數以及當前位置。分頁的設計是根據不同的場景進行選擇最優的設計方案。在不需要定點跳轉的場景，建議建議刪除跳頁，刪除多于的功能，使頁面簡潔、清爽。
表格中經常會出現空數據或無數據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統沒有加載出來嗎？明智的做法，是無數據時用「-」來填充顯示，數據為零時與上下數據單位、小數點相同的0來顯示。
盡量減少視覺符號的使用，因為視覺符號可能會使你的用戶界面復雜，產生難以理解的內容。去除不必要的視覺干擾，例如不必要的圖標、無規律的色彩等。
當列表中數據過長時，我們需要根據屏幕寬度調整列表展示方式，超過列表默認寬度的內容可以省略，通常用...表示，鼠標移入后出現氣泡展示全部內容。
位置：建議展示在上方，因為我們的閱讀順序是從上到下，鼠標向下移動時不會被上面的氣泡遮擋住。氣泡面積不宜過大，根據屏幕尺寸控制在一定比例，一版不超過內容區的四分之一，展示不下的內容可以在氣泡中增加滾動條。
感謝閱讀！本文結合了實際項目經驗對表格設計做了一次總結，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。如果你還有什么好的想法和建議，可以在評論里留言討論。
文章來源：站酷 作者：Hi_Nick
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
單頁面應用特征
假設： 在一個 web 頁面中，有1個按鈕，點擊可跳轉到站內其他頁面。
多頁面應用： 點擊按鈕，會從新加載一個html資源，刷新整個頁面；
單頁面應用： 點擊按鈕，沒有新的html請求，只發生局部刷新，能營造出一種接近原生的體驗，如絲般順滑。
SPA 單頁面應用為什么可以幾乎無刷新呢？因為它的SP——single-page。在第一次進入應用時，即返回了唯一的html頁面和它的公共靜態資源，后續的所謂“跳轉”，都不再從服務端拿html文件，只是DOM的替換操作，是模（jia）擬（zhuang）的。
那么js又是怎么捕捉到組件切換的時機，并且無刷新變更瀏覽器url呢？靠hash和HTML5History。
hash 路由
特征
類似www.xiaoming.html#bar 就是哈希路由，當 # 后面的哈希值發生變化時，不會向服務器請求數據，可以通過 hashchange 事件來監聽到 URL 的變化，從而進行DOM操作來模擬頁面跳轉
不需要服務端配合
對 SEO 不友好
原理
hash
HTML5History 路由
特征
History 模式是 HTML5 新推出的功能，比之 hash 路由的方式直觀，長成類似這個樣子www.xiaoming.html/bar ，模擬頁面跳轉是通過 history.pushState(state, title, url) 來更新瀏覽器路由，路由變化時監聽 popstate 事件來操作DOM
需要后端配合，進行重定向
對 SEO 相對友好
原理
Html5 History
vue-router 源碼解讀
以 Vue 的路由vue-router為例，我們一起來擼一把它的源碼。
Tips：因為，本篇的重點在于講解單頁面路由的兩種模式，所以，下面只列舉了一些關鍵代碼，主要講解：
注冊插件
VueRouter的構造函數，區分路由模式
全局注冊組件
hash / HTML5History模式的 push 和監聽方法
transitionTo 方法
注冊插件
首先，作為一個插件，要有暴露一個install方法的自覺，給Vue爸爸去 use。
源碼的install.js文件中，定義了注冊安裝插件的方法install，給每個組件的鉤子函數混入方法，并在beforeCreate鉤子執行時初始化路由：
Vue.mixin({
beforeCreate () {
if (isDef(this.$options.router)) {
this._routerRoot = this
this._router = this.$options.router
this._router.init(this)
Vue.util.defineReactive(this, '_route', this._router.history.current)
} else {
this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
}
registerInstance(this, this)
},
// 全文中以...來表示省略的方法
...
});
區分mode
然后，我們從index.js找到整個插件的基類 VueRouter，不難看出，它是在constructor中，根據不同mode 采用不同路由實例的。
...
import {install} from './install';
import {HashHistory} from './history/hash';
import {HTML5History} from './history/html5';
...
export default class VueRouter {
static install: () => void;
constructor (options: RouterOptions = {}) {
if (this.fallback) {
mode = 'hash'
}
if (!inBrowser) {
mode = 'abstract'
}
this.mode = mode
switch (mode) {
case 'history':
this.history = new HTML5History(this, options.base)
break
case 'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case 'abstract':
this.history = new AbstractHistory(this, options.base)
break
default:
if (process.env.NODE_ENV !== 'production') {
assert(false, `invalid mode: ${mode}`)
}
}
}
}
全局注冊router-link組件
這個時候，我們也許會問：使用 vue-router 時， 常見的<router-link/>、 <router-view/>又是在哪里引入的呢？
回到install.js文件，它引入并全局注冊了 router-view、router-link組件：
import View from './components/view';
import Link from './components/link';
...
Vue.component('RouterView', View);
Vue.component('RouterLink', Link);
在 ./components/link.js 中，<router-link/>組件上默認綁定了click事件，點擊觸發handler方法進行相應的路由操作。
const handler = e => {
if (guardEvent(e)) {
if (this.replace) {
router.replace(location, noop)
} else {
router.push(location, noop)
}
}
};
就像最開始提到的，VueRouter構造函數中對不同mode初始化了不同模式的 History 實例，因而router.replace、router.push的方式也不盡相同。接下來，我們分別扒拉下這兩個模式的源碼。
hash模式
history/hash.js 文件中，定義了HashHistory 類，這貨繼承自 history/base.js 的 History 基類。
它的prototype上定義了push方法：在支持 HTML5History 模式的瀏覽器環境中（supportsPushState為 true），調用history.pushState來改變瀏覽器地址；其他瀏覽器環境中，則會直接用location.hash = path 來替換成新的 hash 地址。
其實最開始讀到這里是有些疑問的，既然已經是 hash 模式為何還要判斷supportsPushState？是為了支持scrollBehavior，history.pushState可以傳參key過去，這樣每個url歷史都有一個key，用 key 保存了每個路由的位置信息。
同時，原型上綁定的setupListeners 方法，負責監聽 hash 變更的時機：在支持 HTML5History 模式的瀏覽器環境中，監聽popstate事件；而其他瀏覽器中，則監聽hashchange。監聽到變化后，觸發handleRoutingEvent 方法，調用父類的transitionTo跳轉邏輯，進行 DOM 的替換操作。
import { pushState, replaceState, supportsPushState } from '../util/push-state'
...
export class HashHistory extends History {
setupListeners () {
...
const handleRoutingEvent = () => {
const current = this.current
if (!ensureSlash()) {
return
}
// transitionTo調用的父類History下的跳轉方法，跳轉后路徑會進行hash化
this.transitionTo(getHash(), route => {
if (supportsScroll) {
handleScroll(this.router, route, current, true)
}
if (!supportsPushState) {
replaceHash(route.fullPath)
}
})
}
const eventType = supportsPushState ? 'popstate' : 'hashchange'
window.addEventListener(
eventType,
handleRoutingEvent
)
this.listeners.push(() => {
window.removeEventListener(eventType, handleRoutingEvent)
})
}
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
this.transitionTo(
location,
route => {
pushHash(route.fullPath)
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
},
onAbort
)
}
}
...
// 處理傳入path成hash形式的URL
function getUrl (path) {
const href = window.location.href
const i = href.indexOf('#')
const base = i >= 0 ? href.slice(0, i) : href
return `${base}#${path}`
}
...
// 替換hash
function pushHash (path) {
if (supportsPushState) {
pushState(getUrl(path))
} else {
window.location.hash = path
}
}
// util/push-state.js文件中的方法
export const supportsPushState =
inBrowser &&
(function () {
const ua = window.navigator.userAgent
if (
(ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
ua.indexOf('Mobile Safari') !== -1 &&
ua.indexOf('Chrome') === -1 &&
ua.indexOf('Windows Phone') === -1
) {
return false
}
return window.history && typeof window.history.pushState === 'function'
})()
HTML5History模式
類似的，HTML5History 類定義在 history/html5.js 中。
定義push原型方法，調用history.pusheState修改瀏覽器的路徑。
與此同時，原型setupListeners 方法對popstate進行了事件監聽，適時做 DOM 替換。
import {pushState, replaceState, supportsPushState} from '../util/push-state';
...
export class HTML5History extends History {
setupListeners () {
const handleRoutingEvent = () => {
const current = this.current;
const location = getLocation(this.base);
if (this.current === START && location === this._startLocation) {
return
}
this.transitionTo(location, route => {
if (supportsScroll) {
handleScroll(router, route, current, true)
}
})
}
window.addEventListener('popstate', handleRoutingEvent)
this.listeners.push(() => {
window.removeEventListener('popstate', handleRoutingEvent)
})
}
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
this.transitionTo(location, route => {
pushState(cleanPath(this.base + route.fullPath))
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
}, onAbort)
}
}
...
// util/push-state.js文件中的方法
export function pushState (url?: string, replace?: boolean) {
saveScrollPosition()
const history = window.history
try {
if (replace) {
const stateCopy = extend({}, history.state)
stateCopy.key = getStateKey()
history.replaceState(stateCopy, '', url)
} else {
history.pushState({ key: setStateKey(genStateKey()) }, '', url)
}
} catch (e) {
window.location[replace ? 'replace' : 'assign'](url)
}
}
transitionTo 處理路由變更邏輯
上面提到的兩種路由模式，都在監聽時觸發了this.transitionTo，這到底是個啥呢？它其實是定義在 history/base.js 基類上的原型方法，用來處理路由的變更邏輯。
先通過const route = this.router.match(location, this.current)對傳入的值與當前值進行對比，返回相應的路由對象；接著判斷新路由是否與當前路由相同，相同的話直接返回；不相同，則在this.confirmTransition中執行回調更新路由對象，并對視圖相關DOM進行替換操作。
export class History {
...
transitionTo (
location: RawLocation,
onComplete?: Function,
onAbort?: Function
) {
const route = this.router.match(location, this.current)
this.confirmTransition(
route,
() => {
const prev = this.current
this.updateRoute(route)
onComplete && onComplete(route)
this.ensureURL()
this.router.afterHooks.forEach(hook => {
hook && hook(route, prev)
})
if (!this.ready) {
this.ready = true
this.readyCbs.forEach(cb => {
cb(route)
})
}
},
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你平時填寫過的最復雜的表單是什么？調查問卷還是文檔信息錄入？如果一個表單字段內容巨多，結構多變，填寫耗時耗力，那你將如何設計你的表單，使之體驗更佳？
1. 業務復雜，功能較多；
不知道大家是否看過法律合同之類的文件，多則好幾籮筐，少也有厚厚一疊，類似的文檔如果進行線上結構化，勢必要同樣要花費巨大的人力去填寫表單，完成基礎信息的錄入工作，同時，由于錄入的時間不確定，流程不明確等問題，也制約著表單的填寫。
2. 流程較長，操作繁瑣；
多個不同表單之間的互有關聯又相互區別，填寫的時候需要來回查看以確認信息，查閱和填寫相互并行，操作繁瑣。
3. 字段較多，關聯項較多；
幾乎每一個字段都有對應的關聯項，每個單選字段的不同項決定不同的內容，同時，由于字段數量，層級劃分不明確，會使填寫的人失去定位，產生迷惑。
1. 內容分組，分步填寫；
根據業務內容分級，合理運用顏色、間距、字體大小、卡片層級等進行信息分級
2. 實時保存，避免數據丟失，提供草稿功能，避免任務中斷；
3. 字段分組，示意結構，聯動項隱喻；
4. 信息自動帶入，節省時間；
一般表單是與某項功能掛鉤的，信息會在多個入口錄入，因此在填寫長表單的時候，如果能從系統中自動獲取到數據，就可以自動為其填充，可根據業務場景，判斷是否讓其修改和更新。
5. 提供二次編輯功能，防止信息輸入有誤；
一般的長表單在涉及非審批流的時候，可以讓其無限二次編輯，如果是處于審批流，則需要根據業務場景限制其編輯次數或者限定其編輯規則（草稿可編輯，一旦提交則不可編輯）。
6. 提供多人協作編輯功能；
如果一個長表單，需要多個不同的業務域的人來填寫，那么需要協同編輯，并實時顯示編輯的人員信息，同時，為了避免信息丟失和編輯錯亂，在同一個表單下，同一時間應該限制只允許一個人進行編輯，等其提交完后，可允許其他人進行編輯。
7. 實時檢驗；
前端實時校驗字段輸入規則，后端統一校驗信息交換規則。
比如對于數字輸入框的校驗、電話號碼的校驗、身份證號的校驗，應該在前端實時完成，在鼠標離開焦點區域或定位到下一個字段的時候，提示其填寫有誤，這樣做的目的是減少后續修改的次數，在長表單下，統一提示其填寫錯誤會是一場災難。
在點擊保存并填寫下一步或點擊提交信息的時候，就需要跟后端交換數據，驗證錄入的信息，如果不匹配，則提示錯誤，并從上至下定位至相應的錯誤字段。
8. 做好填寫引導功能；
要通過多種方式，引導表單的填寫，
在開始填寫之前，簡要說明該表單的業務目標，大概需要花費的時間等；
開始填寫后，關于每個字段的特殊說明，都需要標注出來，重要的要顯示在頁面上，不重要的就收起在注釋符號中；
填寫的過程中，切記不要到最后才告訴用戶哪里出錯了，重要的信息一定要提示到位，否則一旦出錯，前功盡棄；
填寫完成后，引導其下一步的操作，或者返回至列表。
9. 詳情頁也需要注意信息分級
表單填寫完畢后的產出物就是詳情頁，詳情頁是需要瀏覽的，因此在設計詳情頁的時候，應該本著讓用戶瀏覽方便的原則去設計，需要注意以下幾個點：
結構清晰。是指不要將內容一股腦的全堆在頁面上，要做好信息的分類，同時，注意規劃頁面的層級。
設置快捷導航。如果一個表單是長且復雜的，那么其對應的詳情頁也會變得復雜和冗長，因此在頁面的右側或者頂部設置合理的快捷導航是很有必要的。
1. 提供快速返回頂部的按鈕；
快速返回頂部按鈕的使用要注意場景，如果你的頁面比較長，且沒有分組瀏覽的導航，那就需要設置快速返回頂部的按鈕，但是在存在分組瀏覽導航和頂部懸浮標簽的情況下，不建議使用快速返回頂部的按鈕，因為在填寫表單的時候，使用快速置頂的場景比較少。
2. 提供分組模塊收起展開功能；
當一個模塊混雜著各種信息的時候，單純的模塊分組已經無法處理它的復雜度了，因此需要收起高頻且信息量大的模塊，可以合理的減少頁面的復雜度。
3. 步驟提供信息填寫完成度提示；
步驟條可以單純的作為步驟指示器使用，也可以作為一個表單完成度的提示區域。
4. 重要說明性文字盡量顯示而非收起；
在填寫大量字段的表單時，閱讀表單內容和填寫表單同樣耗時耗力，如果我們將所有的提示信息隱藏在提示符中，一般情況下，用戶不會去查看，但是如果去挨個查看提示信息，則會多花費一個步驟去點擊或者懸停來查看提示信息，浪費了大量的時間，因此如果涉及到重要的提示信息，請直接展示在字段的后面，不要隱藏起來。
5. 產品內組件應該規范統一；
在后臺產品上，關于組件的規范統一，想必是人盡皆知的設計原則，無論是各類平臺型設計組件，還是各個公司自造的設計組件，保持統一和規范對產品設計有著重要的作用，在這里不贅述組件應該怎樣規范統一，因為無論是Ant Design還是其他設計語言，都有詳盡的關于組件的定義方法，我在這里講述一個產品設計更高層面或者更深層面的原因：
組件的規范統一并不僅僅是為了省時省力，而是為了使用戶在使用的過程中達到認知上的統一和行為上的統一，在進行高頻次的操作后，界面的流程或者組件樣式已大致在用戶腦海中形成固定印象，因此在操作相同類的流程時，用戶會有更多的掌控感，試想一下，如果你在操作人事相關的流程后，去填寫績效部分的內容時，發現一個迥異的界面或者彈窗，你肯定覺得這是不是哪里出錯了，甚至會懷疑這是否是同一個系統，目前大多數公司的管理系統經過多次縫縫補補，內部的跳轉邏輯已經異常感人，界面風格也大放異彩，但是使用起來卻無從下手，深感迷茫。
因此大到界面樣式，小到間距大小，產品設計的規范和統一應該是最基礎又不可缺少的原則。
6. 龐大的信息錄入，表單內部要分步填寫，外部可拆分成不同的表單分別填寫；
對付復雜的表單，你需要解決的主要問題并不是填寫方式或者頁面設計，而是信息分級和結構拆分，解決了這個問題，基本上就解決了業務問題，其余部分就跟我們常用的表單一致。
將復雜度降低并不意味著減少頁面的信息，而是通過設計師合理的信息劃分，降低視覺上的復雜度和流程上的復雜度，這樣才會達到當前場景下的「最佳解決方案」。
隨著互聯網信息化的深入發展，復雜是避免不了的，我知道大家都推崇簡潔的設計，但那只是對視覺和樣式的定義，而非對信息的定義，我們所處的世界是復雜的，行業更是復雜的，信息的復雜度與日俱增，想要處理復雜的信息，就需要從復雜中尋求規律，這規律與業務息息相關，
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
