2020年可以說是一個風險年，但更是一個機會年，全球各類資產都出現了大行情機會，市場的投資熱情再次被點燃。借著這股東風，在2020年年尾，我們開始了對公司金融產品的優化改造工作，希望通過改造提升產品的用戶體驗，配合來年的運營活動，提升產品的用戶數和活躍度。改造工作主要為優化開戶流程、提升社區氛圍、完善交易功能三個部分。后續我將通過系列文章對這次優化設計過程中的思考進行分享。
表單作為平臺與用戶聯系最為緊密的一環，良好的表單設計可以帶給用戶流暢自然的用戶體驗，保證用戶情緒的正向增長，而混亂無序的表單則會引起用戶的負面情緒，影響甚至阻礙用戶操作的完成，降低用戶對品牌好感度和信賴度。對于我們這樣的金融產品而言，產品內存在著如開戶表單、出金申請表單、調整杠桿申請表單等形形色色的表單，如何將這些表單整理歸納形成一套完整的表單設計體系，帶給用戶統一、高效且優質的填寫體驗，是我們這次表單優化的主要的任務。
系列文章中關于表單設計部分我將分為上下兩期來向大家分享，體系化表單設計（上期）主要介紹在項目中總結出的表單設計中的方法論，下期則是介紹方法論在我們項目中實際的應用，希望這次的分享能為你今后的表單設計提供思路與參考。
表單在我們工作、生活中的使用由來已久，在還沒有互聯網的年代，表單就已經是人們收集和存儲數據、信息的重要手段，并一直沿用至今。如體檢時填寫的體檢表、入職時填寫的入職登記表、銀行開戶時填寫的開戶表都是使用的這種印刷的紙質表單。它們身上有很多設計可以作為重要的參考，幫助我們優化 UI 中的表單元素。
表單是 UI 界面中最為常見的元素，它通常是用來搜集和呈現一些數據、信息和特定的字段。表單的應用極為廣泛，比如登錄應用時填寫賬號密碼、網上購物時完善訂單信息、OA系統中提交休假審批、修改個人中心信息時……都是在和表單發生互動。
表單的目的、內容、大小等雖然各有不同，但是表單的基本構成元素是相對固定的，在設計過程中，設計師需要合理組織這些元素，幫助用戶在填寫表單時，輕松愉快的完成，表單主要組成部分如下圖。
1.標簽：告訴用戶此處相應的輸入元素是什么
2.輸入區：可交互的輸入區域，根據字段類型使用相應的交互組件
3.占位符：對當前項進行額外的信息描述
4.前置圖標（可選）：描述文本所需的輸入類型和特征
5.后置圖標（可選）：對輸入內容進行控制，如：下拉的展開與收起、清空；
6.幫助（可選）：提供表單內容的注釋或輔助類容，如：說明、注意事項；
7.反饋（可選）：告知用戶當前操作可能或已出現的問題，如：提交成功、錯誤提示、網絡問題；
8.鍵盤（可選）：在文本編輯時需要使用鍵盤，如：設備系統鍵盤、應用內置鍵盤；
9.操作按鈕：操作按鈕是在表單的結尾，如：提交、下一步、清空所有信息。
在如今這個互聯網時代，我們幾乎每天都會接觸到形形色色的表單，作為用戶與產品鏈接的樞紐，表單設計的好壞會直接的影響產品的實際數據表現。好的表單結構清晰，交互合理，用戶能夠高效愉悅的完成表單填寫，為用戶節省了時間，同時也提高了自身產品的轉化。而差的表單往往信息邏輯混亂，填寫效率低，且容易讓人產生挫敗感而中途放棄，在無形中浪費掉了很多潛在商業機會。是什么造成了不同表單之間出現如此大的體驗差異，我們又該如何做才能設計出令用戶愉悅的表單呢？在實際項目過程中，總結出一套適用于移動端表單設計的路徑圖-通過做好五個步驟，設計出令人愉悅的表單。
合理的表單框架選擇是打造用戶友好型表單的基礎，在進行表單設計時，我們首先需要依照表單的使用場景和復雜程度，選用最為恰當的表單框架。確定好表單框架，也就決定了后續設計中表單信息如何組織以及呈現。我們將表單框架劃分為“錄入方式”、“標簽布局”和“按鈕邏輯”三個部分，在表單設計時通過對這三個部分的選用來確定最終的表單框架形態。
按照表單錄入方式的不同我們大體上可以將表單錄入方式分為“單步錄入”、“分步錄入”和“分級錄入”三種，在進行表單設計時需要根據實際情況選擇與使用場景匹配的錄入方式。
單步錄入是表單中最為常見的錄入方式，在一個頁面內呈現所有的錄入項，結構簡單，快速錄入、快速提交，適用于錄入項較少的表單。
相對于PC端而言，移動端手機屏幕尺寸較小，一份在PC端1-2屏就能完全展示的表單在移動端往往需要7-8屏。將一個需要7-8屏才能展示完整的表單放在一個頁面內讓用戶填寫，用戶容易產生抵觸情緒會造成表單完成率的降低。
為了提高用戶填寫效率，減少用戶的抵觸情緒，我們可以將一個冗長的表單拆分成多個步驟，分步錄入。通過拆分成一個個步驟，讓表單信息呈現更為清理有條理，并且能引導用戶逐步填寫完成表單錄入。
當表單處于以下4種場景時選擇建議選用分步錄入模式:
1.表單錄入項過多，在一個頁面內已經不能合理清晰的組織傳遞信息。
2.表單內容的錄入方式存在較大差異，不適宜在一個頁面內進行展示。
3.表單錄入項在業務上存在先后順序，只有先完成上一步字段錄入，才能夠進入下一步。
4.在業務上很重要的表單，為了讓用戶能夠沉浸、快速的完成表單填寫時。
分布錄入模式下步4種步驟導航選擇：
1.文字導航：當表單為2步錄入表單時，我們展示步驟條帶給用戶的引導意義并不大，通常這種情況下我們會選擇省略掉步驟條，只展示當前步驟名稱，給予用戶提示。
2.步驟條導航：當表單錄入步驟為3-4步時，我們可以在頁面頂部放置步驟條顯示所有步驟內容標題，用戶通過步驟條能夠對表單有一個清晰的預期。
3.雙層步驟導航：當表單錄入步驟大于4步時，受限于移動端屏幕尺寸，橫向上不夠容納步驟數太多的步驟條，這時我們可以其中某些關聯的步驟歸納為一個大步驟，形成雙層步驟導航。
4.進度條導航：當表單錄入步驟大于4步，又擔心雙層導航給用戶傳遞出表單極端復雜的印象，勸退用戶。這時我們可以使用進度條導航，用百分比進度條來展現表單填寫進度。
分級錄入大家可能相對較為陌生，分級錄入在B端產品中會有相對多見，一般運用于有明顯上下級關系的表單，如項目管理工具中新建任務表單，在新建任務的同時還能新建下屬子任務。又如客戶關系管理軟件中，新建訂單的同時新建下屬的訂單明細。我們可以將使用分級錄入模式的表單視為兩張表單，子表單添加的數據會回顯到主表單上。
標簽用于提示用戶需要輸入的是什么信息。合理的標簽布局結構，能夠提高用戶的閱讀效率，還能降低信息填寫時的錯誤率。常見的標簽布局形式有：左右結構、上下結構和浮動結構。不同的標簽布局都有各自的優點和缺點，我們需要根據項目實際情況來選擇最合適的標簽形式。
左右結構是目前最為常見的標簽布局形式，左右結構中標簽和輸入區域在一行內排布，其中標簽位于左側且居左對齊，輸入項位于右側有居左和居右對齊兩種對齊方式。
優點：節省縱向頁面空間，在移動端有限的頁面空間內能展示更多的錄入項。
缺點：標簽的長度無法確定，視覺上顯得參差不齊，表單的信息瀏覽和填寫效率一般，標簽橫向展示空間有限，對于多語言適配場景不太友好。
上下結構也是我們能夠經常在表單中見到的標簽布局形式，上下結構中標簽位于上方且居左對齊，輸入區域位于下方也為居左對齊。
優點：用戶的視覺瀏覽路徑相對于左右結構來說較短，擁有較強的信息瀏覽和填寫效率，標簽橫向展示空間充足，對于多語言適配場景友好。
缺點：占據縱向空間多，一屏內能展示的錄入項較少。
Material Design中文本錄入的標簽形式就是選用的浮動結構，在浮動結構中標簽和提示文字合二為一，正常狀態下，標簽位于輸入區域內部原本提示文案的位置，當用戶輸入時，內部的標簽就會上移為文本輸入讓出空間，完成填寫后標簽和輸入文案上下排列展示。
優點：結構簡單，視覺干擾少，信息瀏覽和填寫效率高。
缺點：填寫項過多時，表單信息傳遞不夠清晰。
內部結構相對于前面3種結構較為少見，比較長出現在登錄場景，在浮動結構中標簽和提示文字合二為一，正常狀態下，標簽位于輸入區域內部原本提示文案的位置，當用戶輸入時，內部的標簽就會消失，完成填寫后只展示輸入文案。
優點：結構簡單，視覺干擾少，聚焦于操作。
缺點：只適用于如登錄等錄入項極少的場景，一旦錄入項變多，由于錄入后不展示標簽，將導致用戶后續很難判斷輸入的信息是否準確。
按鈕作為表單的重要組成部分之一，合理的按鈕邏輯能夠為用戶順暢完成表單填寫提供幫助，表單的按鈕邏輯主要由按鈕的位置和按鈕的點亮邏輯兩部分組成。
按鈕在頁面中的位置情況主要有以下3種：
1.頂部按鈕：以文字的形式固定在頂部導航欄的右側，頂部按鈕尺寸較小，因為它所占空間有限，因此在操作上相對來說不便于點擊。所以這類頂部按鈕更適用于「編輯頁面」，需要用戶謹慎操作。
2.表單底部：按鈕跟隨表單放置于表單的最下方，根據表單內容縱向空間的大小而上下移動。因為表單內容較多時，容易下沉過多而導致按鈕不可見，所以將按鈕放置于表單底部更適用于當表單錄入項較少不足半屏的場景。
3.設備底部：操作按鈕常駐在設備底部展示，適用于表單錄入項過多的情況，在表單設計時可以盡量將必填項放置在表單前面，用戶填完必填項后就可以點擊操作按鈕提交或者進入下一步，而不用滑動到表單底部再進行操作。
1.當表單錄入項較少時，且有明確預期按鈕何時可用，可以先置灰主按鈕，完成必填項填寫后再點亮主按鈕。
2.當表單錄入項較多時，且用戶不清楚為什么按鈕不可以用，此時按鈕可以常亮，并在用戶點擊時給予反饋，告知錯誤原因。
在確定好表單框架以后，對于表單內容信息的進行有效的組織也尤為重要，特別是對于一些結構復雜、錄入項多的表單，如果不對信息進行組織，很容易顯得繁雜混亂，容易讓用戶在一開始就產生抵觸的情緒，甚至選擇放棄。那么如何合理有層次的組織信息呢？
我們在設計表單時潛意識里都想要從用戶那里獲取到更多的信息，表單中因此出現很多必要性較低的錄入項，表單也因此變得冗長，讓人第一眼就生出「好多信息需要填，好麻煩」的沉重感，在填寫表單之前就萌生退意。我們在進行表單設計時需要保持克制，聚焦于表單的核心任務，讓表單盡量短而美。那么我們要如何為表單減負，可以嘗試以下方法。
表單中每多一個錄入項需要填寫，都有可能會失去一部分用戶好感度甚至流失一部分用戶。在設計時我們需要判斷某個字段信息對于用戶來說是否有必要在表單中進行填寫，盡可能的刪減掉額外的無用字段。例如注冊表單，如讓用戶使用郵箱注冊，那么用戶的姓名字段是否是注冊的必選項？如果不是必選項是否可以在之后的信息完善中進行填寫。
在表單中時有一些信息他們本身緊密相關，我們完全可以視情況將其合并為一個錄入項，來減少不必要的錄入操作，達到簡化表單，提升錄入效率的目的。合并錄入項要結合實際的使用場景以真實的提升表單體驗為目的，而不是一味的追求表單的最簡化。
根據用戶使用數據，適當將使用頻次不高、或者提供給專業用戶的高級表單項隱藏起來。例如一份表單中有一個填寫項，90%的用戶都不需要填寫，那么默認收起。保持表單的簡潔，讓絕大多數用戶快速完成，避免大量的表單給用戶的焦慮，而又滿足了小眾用戶的需求。
根據沉沒成本的定義：人們在做決策時，受到了自己過去所投入的時間、金錢、精力等因素的干擾，對于先前付出了投資的事情有更強的忠誠度和繼續投資的意愿。進行流程設計時也可以遵循這個原理，將容易完成的表單放在前面，這樣做有3個好處：
1.簡單的表單更容易激起用戶的填寫欲望，用戶會迫不及待地去完成。相反，用戶一開始就看到過于復雜的表單，很容易被嚇到，從而放棄整個任務。
2.用戶通過完成簡單的表單，可以增加自信心，即使后面的表單變復雜了，用戶也更有耐心去完成。
3.當用戶將前面簡單的表單完成后，放棄整個表單的機會成本就變高了，即使后面碰到較難的任務，用戶放棄的幾率也會降低。
當我們我們設計的表單字段內容較多時，需要合理的對字段信息進行分組，這樣整體看起來更加有組織性。接近性（格式塔原理）原則告訴我們： 相互靠近的物體被認為比相互距離較遠的物體更有關聯性，這樣能使設計界面層次有序，視覺清晰，減少視覺噪音。分組時需要注意：
1.內容屬性相近或有關聯性的放在一組。
2.根據信息的重要性及難易程度排列分組，將選填的表單內容靠后。
在表單錄入設計階段，我們需要明確認識到一點，用戶在面對一份表單時往往沒有我們想象中的那么有耐心，復雜繁瑣的錄入操作可能會直接勸退用戶。我們需要做的就是化繁為簡，思考如何給用戶減負，讓用戶簡單高效的完成表單錄入。表單錄入操作提效有一些切實可行的方法，下面請我將一一向分享。
對于用戶而言，填寫信息永遠都不是一件有趣的事情，在對用戶足夠了解的前提下，我們可以選擇為表單中的部分錄入項提前設置合理的默認值，節省用戶的操作時間。默認值的設置不是一個隨性發揮的過程，而是基于用戶行為和數據的理性判斷，并且也不是每個字段都適合設定默認值。關于如何設置合理的默認值，什么字段適合設定默認值，下面幾點可供大家參考：
在一些業務場景，會使用到用戶之前在其它表單中已經錄入的信息，此時在填寫新表單時，可以默認帶入之前的數據。
如果用戶正在填寫的內容有相關的關聯數據，可以默認帶入。如我們在填寫訂單時可以默認帶入該訂單關聯的商品基礎信息。
基于移動端設備的能力，我們可以在用戶開放權限的情況下獲取一定的用戶信息（位置信息、電話區號、運動數據等），在特定情況下默認填寫，如滴滴通過GPS定位自動幫用戶填入上車位置。
像電話區號、證件類型、國籍等用戶錄入結果相對固定的字段，可以根據情況提設置合理的默認值。
相較于PC端而言，移動端設備屏幕尺寸較小，虛擬按鍵的輸入效率遠不及實體鍵盤，在移動端手動輸入的成本較高。因此，為了打造便捷優雅的操作體驗，移動端表單需要盡量減少用戶的手動輸入。以下方法可以減少手動輸入。
聯想輸入是給予用戶輸入字段的自動補全功能，用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇，減少用戶的輸入成本，提高用戶操作效率。
對于表單填寫過程中可以固化選擇的信息，應讓用戶進行選擇操作以代替手動輸入，盡可能地讓用戶減少輸入成本。
一份用戶可能會多次填寫的表單，我們可以提供用戶的歷史輸入項供其選擇，如滴滴的打車頁面會將我的常用目的地放置在目的地輸入框的旁邊供我快速錄入。
一些新型的交互組件的使用能夠簡化信息錄入的操作，例如滑塊組件等。
在填寫表單時如果填寫項需要頻繁的頁面跳轉會使得整體的填寫效率變低，增加用戶的操作成本。在進行表單設計時應盡量規避這種頻繁的頁面跳轉，選用更流暢靈活的交互方式。
在網頁端表單設計中，用戶在表單填寫中需要對選項進行選擇時，常用的交互形式是在選擇器的下拉列表中進行選項的二次點擊。而在移動端設計中，觸發選擇器后的二次點擊會增加用戶的填寫成本。所以在設計時，當選項少于8時，在表單中直接顯示所有可選項，當選項超出過多時則在列表浮層中進行選擇。
在表單填寫中我們期望用戶保持專注，盡量避免產生引導用戶離開當前頁面的填寫交互，這種交互跳轉很容易打斷用戶固有的行為軌跡。因此運用浮層、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式。
對于一些標準證件類信息的錄入，可以通過OCR識別文件內容。當用戶上傳圖片后，運用圖像識別技術提取關鍵信息并自動填入結果。值得注意的是，如果圖片不清晰或存在水印，將大大降低識別準確度。此時應提供修正渠道，讓用戶可以逐一校對并修改文本內容。
短信驗證碼升級方案。直連三大運營商，一步校驗手機號與當前SIM卡號一致性。優化注冊/登錄/支付等場景驗證流程，有效提升拉新轉化率和用戶留存率。不做數據加工與號碼精準營銷，保護用戶隱私。
為了避免讓用戶頻繁的跳入跳出相同類型的輸入項，首先整合表單的信息字段，將同類型的字段進行合并，同時結合輸入控件，設計聯動式組件，讓用戶在表單輸入時更加高效。
設計不是簡單的元素拼湊，深入下去，有很多細節需要推敲，細節應該是含蓄的，包含在整體之內。好的細節設計不容易被用戶的眼睛直接發現，但是會讓用戶與產品的交互過程變得通順、舒適，概括來說就是潤物細無聲。對應到表單設計上，我們需要通過表單設計中的細節把控，讓表單錄入這件事變得簡單、高效。
當表單中同時出現必填項和選填項時我們需要對其做出區分，避免用戶不知道哪些字段必須填寫、哪些字段可以選擇性填寫。沿用通用符號習慣，在表單中我們往往使用 * 號來標記必填項。但是當表單中的必填項多于選填項時，大量的 * 號會增加用戶的認知負擔，面對這種情況，我們可以使用暗提示來標記選填項幫助用戶識別。
如電話號碼、銀行卡號這類有數字組合規律的號碼字段，我們可以沿用它們在線下的數字組合規律，通過空格對號碼字段進行劃分，幫助用戶校驗和閱讀。
出于保護用戶賬號安全考量，我們在進行密碼輸入時通常使用隱暗文字的方式來保護用戶賬戶安全，但是暗文字的顯示方式會讓用戶無法確認密碼信息。因此我們可以在輸入時，讓輸入字段短暫顯示，保持1秒然后再轉變為暗文字，這樣既可以讓用戶明確內容，也保證了用戶的賬戶安全。
我們在進行表單設計時，輸入區域的長度要符合心理預期，需要預判填寫內容長度來確定輸入區域的長度。這樣不僅在體驗上一致，而且在視覺體驗上更加愉悅。
用戶應該對他們的操作所帶來的結果非常自信，使用“提交”、“注冊”、“立即支付”、“創造賬戶”等確定性文案來描述用戶將采取的操作。
報錯信息應當一目了然，從用色、圖標到文本都應當起到高亮的效果，而且報錯信息應當靠近輸入框，而非表單的底部或者頂部或者按鍵旁邊。
在設計主要由文本輸入框構成的表單頁面時，要考慮鍵盤出現可能會遮擋輸入框的情況，我們需要把控件放在scrollView上，當鍵盤會遮擋輸入框時,則表單滾動。
對于異常情況不能只是冷冰冰的告知失敗，這樣容易給用戶帶來挫敗感，且缺少下一步操作指引。錯誤反饋不應該只著眼于結果，錯誤反饋的闡述角度應該是引起用戶關注、讓其快速了解出錯情況，并指導如何處理。
經過前面幾個步驟，表單整體形態已經確定，最后一步我們需要從整體體驗的角度對表單進行完善和調整。包含表單的容錯性考量、表單流程閉環的打造、視情況而定的趣味性設計。
即便你的產品90％的時間都運行良好，但是如果在用戶需要幫助時置之不理，他們是不會忘記這一點的。——《Getting Real》
容錯性概念源于計算機領域，容錯性是指計算機系統在發生故障的情況下，依然能夠保證系統正常運行。計算機這種保證系統正常運行的能力也被稱為容錯能力。延伸到互聯網產品設計領域，容錯性的范疇更為寬泛，包括降低用戶操作的出錯率、及時提供糾錯幫助、提供解決方案等內容。
容錯設計與用戶體驗息息相關，我們在表單頁面設計時也需要進行容錯性考量，盡量避免用戶錯誤操作的出現。當用戶出現錯誤操作時，幫助用戶識別、診斷，及時反饋問題所在，并提出有效的解決方案，幫助用戶快速從錯誤中恢復。讓表單填寫流程更順暢，給用戶帶來更優的用戶體驗，關于表單容錯性設計可以從以下幾個方面來進行。
引導和提示要突出表現，從而引起用戶關注，確保用戶在操作前能注意到引導或提示信息。引導與提示用語要簡單且易于理解，當重要或操作不可逆時，要詢問用戶讓其知道這樣操作的后果。
如何從設計上避免用戶出錯，限制是一種非常必要的方式，可以通過限制用戶的某些交互操作或者增加某些操作的難度來對用戶操作進行限制避免用戶出錯。
當用戶出現填寫錯誤時，及時的反饋錯誤并提供糾錯幫助，出錯信息應當用清晰準確且用戶易于理解，能夠對用戶解決當前問題提供建設性幫助。
允許用戶犯錯，操作者能歸夠撤銷以前的指令，幫助用戶在犯錯以后能夠快速回到正確狀態。
表單的終點并不是提交，一個好的表單設計需要兼顧考慮用戶填寫前的引導、填寫時的及時校驗與幫助、還有填寫后的整體流程體驗，為用戶提供完整的、形成閉環的表單填寫體驗。
舉個例子，當我們設計的表單需要用戶準備如身份證、銀行卡這類的證件時，需在表單填寫前告知用戶，避免用戶填寫途中才發現證件未準備，導致用戶填寫流程中斷。再如，用戶在填寫完證券開戶表單后，其實還需要通過審批后用戶才能進行入金交易等操作，這時我們需要一個結果頁來告知用戶表單提交的結果狀態和下一步的操作指引。
表單設計并不一定需要是嚴肅且正式的，在表單設計時可以嘗試引入一些趣味性的元素，研究表明，更大的文字輸入框、適度的留白空間、優雅的動畫效果、趣味性界面設計會讓人心情愉悅更有填寫的欲望。
例如bilibili的登錄頁面，在用戶輸入賬號時上方的卡通形象是睜眼的，當切換到輸入密碼或者驗證碼時卡通人物會有一個捂住雙眼的動作十分有趣，這樣的趣味性設計能夠在一定程度上緩解用戶在填寫表單時的焦慮情緒，并增加對于bilibili保護賬號安全的信賴感。
以上就是我對于移動端表單設計的一些歸納和總結，過往的項目中自己設計大量的表單頁面，走了不少彎路犯了不少錯誤，但也通過項目不斷的反思總結，收獲不少的關于表單設計的經驗。在這里將項目中關于表單的一些思考和經驗分享出來，總結出自己的一套關于表單設計的方法論，也是希望能夠對正在進行表單設計或者即將進行表單設計的你提供一點點參考與幫助。
表單設計我將分為上下兩期來向大家分享，體系化表單設計（上期）主要介紹在項目中總結出的表單設計中的方法論，下期則是介紹方法論在我們項目中實際的應用，也希望你能夠持續關注。
文章來源：優設 作者：Yone楊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近一直在惡補關于結構化思維的知識，作為一名視覺設計師的我，經常使用發散思維的方式來工作和思考。雖然在工作中常常能冒出很多點子和想法，但很難將它們組織成一個清晰完整的解決方案，隨著工作時間越長，發現這種思維能力會讓自己在工作中經常遇到這些困惑：
如果你也有同感，建議要開始學習結構化思維，其實結構化思維是一個職場人非?；A的能力，掌握這項能力能讓我們在職場上少走很多彎路，但是這種能力不容易學會，是需要在平時刻意訓練才能漸漸掌握。
設計師隨著年齡的增長，除了保持硬核的專業技術能力之外，更重要的是不斷提升自己的思維能力，接下來我結合自己的這段時間的思考和實踐給大家做些分享：
本篇文章大綱如下：
先來做一個小游戲，大家試下用 3 秒鐘時間速記下圖，然后說出圖上有多少種顏色。
是不是覺得有點記不住？如果圖片換成這樣呢？答案是不是一目了然？
圖二將顏色進行整理分類成暖色系和冷色系，并且顏色按照從深到淺的規律排序，更容易讓人理解和記憶，因為它更加符合我們人類大腦思維的 3 條基本規律：
結構化思維定義
結構化思維是當我們面對問題的時候，通過某種結構，從多個側面進行思考，拆成一個個能解決的部分，并且采取恰當的手段系統性地解決問題，是一種從無序到有序的思考過程；也是從整體到局部，并且層級分明的思考模式。
結構化思維可以真正的幫助我們去思考和表達，作為設計師的我們在日常工作中非常忙碌，被很多瑣碎的項目搞得自己手忙腳亂，因此學會用結構化思維有以下四大價值：
1. 理清大腦思路
更系統化的全局思考，讓自己的設計思路經得起推敲
2. 高效解決問題
更有效率和節奏的解決手上問題，減少讓自己重復勞動
3. 清晰表達溝通
與項目成員的溝通更順暢，讓他人更準確理解自己所表達的內容
4. 構建知識體系
通過碎片化知識進行結構化整理，逐漸建立自己的知識體系
講了這么多，那應該怎么掌握這種思維能力呢，其實我們很早就接觸到結構化思維了，比如學習寫作文時的“總分總”結構，解答數學題時先求什么再求什么，都屬于結構化思維的范疇。
結構化思維分為兩種框架，第一種是自上而下的拆解法，適用于日常思考問題和表達溝通上；第二種是自下而上的歸納法，適用于歸納總結，輸出文章。
自上而下的結構原理來自金字塔結構，有 4 個特點：結論先行、以上統下、歸類分組和邏輯遞進，下面用一副簡單的圖來表示結構。
如何應用
1.結構化思考問題
舉個例子大家會更明白些，比如最近接到一個設計需求是進行官網的改版，那我們利用結構樹進行自上而下思考，從了解現狀-深入分析-解決方案進行結構化思考。
了解現狀是先思考改版的背景以及目標，深入分析是要清晰目前官網的問題是什么？競品是怎么做的？解決方案拆解為交互體驗層面和視覺表達層面應該怎么做？
通過前期這三步的結構化思考，讓自己大腦捋順思路，就更清楚該怎么進行下一步了！
2. 結構化表達溝通
比如我們平時輸出了多個設計方案時，需要跟產品闡述設計方案 A 更好，那應該怎么清晰的表達呢？
同樣利用結構樹，第一步先表達自己的結論，再給出更合適的理由，然后逐步闡述支持理由的每一個事實依據。用結構化的方法表達出來，讓同事也更清楚自己的想法和設計思路！
當手上有一堆信息卻毫無頭緒時，而且不清楚該用什么框架的時候，通過下面四個步驟可以把信息進行結構化整理。
從收集信息-歸類分組-提煉結構-完善框架四步組成，像剛才開始玩的小游戲就是用這四步進行總結和完善，我概括抽象成以下這四步方法：
可以看到從一開始各自灑落零散的信息到逐漸清晰的結構化信息，這就是自下而上歸納法的神妙之處。當然我舉例的是比較概括性的模型，具體可以通過自己工作中的真實案例進行不斷的練習。
結構化思維是每一個設計師都必備的，今天的小分享更多是一個拋磚引玉，剩下的需要大家真正實際應用到工作和生活中，大家平時跟產品溝通交流，項目匯報，撰寫文章都逐漸用結構化思考的方法，久而久之你會發現處理更復雜的事情都游刃有余，事半功倍！
文章來源：優設 作者：PSERIC
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著大數據的興起，數據價值的不斷挖掘，圖表作為數據呈現與分析的有效手段，正扮演著越來越重要的角色。我們在進行 B 端平臺設計時也在思考：如何讓圖表清晰的傳達信息，同時帶來美觀的視覺感受。
為了達到清晰傳達和視覺美觀的目標，我們結合實際項目，進行大量探索及思考，梳理總結了一套適用于 B 端后臺類產品的圖表設計思路及方法，涵蓋了曲線圖、柱狀圖、餅圖、雷達圖、漏斗圖等各類常用圖表類型。
圖表能夠承載大量數據信息，同時視覺元素較多，如果只是憑借設計師的審美喜好進行視覺設計，沒有整體信息讀取考量，可能會導致重要信息未能凸顯，降低用戶讀取效率。
為清晰傳達信息，進一步提升讀取效率，我們采用元素重要程度與視覺強度相綁定的方法。依據元素重要程度，將圖表元素分為三類，分別為“底層元素”、“中層元素”和“頂層元素”，并依據不同視覺強度分別設計三類元素。底層元素最弱，頂層元素最強。通過這種方法，梳理圖表元素的前后關系，能夠清晰把握元素視覺層次，保證信息傳遞效率。
1. 底層元素設計
在各類圖表中，我們把輔助說明數據的軸線、刻度等定義為底層元素。為了減少視覺干擾，最大程度突出主圖形，底層元素全部使用淺灰色進行設計。我們發現，當元素與背景顏色的明度對比在 1.2:1 時，人眼較難看到元素；當對比度在 2.0:1 時，視覺強度過強，易吸引用戶注意力。通過元素視覺強度的調研及視覺嘗試，最終確定元素與背景對比度在 1.6:1 左右，視覺強度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀，只在需要查看時可以被發現。
2. 中層元素設計
中層元素的內容包括數據圖形、數據線段等承載主要數據信息的元素，是圖表中表達數據的關鍵元素。與底層元素相比，中層元素采用更低明度與更高飽和度的數據色來表現，使元素從頁面中凸顯出來，保證可讀性。同時在樣式上適當加入漸變、描邊等樣式，豐富視覺層次，帶來美觀的視覺感受。
3. 頂層元素設計
我們把頂層元素定義為圖表高亮信息，內容包括懸停樣式、懸停后的詳細數據說明等。在設計上為保證視覺樣式突出，使用深灰色、強調色等強對比度樣式，并輔以動畫、投影等手法保證明顯的視覺強調效果，保證頂層信息最有效的傳達給用戶。
4. 最終效果
通過層級梳理，并綁定元素重要程度和視覺強度的方法，設計后圖表主次信息均按重要程度進行對應視覺強度的展示，讓用戶能夠在第一時間接收到最重要的信息，提升信息讀取效率。
圖表排版是指各元素在圖表中的尺寸及布局等，對于 B 端后臺類產品來說，不同排版對用戶使用體驗造成較大影響。如何建立一套合理的規范保證用戶的使用體驗？我們經過大量討論推敲，梳理出一套針對 B 端后臺類產品的排版規則，力求保證用戶圖表的使用體驗。
1. 圖表尺寸
圖表尺寸指圖表整體長寬高。在項目中我們發現不同尺寸的圖表對數據展現效果影響巨大，例如巨量數據的圖表擠在名片大小的區域例顯示，這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環視”、“詳情分析”三類典型場景，并制定了“迷你圖”、“中號圖表”、“大號圖表”三類尺寸，針對不同尺寸優化圖表的信息展示密度，以達到高效讀取信息的目的。
“迷你圖”尺寸最小，舍棄了 Y 軸等不必要信息，利用小面積展示最關鍵的圖表信息，并控制數據密度，保證信息高效讀取。
“中號圖表”尺寸受限，限制坐標軸刻度數量和數據的密度，例如曲線圖數據點不高于每 4 像素 1 個數據點，Y 軸坐標刻度不超過 5 個，以確保信息密度不過載，這類圖表尺寸通常用在針對某大類內容進行多方面檢視時。
“大號圖表”尺寸最大，不限制數據信息密度，給予最全最詳細的展示，這類尺寸通常用在數據詳情頁等詳細分析場景中。
最后考慮到多圖表混合排列時，餅圖、地圖等大面積填色圖表，相較折線圖等描邊型圖表，視覺感受更加膨脹。我們縮小了填色類圖表的實際高度，保證多種圖表混合排列時，視覺感受的均衡。
2. 坐標軸
坐標軸在圖表中出現的頻率較高，那么坐標軸常見的設計問題有哪些呢？
第一是橫縱坐標軸的刻度出現過密情況。
如果坐標軸所承載的是連續數據（連續數據指可量化的，連續不斷的，在區間內可任意取值的數據，如時間、金額、人數等），設計師可自行增減刻度數量以保證視覺舒適度。如果承載是離散數據（離散數據指不可量化的，無關聯的，不可在區間內任意取值的數據，如分類、軟件版本、省份等），可采取增加坐標軸縮放功能解決。
第二個常見問題是刻度的說明文字過長。
如果是 X 軸（橫軸）文字過長，除了在可控范圍內減少刻度，還可采取文字傾斜 45°~90°的辦法(如文字全部為中文，可用豎排代替傾斜 90°)，緩解信息過密看不清的情況。
如果是 Y 軸（縱軸）文字過長，需聯合研發一起調整數據的單位，比如把“元”調整為“百萬元”。
如果不能調整，那就要根據所使用的圖表庫有針對性調整。例如常用的 Echarts 圖表、D3 圖表等開源圖表庫，需要提前預估刻度文字長度并預留出來，否則刻度文字可能會被頁面裁掉而不能完全顯示。如你是用的是 AntV 等可自適應的圖表庫，則不必提前處理，圖表庫會自動按刻度長度進行整體調整。
3. 圖例
圖例作為圖表中不可或缺的部分，在各類圖表庫中位置不盡相同，由于不同圖表樣式差異很大，圖例的位置需整體考慮并適當布局擺放，但在同一產品或頁面內，過于隨意的擺放圖例，會導致頁面統一性較差，同時增加用戶的瀏覽成本。我們團隊所負責的 B 端商業產品矩陣，作為面向用戶的產品集合，產品間聯系非常緊密。過于靈活隨意的圖例擺放不利于用戶對于圖表的瀏覽。為解決此問題，我們基于業務特點，針對 B 端商業產品矩陣制定了圖例布局指導原則。
我們以提升屏幕信息密度為目標，分析不同場景的頁面排布，制定了頂部和右側兩種較為寬松的指導原則，供設計師在沒有明確的更優方案時選用。
當圖表是左右兩端對齊的類型，例如折線圖、柱狀圖時，建議將圖例放置在圖表頂部。這樣能結合標題等其他元素進行統一排布，減少占用空間。當圖表本身左右都有空余空間時，例如餅圖，建議將圖例放置于圖表的右側。也能夠節省頁面的空間。
色板作為常見的數據表達手段，能夠利用不同顏色明確體現分類信息、數值高度、狀態信息等。但目前市面上鮮有專業用途圖表的配色工具。我們經過大量探索嘗試，梳理總結出圖表色彩的兩個關鍵維度：辨識度與統一性。既需要顏色間突出強烈可清晰辨別，又需要顏色整體能形成統一風格，以達到清晰傳遞和美觀的目標。如何平衡辨識度與統一性，是我們遇到的難題。
1. 辨識度
辨識度在圖表中有兩方面：顏色與頁面底色的辨識度，各顏色之間的辨識度。對于第一種，我們采用控制顏色的明亮程度來確保色彩辨識度，尤其對于黃色、青色等本身較亮的顏色，降低顏色的明度，確保在淺色背景下顏色可辨識。
對于第二種也就是各顏色之間的辨識度，通過實驗發現單純的顏色色相變化，例如紅色與橙色的區分，人眼不容易分辨。所以采用了色相變化+明度變化的方法，即深紅色與亮橙色，深藍色與亮紫色等，這樣用戶能在第一眼就明確分辨，保證顏色間的辨識度。最終把顏色映射到色彩空間的三維坐標中，運用歐幾里得距離公式測算顏色間的距離長短，來衡量各顏色間色差數值。顏色間距離越遠代表色差越大，利用數據輔助衡量辨識效果。
2. 統一性
色彩統一性的作用在于確保圖表整體風格一致，色彩搭配舒適，從而帶來美觀、統一的視覺感受。為達目的，我們首先提煉商業產品設計風格為明亮、強對比，其次把設計風格轉化為色彩數值。經過實驗，把顏色明度限制在 50%-70%，把飽和度限制在 75%-85%，并在區間內不斷波動。這樣既保證了色彩視覺感受的統一，各顏色間又能夠有清晰的辨識度。
3. 顏色量化與工具
量化顏色，將色彩轉化為數值，利用數值來驗證設計師的「感覺」，能夠保證方案合理性，保證設計質量。但通過嘗試，我們常用的色彩模式均不能科學合理的量化顏色。通過查閱大量資料，我們最終決定以小眾的 HCL 色彩模式來衡量色彩。其中 H 表示色相、C 表示飽和度、L 表示明度。HCL 區別于傳統的 RGB 或 HSB 模式，它能夠將人眼對顏色的感知精確的量化為數值，例如黃色相比藍色明度更高，都能如實的反饋到數值上。也由于此特性，HCL 模式在誕生距今不到 20 年間，已被一些先鋒設計師用于數據可視化的呈現中。
但是 HCL 作為小眾色彩模式，目前設計軟件鮮有支持，造成了 HCL 色彩不直觀、不方便調色等的問題。為解決此問題，我們已初步完成智能配色程序，只需輸入品牌色，就能自動生成圖表色版，并在風格上與品牌色匹配，達到整體色彩的統一。我們也將一套調配好的色板及 HCL 實用小工具附在文末，幫助大家直觀的查看和使用 HCL 模式顏色。
數據價值就像不為人知的寶藏，隱藏在一條條枯燥晦澀的數據背后。而圖表則是開啟寶藏的鑰匙，是發掘數據價值的強有力武器。通過對圖表的不斷探索優化，我們希望能夠最大化數據的價值。通過圖表，讓數據最直觀的展現；通過圖表，讓其背后的規律浮出水面被人探知；通過圖表，讓 B 端不再有難懂的數據。
附：色板及 HCL 工具
文章來源：優設網 作者：百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
注：服務器為CentOS 7.3.1611，使用Xshell6 + Xftp6工具完成服務器遠程操作
通過Xshell連接服務器成功之后就可以開始以下工作
yum remove nodejs npm -y
然后手動進入以下目錄刪除相關文件
進入 /usr/local/lib 刪除所有 node 和 node_modules文件夾
進入 /usr/local/include 刪除所有 node 和 node_modules 文件夾
進入 /usr/local/bin 刪除 node 的可執行文件
https://nodejs.org/en/download/
cd /usr/local/
wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz
xz -d node-v10.16.0-linux-x64.tar.xz
tar -xvf node-v10.16.0-linux-x64.tar
mv node-v10.16.0-linux-x64 nodejs
cd nodejs
ln -s /usr/local/nodejs/bin/node /usr/local/bin/node
ln -s /usr/local/nodejs/bin/npm /usr/local/bin/npm
如果不小心輸錯了路徑，重新創建會提示：‘ln: 無法創建符號鏈接"/usr/local/bin/npm": 文件已存在’，輸入rm /usr/local/bin/npm命令清除后可以重新創建
node -v
npm -v
npm install -g cnpm
ln -s /usr/local/nodejs/bin/cnpm /usr/local/bin/cnpm
cd /var/www/
注：如果沒有www目錄就在var目錄下輸入命令mkdir www手動創建一個，并進入到www目錄
mkdir demo
cd demo
npm init -y
注：這里的-y意思是省略創建過程中一直輸yes的步驟
cnpm i express -D
mkdir app.js
const fs = require('fs'); //文件模塊 const path = require('path'); //路徑模塊 const express = require('express'); //express框架模塊 const app = express(); const hostName = '11.22.33.44'; //ip const port = 9999; //端口 app.use(express.static(path.resolve(__dirname, './dist'))); // 設置靜態項目訪問路徑(此處的dist為webpack打包生成的項目文件夾名稱) app.get('*', function(req, res) { const html = fs.readFileSync(path.resolve(__dirname, './dist/index.html'), 'utf-8'); // 設置所有訪問服務請求默認返回index.html文件 res.send(html); }); app.listen(port, hostName, function() { console.log(`服務器運行在http://${hostName}:${port}`); });
npm run build
生成的dist文件夾就是我們需要部署到服務器上的項目
node app.js
如果能正常訪問項目地址表示已經搭建成功。
請求后端接口跨域方案請見：
跨域代理方案1：Nginx使用教程
跨域代理方案2：Nodejs 中使用http-proxy-middleware實現代理跨域
在xshell里用node默認的啟動方式有一個缺點，xshell退出后nodejs項目便會停止
使用pm2這個托管工具可以很好的解決這個問題，而且當代碼有更改時會自動重啟服務更新
1.首先多按兩次ctrl +c結束之前的運行程序，接著輸入下面的命令安裝pm2并創建軟鏈接
cnpm install pm2 -g
ln -s /usr/local/nodejs/bin/pm2 /usr/local/bin/pm2
2.然后輸入下面的命令啟動托管任務，abc為托管項目定義的名稱
pm2 start app.js --name abc
以下為pm2常用命令說明
| 命令 | 功能 |
|---|---|
| pm2 start app.js --name abc | 啟動(--name為定義任務名稱的指令，abc為任務名稱值) |
| pm2 start app.js --watch | 啟動( --watch為監聽應用目錄的變化的指令) |
| pm2 restart app.js | 重啟任務 |
| pm2 stop abc | 結束(abc為任務名稱或id) |
| pm2 list | 查看所有任務列表 |
pm2基本功能命令
| 功能 | 命令 |
|---|---|
| 啟動進程/應用 | pm2 start bin/abc 或 pm2 start app.js |
| 重命名進程/應用 | pm2 start app.js --name abc |
| 添加進程/應用 | pm2 start bin/abc --watch |
| 結束進程/應用 | pm2 stop abc |
| 結束所有進程/應用 | pm2 stop all |
| 刪除進程/應用 | pm2 delete abc |
| 刪除所有進程/應用 | pm2 delete all |
| 列出所有進程/應用 | pm2 list |
| 查看進程/應用詳情 | pm2 show abc 或 pm2 describe abc |
| 查看進程/應用資源消耗 | pm2 monit |
| 查看進程/應用日志 | pm2 logs abc |
| 查看所有進程/應用日志 | pm2 logs |
| 重新啟動進程/應用 | pm2 restart abc |
| 重新啟動所有進程/應用 | pm2 restart all |
pm2使用教程參考鏈接：
https://www.cnblogs.com/chyingp/p/pm2-documentation.html
https://www.jb51.net/article/113398.htm
轉自：csdn。作者：lihefei_coder
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本文由小芭樂發表
首先舉一個例子：
模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節流的效果，這里附上完整可執行代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>沒有防抖</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模擬ajax請求 function ajax(content) { console.log('ajax request ' + content) } let inputNormal = document.getElementById('normal'); inputNormal.addEventListener('keyup', function (e) { ajax(e.target.value) }) } </script> </head> <body> <div> 1.沒有防抖的輸入： <input type="text" name="normal" id="normal"> </div> </body> </html> 效果：在輸入框里輸入一個，就會觸發一次“ajax請求”（此處是console）。
沒有防抖和節流
缺點：浪費請求資源，可以加入防抖和節流來優化一下。
本文會分別介紹什么是防抖和節流，它們的應用場景，和實現方式。防抖和節流都是為了解決短時間內大量觸發某函數而導致的性能問題，比如觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。但二者應對的業務需求不一樣，所以實現的原理也不一樣，下面具體來看看吧。
在事件被觸發n秒后再執行回調函數，如果在這n秒內又被觸發，則重新計時。
(1) 用戶在輸入框中連續輸入一串字符后，只會在輸入完后去執行最后一次的查詢ajax請求，這樣可以有效減少請求次數，節約請求資源；
(2) window的resize、scroll事件，不斷地調整瀏覽器的窗口大小、或者滾動時會觸發對應事件，防抖讓其只觸發一次；
還是上述列子，這里加入防抖來優化一下，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加入防抖</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模擬ajax請求 function ajax(content) { console.log('ajax request ' + content) } function debounce(fun, delay) { return function (args) { //獲取函數的作用域和變量 let that = this let _args = args //每次事件被觸發，都會清除當前的timeer，然后重寫設置超時調用 clearTimeout(fun.id) fun.id = setTimeout(function () { fun.call(that, _args) }, delay) } } let inputDebounce = document.getElementById('debounce') let debounceAjax = debounce(ajax, 500) inputDebounce.addEventListener('keyup', function (e) { debounceAjax(e.target.value) }) } </script> </head> <body> <div> 2.加入防抖后的輸入： <input type="text" name="debounce" id="debounce"> </div> </body> </html> 代碼說明：
1.每一次事件被觸發，都會清除當前的 timer 然后重新設置超時調用，即重新計時。 這就會導致每一次高頻事件都會取消前一次的超時調用，導致事件處理程序不能被觸發；
2.只有當高頻事件停止，最后一次事件觸發的超時調用才能在delay時間后執行；
效果：
加入防抖后，當持續在輸入框里輸入時，并不會發送請求，只有當在指定時間間隔內沒有再輸入時，才會發送請求。如果先停止輸入，但是在指定間隔內又輸入，會重新觸發計時。
加入防抖
規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，如果在同一個單位時間內某事件被觸發多次，只有一次能生效。
(1)鼠標連續不斷地觸發某事件（如點擊），只在單位時間內只觸發一次；
(2)在頁面的無限加載場景下，需要用戶在滾動頁面時，每隔一段時間發一次 ajax 請求，而不是在用戶停下滾動頁面操作時才去請求數據；
(3)監聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷；
還是上述列子，這里加入節流來優化一下，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加入節流</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模擬ajax請求 function ajax(content) { console.log('ajax request ' + content) } function throttle(fun, delay) { let last, deferTimer return function (args) { let that = this; let _args = arguments; let now = +new Date(); if (last && now < last + delay) { clearTimeout(deferTimer); deferTimer = setTimeout(function () { last = now; fun.apply(that, _args); }, delay) } else { last = now; fun.apply(that, _args); } } } let throttleAjax = throttle(ajax, 1000) let inputThrottle = document.getElementById('throttle') inputThrottle.addEventListener('keyup', function (e) { throttleAjax(e.target.value) }) } </script> </head> <body> <div> 3.加入節流后的輸入： <input type="text" name="throttle" id="throttle"> </div> </body> </html> 效果：實驗可發現在持續輸入時，會安裝代碼中的設定，每1秒執行一次ajax請求
加入節流
總結下防抖和節流的區別：
-- 效果：
函數防抖是某一段時間內只執行一次；而函數節流是間隔時間執行，不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。
-- 原理：
防抖是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，都會清除當前的 timer 然后重新設置超時調用，即重新計時。這樣一來，只有最后一次操作能被觸發。
節流是通過判斷是否到達一定時間來觸發函數，若沒到規定時間則使用計時器延后，而下一次事件則會重新設定計時器。
如有問題，歡迎指正。
轉自知乎 原文鏈接：https://zhuanlan.zhihu.com/p/51608574
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在新業務啟航準備出海乘風破浪時，業務方和產研同學就開始思考一個問題：產品體驗做得足夠好嗎？
為了回答這個問題，用研同學在研發階段就開始進行 demo 測試，試點運營時期進行反饋追蹤，上線初期進行可用性測試……可以說，不是在驗證體驗，就是在準備驗證的路上。但這些回答都是片段性的，只能發現散落的關鍵點。
等到業務成熟運轉且穩定后，各方負責人可能會發出靈魂一問：如何全面評價業務體驗？此時，用研工程師意識到：建立長效全面的體驗監測系統非常重要和必要。
麥肯錫給出的定義是：一個持續運轉的觀察系統。①能發現足夠詳細的旅程、觸點、渠道方面的客戶體驗信息 ②能長期追蹤客戶體驗變化和衡量改善措施的效果 ③能夠為企業帶來統一的審視客戶體驗的視角 ④能提供完整準確的體驗數據，讓組織基于數據而非主觀直覺做出決策。通過這份定義，可以得出體驗監測系統的幾個特征：
1. 認可度高的體驗監測模型
定義和特征有了，那么成型的體驗監測系統是什么樣的？我們整理了目前認可度較高的體驗模型：
谷歌 HEART 模型（C 端體驗模型）。該模型由 5 個指標構成，分別是：
阿里 PTECH 模型（B 端模型），由 5 個指標構成：
LIFT 模型（C 端模型），由 widerfunnel 公司開發，旨在提升轉化率，主要有六大法則：
2. 模型應用問題
這些模型有衡量 C 端體驗的，有針對 B 端產品的，在度量線上系統的用戶體驗方面表現優異，但存在 3 個問題導致他們并不適合貝殼這種極端復雜、線上線下交融的業務場景：
因此，我們在貝殼探索了一條差異化的建立 B 端體驗監測體系之路。
監測系統的三大核心——測量指標、測量范圍、測量用戶，在搭建前需要按順序逐一確定。
1. 確定測量指標
測量指標，指用于評價系統好壞的量化數據。在 B 端，可分為五類指標：
由于不同 B 端系統的功能、應用場景、用戶等差異很大，因此可根據實際情況組合上述指標，形成更貼合業務的測量體系。
2. 確定測量范圍
B 端業務一般有較長的使用鏈路和較復雜的功能，在搭建系統前，需要確定：
測量范圍越大，越能發現“隱匿的冰山”，觸達業務核心問題。但隨之帶來的問題是：①測量成本增大 ②發現的問題類別復雜，權責難以落實到部門，落地困難。
3. 確定測量用戶
B 端業務的用戶角色一般多于 C 端，以新房系統為例，按使用頻率可分為主使用者、次使用者等，按參與角色又可分為信息錄入角色、審核角色、維護角色等。在確定測量指標和測量范圍后，根據不同用戶角色對業務的貢獻度、參與度，考慮將哪些角色納入監測系統。
指標、范圍、用戶都確定后，B 端監測體系也就自然的建立起來。
接下來，我們簡單介紹下貝殼的 B 端體驗監測系統的構建思路。
在貝殼，B 端體驗監測系統經歷了三個重要階段：
第一階段
從功能點出發建立產品滿意度系統，如下圖所示（部分業務流程由于保密原因，做了修改或隱匿）。
△ 圖 1 早期二手滿意度架構（僅包含部分內容）
特點是：①架構清晰，基本按照功能架構 ②次序明確，一級影響因素（大產品功能）與二級影響因素（大功能下的小功能、細節設計等）層層遞進。
之所以采用這樣的架構和內容，是因為：①早期建立監測體系時，產品同學往往參與意愿更強烈，提供的資料和需求更多 ②只有產品問題能確定落地，其他問題總會被推諉 ③產品槽點多，只專注這個區域就挖不完寶。
這樣的體系好處是：①問題明確，低滿意度產品模塊可快速找到對接人，容易落地 ②結構簡單，背景知識少，設計滿意度系統認知和時間成本低，可以先跑起來 ③合作部門少，只需要和重點模塊產品打交道，項目推動更省力 ④可計算出每個模塊對整體產品滿意度的貢獻值，幫助產品同學發現優先改進點。
劣勢是：①只能發現單個模塊的問題，陷入谷倉效應 ②以產品功能為骨架，可能漏掉其他用戶關注的業務、運營問題 ③產品框架不符合用戶關注習慣，部分打分可能與實際情況有出入 ④題量較大，完成難度大。
第二階段
考慮到產品滿意度系統的問題，我們在此基礎上進行了監測系統的優化：從服務設計理論出發，建立場景式滿意度系統，如下圖所示（部分業務流程由于保密原因，做了修改或隱匿）。
△ 圖 2 早期新房滿意度架構（僅包含部分內容）
這樣的監測系統特點是：
這樣的體系好處是：①可以發現整個業務流程的單點問題與銜接問題 ②從用戶角度出發設計問題，用戶回答順暢準確 ③指標更符合業務需求 ④能發現不同角色的分工問題，是否存在某個角色工作負荷過高。
劣勢是：①結構復雜，需要對業務非常熟悉，前期準備工作非常耗費人力與時間成本 ②發現的問題難以歸類，解法需多方協同（如運管人員審核壓力過大，需要同時優化產品邏輯和增加數據對接準確性）③合作部門多，項目推動難度大 ④調研對象多、覆蓋范圍廣，后期數據分析、結論產出耗費精力多。
第三階段
由于二代系統耗費精力過多，貝殼 er 們在此基礎上又進行了改良，建立自動化觸點式體驗監測系統，以數據看板+人工分析形式運轉。
這樣的監測系統特點是：
貝殼 B 端體驗監測系統的這三個階段，代表了三種思想的轉變：從先跑起來，到精細測量，再到自動化分發，越來越全面，越來越省力。
1. 新房 B 端滿意度系統
新房是一個多角色參與的復雜系統，參與的角色包括：購房客戶、新房經紀人、客發經理（負責宣傳樓盤、與開發商談判拿盤、系統內錄入樓盤資料等）、駐場（在樓盤現場處理經紀人帶看事宜、錄入各項數據、同步銷控信息等）、運管（負責審核成交數據、解決流程問題等）、財務（負責回款跟蹤等）、法務（負責確認合同條款、合作歸檔等）……
整體流程也非常復雜，從接待客戶到完成回款，一共有 20 多個環節，每個環節都要耗費 1~3 個角色的大量精力。如何測量這個系統的用戶體驗，就是個非常頭痛的問題。
面對這個硬核滿意度任務，我們給出的解決方案是：
最終產出了一個包含 4 種最重要角色（經紀人、案場等）、22 個流程節點、3 類指標（滿意度、NPS、費力度）的新房體驗監測系統，如下圖所示（部分業務流程與業務數據由于保密原因，作了修改或隱匿）。
△ 圖 3 新房體驗監測系統示意
其中 NPS 與全體滿意度作為整體指標，描述新房系統各角色的總體感知和體驗情況；費力度與流程滿意度作為單節點指標，描述不同節點的業務感知和體驗情況。未來，在業務持續發展過程中、業務方遇到整合問題以及項目有了全局落地的能力后，我們也會增加針對整體業務和針對單個節點的業務指標（如回款安全性、流程可跟蹤性），將體驗監測與商業價值掛鉤，進一步提升 B 端體驗的勢能。
通過貝殼的例子，可以發現 B 端體驗監測系統往往比 C 端更復雜，對創建者的業務理解程度有更苛刻的要求。無論搭建還是落地，都需要較高人力和時間成本，因此建議大家在設計 B 端體驗監測系統前做到：
B 端監測體驗系統的建立與運行，是復雜的長期性工作，也是對用研團隊專業性和業務理解程度的挑戰，愿大家勉力前行。
文章來源：優設 作者：貝殼KEDC
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著技術的發展，可穿戴設備正在從實驗室走向市場，從獨立使用到多平臺聯動，從注重基于硬件的產品功能到注重基于用戶數據的應用與服務。Apple Watch 搭載的 watchOS 則是可穿戴設備用操作系統中的翹楚。相較于 iOS、Android 及網頁，watchOS 對于大多數設計師來說都是一個相對陌生的領域。在這篇文章中，我們將為大家分享設計 watchOS app 中的要點。
本期提綱：
watchOS 有 3 項設計原則：
碎片化的使用時間、較小的屏幕空間，這些客觀條件要求 watchOS 上的設計要足夠「短平快」。
「短」常體現于精簡的信息量及大尺寸的文本。如在「體能訓練」app 中，對關鍵運動情況的說明不僅言簡意賅，還用了最大的 large title 這一文本樣式。僅需一瞥，心中就有數了。
「平」體現在扁平的信息架構。相對于其他平臺，watchOS 上的 app 一般僅使用以下 2 種相對簡單的信息架構類型：
層級型（Hierarchical Navigation）
分頁型（Pagebased navigation）
在實際運用場景中，這兩個類型還可以混用。如「體能訓練」app 就用了混合的信息架構類型，但仍保證了僅有 2 層深度的扁平要求。
「快」則在于被拆解為小塊的微任務，如 iOS 中的「音樂」，在 watchOS 中被拆解為「音樂」「廣播」「播放中」3 個 app，其對應著瀏覽音樂庫、瀏覽廣播、控制音頻播放這 3 個微任務。這一思路與「桌面應用的移動化」非常相似。
承載 watchOS 的 Apple Watch 有著極高水準的工業設計，而與 UI 最為相關的則是其屏幕及 Bezel。其中，Bezel 指的是 Apple Watch 屏幕四周環繞的黑色邊框，經特殊工藝處理，其邊緣如水滴般飽滿。在強光照射下，更能呈現出其精致質感。這很難讓人不想到 Apple 經典的 Aqua 風格。
為了能將其設計美學在 UI 中得到繼承，我們建議采取以下設計策略：
純黑背景
Apple Watch 采用的是 OLED 材質的屏幕，這種材質的屏幕在展示純黑（#000000）時不會發光，也更省電。若在設計中使用純黑的背景，背景就會與 Bezel 融為一體、UI 元素直接「鑲嵌」于表盤，可謂渾然天成。
平滑圓角
無論是 Bezel 還是屏幕，均有著圓潤的設計語言。因此，在 UI 中使用與物理環境相匹配的圓角樣式，可使軟硬件更加契合。watchOS 中的圓角使用可以比 iOS 中更大膽。如在 iOS 中，按鈕的常規圓角值為 8pt，watchOS 中則增大為 9pt。同時，watchOS 還有大量全圓角的樣式，就連應用圖標都是正圓。
在微信 Apple Watch 版中，聊天頁面的 3 個回復按鈕更是使用了正圓樣式，不僅減少了被屏幕圓角裁切的可能，更為應用賦予了濃郁的 watchOS 平臺特色。
全寬元素
因 Bezel 的存在，當前的 Apple Watch 還不能稱為真正的全面屏。如果可能，將按鈕、列表項等元素橫向撐滿屏幕，不僅能從視覺感知上盡可能增加無框感（frameless），還能充分利用原本就比較緊缺的屏幕空間。
Apple Watch 是非常個人化的設備，我們需要為用戶的隱私做足夠縝密的考量。如 Apple Watch Series 5 及更新機型的屏幕有著常亮顯示（AlwaysOn）功能，當用戶抓著地鐵扶手或伏案工作時，屏幕上常亮顯示的信息就可能被旁人看到。因此，我們要為常量狀態頁面中的個人信息進行脫敏處理。
但同時，作為基本隨時貼身的設備，減少對用戶無謂的打擾也是設計師需要注意的基本要求。關于這方面的設計，大家可參閱本公眾號關于寧靜科技（Calm Technology）的文章。
總的來看，watchOS 的設計原則可簡要總結為：在物理性質上，強調「軟硬件一體」；在交互表達上，規避信息過載、注重信息安全。
watchOS 支持以下手勢：
受限于較小的屏幕，多點觸控是不被支持的。如 iOS 中常用的雙指捏合（Pinch）及雙指旋轉（Rotate）。
在小而圓滑的 Apple Watch 的屏幕上，邊緣滑動是更加便捷的。其中，上、下、左側的邊緣滑動已被系統定義，分別為打開通知中心、打開控制中心、返回。而右側的邊緣滑動則尚未被系統占用，這給了設計師一個自由發揮的空間。
數碼表冠（Digital Crown）
數碼表冠是非常適合在手腕上與智能設備交互的實體。通過旋轉數碼表冠，用戶可以實現頁面、列表的滾動，滾動速率收放自如。
我們還可以將滾動數碼表冠所產生的交互效果進行靈活的設計。如：
側邊按鈕
目前，側邊按鈕相關的交互屬系統級，不可自定義：按下側邊按鈕，可以調出程序塢；雙擊側邊按鈕，可使用快捷交通卡。
Force Touch 是較舊版本的 watchOS 中的特殊手勢，一般情況下可呼出上下文菜單（Context Menu），可以簡單理解為 iOS 中的 3D Touch。但因 Force Touch 這一手勢的可發現性較弱，目前已用長按（Long Press）來代替之。
不過，目前又有了在 watchOS 中用雙擊（Double Tap）來替代長按的趨勢，這是因為雙擊這一手勢會更加輕巧一些。如在信息中，雙擊或長按消息氣泡均可呼出點回選項。
伴隨著設備數量的增長，用戶的注意力變得越來越稀缺。秉承 Calm Tech 的思想，設計師需要選用合適的反饋形式，來幫助用戶將注意力進行有的放矢的合理分配。運用觸覺這一邊緣感知通道，是一個非常好的降噪思路。
得益于 Taptic Engine 的硬件支持，watchOS 的觸覺反饋（Haptics）效果非常理想。雖然目前 watchOS 暫不支持自定義觸覺反饋（在 iOS 中可通過 UIFeedbackGenerator 來自定義(fn)），但 watchOS 于系統層級提供了一組觸覺反饋模版。我們需要對振動模式有著充分的理解，才能為關鍵的交互添加觸動人心的觸覺反饋。
1. 隱喻
觸覺反饋與聽覺反饋可以進行有機對應，因為從物理學的角度上來看，他們都是由物體振動產生的。所以，在設計觸覺反饋時，我們可以借助聲音設計的經驗來輔助思考。
想象這樣一支交響曲，悠揚的長笛聲緩緩地奏響（Ascending），拉開了風和日麗的一天。提琴、單簧管也徐徐加入（Flat），正如柳樹的嫩芽在春風中飄揚。長笛獨奏加快了節拍，曲調變得活潑起來（Steady），原來是草坪里的小兔子探出了腦袋……最后，伴隨著音樂的漸弱，美好的一天結束了（Descending）。
在音樂作品中，作曲家通過不同的節拍、旋律、音色，來構建出不同的聽感。如：
轉譯到觸覺中，我們也可以通過不同參數的調節，來構建承載不同信息內容的觸覺反饋。
2. 參數
Apple 官方給到了如下 2 個設計參數：
我們對官方的參數進行進一步的解構，并參考作曲家的做法，給到了如下 3 個參數來描述觸覺反饋：
其中，質感指的是振動脈沖的銳度。銳度越高，每個振動脈沖就能感知得越清晰。
3. 展望
相信在未來的系統版本中，無法自定義觸覺反饋的限制將被逐步解除。現市面上已經出現了諸如 Lofelt 一類面向觸覺反饋的專業設計用程序，設計師們可以前往小試牛刀。
Apple 的產品擁有著得天獨厚的生態優勢，watchOS 也不例外。類似于 macOS 及 iOS，watchOS 也支持「接力」功能（Handoff）。如：在 watchOS 中使用「郵件」app 回復電子郵件時，可以通過「接力」切換至 iOS 中以使用更大的屏幕進行輸入。
同時，「接力」不僅能在 app 間生效，也能在網站和 app 間生效。如在 macOS 中使用 Safari 瀏覽你的網站的用戶在離開 Mac 設備后，Apple Watch 會提示用戶是否繼續在 watchOS 中使用你的 watchOS app。這給我們的設計帶來了更多的可能。
巧妙運用 watchOS 的「接力」能力，我們能構建跨設備交互的無縫體驗。
市面上的 Apple Watch 有著 4 種不同的屏幕規格：30mm、40mm、42mm 及 44mm。其中，40mm、44mm 是較新設備的屏幕規格，也是設計過程中應重點關注的對象。下面，我們以最大的 44mm 的屏幕規格來進行設計解析。
1. Display Corners
指的是屏幕四角無法展示內容的區域，契合于 Apple Watch 的屏幕物理邊界。設計時，需避免在這些部位放置內容。
2. Clear Space Under Status Bar
指起始狀態下，界面內元素與位于屏幕頂部 status bar 的間距。另外，在 watchOS 中，status bar 是常駐的。
3. Copy Safe Area
文本的安全展示范圍?？v向來看，上距 status bar 5pt 的 clear space，下接 display corners。
4. Fullwidth1 Element Safe Area
指除文本外其他元素的安全展示范圍，橫向撐滿了整個屏幕，縱向避開了 display corners。這里對應了上文推薦大家使用的「全寬元素」策略。
40mm 的頁面布局與 44mm 的類似，只是數值有所不同。對于 38mm、40mm 的頁面布局，因沒有 display corners 的引入，布局方式非常簡單，這里便不展開敘述了。
1. 西文環境
在西文環境中，watchOS 默認使用 SF Compact，也可以選用 SF Compact Rounded（SF Compact 的衍生字體）。值得注意的是，SF Compact 這一字體需視文本的大小來選用具體類別：
在實際開發過程中，配合使用 Dynamic Type 技術，UI 中的文本可以隨用戶的設置動態調節：無論是字重、字號、字間距還是行高，均會有一一對應的調整。
2. 中文環境
在中文環境中，watchOS 默認使用蘋方字體。西文環境中 SF Compact Text 和 SF Compact Display 使用的細致判定，在中文環境中暫無。
3. 字體適配
Apple 官方在不同的屏幕尺寸下使用了不同的字體階梯：
不過，我們推薦在實際設計過程中選用一個字體階梯即可。
為論證僅使用一個字體階梯的合理性，我們需要引入「弧分」的概念?；》质且环N用來描述相對尺寸的單位，而弧分值指的是觀測者眼睛與被觀測物的夾角。由于使用了角度來計數，在定義字體尺寸時就可以忽略物體的距離。但無論用戶使用哪種屏幕大小的 watchOS 設備，其舒適的抬臂姿勢是相對固定的，即用戶眼睛距離 watchOS 設備的距離是相對固定的。因此，只有相同尺寸的大小的字體才能保證相同的弧分。
選用一個字體階梯的另一個好處體現在多屏幕尺寸適配中。若嚴格遵循 Apple 官方的處理方法，設計師需要輸出 4 套視覺標注才能完成設計；若使用一個字體階梯，我們僅需在設計中標注好自適應規則即可。倘若未來出現了更多的屏幕尺寸，我們的方法會顯得更加自如。
4. 推導方法
為了不重復造輪子，我們推薦使用你已有的 iOS app 設計中的字體體系為基礎，來推導出 watchOS app 的字體體系。具體過程如下：
我們按照上述方法，推導出了微信 Apple Watch 版的字體體系：
目前，iOS 及 macOS 共用一套色彩體系。watchOS 及 tvOS 因使用場景、硬件性質及美學理念的差異，其色彩體系需要進行差異化推導。
watchOS 色彩體系分為以下 2 個部分：
1. Global Tint Colors
基本等同于 iOS 中淺色模式（Light Mode）的顏色。在實際設計過程中可以直接遷移。
2. Additional Colors
它是 Global Tint Colors 的延伸，一般用于可交互元素的底版，如「體能訓練」中的按鈕。通過為 Global Tint Colors 添加不透明度即可生成一套相對應的 Additional Colors。不透明度數值的范圍推薦在 14%～17% 之間，并遵循「亮度（Brightness）越高，不透明度越低」的原則。
3. Semantic Colors
語義化顏色指的是根據用途來描述顏色，而不是直接描述色值。雖然在 watchOS 中沒有深淺色模式的區分，但色彩的語義化仍能幫助我們科學而謹慎地用色。
為了方便在設計過程中使用語義化顏色，我們推薦在 Sketch 中使用顏色變量（Color Variable）進行底層色彩體系構建。如下圖所示，是微信 Apple Watch 版中非常常用的三個顏色變量：
watchOS 中的 UI 元素與 iOS 差別不大，設計師在拿到 UI Kit 后應該都能快速上手。這里僅提出 4 個比較特殊的組件進行簡述。
1. Lists and Tables
Lists 和 Tables 都是縱向排列以展示內容的元素。簡單來說，Lists 能承載更多的樣式及交互行為，如：
2. 按鈕
在 watchOS 中，常見的按鈕樣式有：
如何判定該使用哪種樣式呢？這取決于按鈕所在頁面是否需要滾動才能展現所有內容：
以上判定方式的原理是，只有通過標準圓角矩形按鈕，才會在屏幕中呈現出「按鈕的一部分被蓋住」的視覺效果，進而暗示用戶下面還有內容。這一判定實為巧妙，但在實際開發實現的過程中卻很難做判定。因此，我們推薦默認使用標準圓角矩形按鈕。
在 watchOS 中，通知被分為 3 類：
1. Short Look
Short Look 指的是收到通知的那一刻立即彈出的模態頁面，其的持續時間很短，是為「輕輕一瞥」的行為設計的。所以，我們要保證 Short Look 中的內容足夠簡短。
同時，在配有常亮顯示的機型中，Short Look 會在尚未解鎖的情況下展示。因此，我們應避免在 Short Look 中展示敏感信息。
2. Long Look
可以將 Long Look 理解為 Short Look 的詳情。它由以下部分組成：
其中，內容區不僅僅可用于展示信息，我們還可以在內容區放置一些簡單的交互元素，如在座位預訂 watchOS app 推送的內容區中，就可以放置選擇就餐人數的 Sequence Picker。
3. 應用內通知
這部分留給我們的發揮空間較大，恕不展開闡述。
無論你是否會真正地開展面向 watchOS 的設計，了解 watchOS 中的設計方法及其背后的推導過程都是非常有價值的?？梢钥吹?，無論是設計原則，還是字體、色彩體系的推導，都始終貫穿著普適的設計思維。我們相信你能從中獲得一些啟發。同時，微信 Apple Watch 版已于近期更新，歡迎大家下載體驗。
文章來源：優設 作者：We-Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
空狀態是APP內必然存在的一個狀態，現在在很多產品里空狀態是不太受到重視的，給人的感覺是比較臨時性，可有可無的，但是這個狀態在引導性、愉悅性和保留用戶等方面的潛質對于產品體驗在細節當中的成敗有著不可忽視的作用。適宜的空狀態設計可以提升用戶體驗，實現用戶留存。
因此針對美柚APP內的空狀態進行一次全新的升級探索，前期也進行大量研究分析，對后續的探索方案有所方向指導。
空狀態是APP內必然存在的一個狀態，現在在很多產品里空狀態是不太受到重視的，給人的感覺是比較臨時性，可有可無的，但是這個狀態在引導性、愉悅性和保留用戶等方面的潛質對于產品體驗在細節當中的成敗有著不可忽視的作用。適宜的空狀態設計可以提升用戶體驗，實現用戶留存。
因此針對美柚APP內的空狀態進行一次全新的升級探索，前期也進行大量研究分析，對后續的探索方案有所方向指導。
文章來源：站酷 作者：huangzhijianwusD
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
今天要用到服務器nginx，還需要把自己的vue的項目部署到服務器上去所以就寫一下記錄下來。
首先要去nginx官網下下載nginx：
下載地址：https://nginx.org/en/download.html
下載下來會是一個解壓包，解壓到你想放的文件夾下
運行nginx.exe，然后打開瀏覽器輸入localhost出來如下圖片所示就說明成功了：
然后如果沒有成功出來的話也不要慌不要怕，可能是你的端口被別的內容所占了這時你就打開你的nginx的目錄下找到conf
點擊進去然后找到一個nginx.conf的文件
然后把它用編輯器的方式打開，打開之后找到這里的sever的listen就是你的端口號，默認的是80端口，你可以根據自己沒有被占用的端口進行改寫，改寫完成之后保存然后打開你的localhost:你改寫的端口號就OK了
server {
listen 8088;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
上面是安裝配置nginx服務器的方法，下面就是如何把自己的vue項目部署到你所安裝配置的nginx服務器上的步驟了：
首先找到自己的vue的項目然后輸入命令 npm run build 他會在你的vue目錄下生成一個dist文件夾里面就是你的vue的項目
然后打開這個dist文件夾把里面的內容復制下來里面會有兩個文件一個是index.html是主目錄還有一個是static文件夾
把他們復制下來然后打開你的nginx的目錄下的html文件里面會有兩個默認文件直接刪掉不要留，然后把你剛剛復制的文件粘貼進去
然后打開瀏覽器輸入最開始改的端口號localhost:你所改的端口號回車；你就會看到自己的vue的項目跑起來了我的打開就是這樣的咯：
這樣就大功告成了~~~~~~~~~
轉自：csdn 作者：前端的搬運工
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn