如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

文字的設計方式有很多種，例如通過字體變形，結(jié)構(gòu)重組等方式來讓文字變得更加特別，但往往會讓我們耗費比較多的時間。

因此我一直在思考有沒有一些既簡單又的設計方式來提高文字的設計感。在瀏覽國外的一些設計網(wǎng)站的過程中，做了一下文字設計形式方面的收集，并整理出十種我認為具有代表性的文字設計形式。另外還參考這些設計方式，使用中文字體進行了一些嘗試。

拉伸的文字

拉伸的處理手法，讓文字更具有張力，整體氛圍更具標題感和圖形化，但依然保留著文字該有的識別度。常見于純文字排版的海報，既滿足閱讀需要，同時具有設計感。

拉伸與文字本身的字形、字體有著很大程度的關(guān)聯(lián)，并不是所有的文字都適合拉伸，例如下面的案例。

1. 不同字體對比

從方案嘗試中看出，左邊字體在進行拉伸之后，文字本身的結(jié)構(gòu)會遭到破壞，而右邊的效果可以較為接受。因此在設計的過程中盡量選擇可適用于拉伸的字體，另外在拉伸的過程中需要對細節(jié)重新處理，使字體保留原有字體的細節(jié)美感。

2. 不同字形的對比

從下面案例中對比，O 在進行上下拉伸的時候效果比較好，而左右拉伸的時候會失去字體本身的美感，而 Y 在上下左右拉伸后整體視覺效果都相對平衡。

3. 細節(jié)處理對比

優(yōu)化字體線條的細節(jié)可以使得整體文字更加規(guī)整、方正（右邊）。而未進行細節(jié)的設計則會顯得筆畫參差不齊（左邊）。

4. 傳統(tǒng)與現(xiàn)代對比

傳統(tǒng)的字體拉伸后（如下圖中間的字體），字體本身的韻味就失去了，因此不建議對一些較為傳統(tǒng)的字體進行拉伸設計。

5. 設計嘗試

中文字的筆畫比較多樣性，因此在細節(jié)的設計上比英文來得更加復雜，在處理「撇、捺、點、折、彎、勾」時需要保持原本的筆畫結(jié)構(gòu)性。

6. 拓展案例

結(jié)合實際要表達的內(nèi)容，使用拉伸的設計手法，例如結(jié)合物體，疊加顏色或者交錯拉伸等。

虛實結(jié)合文字

虛實結(jié)合即為線面/陰陽的設計手法，通過虛實的處理，可以突出一組或一段文字中的重點信息。在一些強調(diào)主次的設計中，可以嘗試這種方式來做區(qū)分，線面結(jié)合的處理手法讓原有都是面的字體多了一些透氣感和空間感。

虛實處理的方法需要考慮本身字體的粗細，過分纖細的字體效果可能并不明顯。

1. 嘗試對比

從對比中，發(fā)現(xiàn)粗體相比于細體來得更加直接更容易出效果，對比明確。

2. 中文字體的嘗試

從嘗試中來看，與上面中的結(jié)論較為一致，較細的字體使用虛實結(jié)合效果并不理想。對于書法體的應用，更多需要考慮字體的收邊效果是否工整，收邊過碎，會影響在描邊之后的細節(jié)美感。

3. 設計嘗試

遞進漸變的文字

通過遞增或者遞減的設計手法，讓原本簡單重復的文字元素，變得更加具有層次感和節(jié)奏感，讓文字的生命力變得更加豐富多樣。

在設計的過程中需要提前規(guī)范好各個字體之間的差異關(guān)系及變化的效果過程。按照一定的數(shù)值倍數(shù)差異比進行變化。

1. 不同方式的嘗試對比

在嘗試的時候發(fā)現(xiàn)，粗細變化的模式可能更多會依賴于字體本身的模式。

2. 中文字體的嘗試

中文在使用遞進漸變的方式中需要考慮整體文字的結(jié)構(gòu)感和塊狀感，由于字形較為復雜，整體視覺效果會過于零碎。

擴展變化的文字

與遞進漸變接近但卻又有差別的文字設計形式。擴展變化的文字具有張力的同時有一定的速度感和發(fā)射性，就像向四周展開的波紋效果，具有延續(xù)性。

按文字的行高或者字寬作為基礎(chǔ)值，按一定的比例，對文字進行破形切割處理，上下左右進行擴展發(fā)散。

1. 比例值示意效果

2. 中文字體的嘗試

外觀的完整度還算可以，但由于中文本身自有的特性（筆畫較為豐富多樣），因此在擴展層次的數(shù)量上需要進行一定的控制，不宜過多，以短語或標題使用較好，避免過于形式而導致文字識別性降低。

3. 設計嘗試

底紋的文字

文字作為紋理出現(xiàn)在畫面中，區(qū)別于圖形化的紋理。既有圖形感，同時可以輔助傳達一定的信息和態(tài)度。

在字體的選擇上盡量適用字形較為簡潔的字體，避免影響前景內(nèi)容的展示。設計上可以結(jié)合其他的設計形式，例如虛實結(jié)合/拉伸變形/擴展變化等方式，提升畫面的豐富程度。

1. 中文字體的嘗試

常規(guī)的中文字體，整體效果還算不錯。但結(jié)合中國書法字作為底紋，可以讓整體的設計更具有不同于英文的設計感，整體效果更具有力量感，因此建議在設計中文底紋的時候可以大膽嘗試中文書法字。

穿透的文字

通過疊加的方式，讓原本簡單的文字和背景產(chǎn)生了融合。既提升了背景的層次感，又讓文字變得具有設計感。

粗細的字體會產(chǎn)生不一樣的視覺感受，較細的字體會產(chǎn)生若隱若現(xiàn)的視覺效果，文字的識別性會稍弱，較粗的字體識別度基本上沒有太大問題，因此在設計的過程中可以結(jié)合實際的情況選擇不同粗細的文字。

1. 粗細對比嘗試

穿透的文字設計，對于打造設計的大片感具有很突出的視覺效果。例如漫威的電影片頭設計。

2. 中文字體的嘗試

結(jié)合不同的語意使用不同的字體，再結(jié)合穿透的設計方式，使畫面具有中文的文藝感。

3. 拓展案例

結(jié)合實際的內(nèi)容設計，穿透文字的玩法還可以拓展出更多不一樣的設計，例如下面這些例子。

扭動的文字

扭動的設計，讓文字具有曲線的動態(tài)感，提升了文字的裝飾性。不同曲線的動態(tài)變化，賦予文字不同的律動感。變形的文字并未影響到文字該有的識別性和閱讀感，卻具有了設計感。

如下面的三個案例，曲率的差別，賦予文字不同的動態(tài)規(guī)則，有不同的視覺感知，有時柔美，有時卻具有速度感。因此在設計的時候，可根據(jù)具體的內(nèi)容設計不同的扭動趨勢。

1. 中文字體的嘗試

對比可見較細的字體使用扭動的設計，效果并不理想。由于中文筆畫的差異點，經(jīng)過扭動之后整體外形較為不規(guī)整，而粗體的效果則較為規(guī)整，動態(tài)曲線趨勢也較為明顯。

2. 設計嘗試

扭動+虛實+底紋的效果。

3. 拓展案例

更高級的設計手法是利用自然環(huán)境的介質(zhì)結(jié)合文字，起到扭曲的視覺效果。

立體層疊的文字

與擴展變化有異曲同工之妙，文字通過一定的角度和位移間隔，由二維向三維的視覺效果進行變化，讓文字更加多變化和有重量感、層次感。

立體層疊的設計對于字體本身具有一定的要求，較為纖細的字體出來的效果并不理想。

1. 不同的字體嘗試

從對比中看出，細體或較細的襯線字體，層疊后會出現(xiàn)銜接不上或視覺黑點的情況（如下面左圖和右圖）。因此設計時建議使用粗體，并且整體筆畫較為平均的字體（中間的圖）。

2. 中文字體的嘗試

雖然具有了層次感和空間感，但也會讓整體變得更加復雜，因此需要根據(jù)文字的多少情況進行使用。

3. 拓展案例

立體層疊還不止單向的設計，例如可以進行軌跡變化，向外擴展層疊，或是增加一些顏色漸變來豐富整體的設計。

顏色疊加的文字

文字通過錯位，疊加，顏色變化，透明度變化，切割等方式的設計之后，具有故障的視覺偏差感受。整體視覺感知類似雙重曝光的照片，文字具有豐富的層次感。

顏色疊加的效果，對于顏色的選擇極為重要，兩個顏色交錯之間的顏色可以為過渡色或者互補色。

細體的效果并不理想（如上圖左邊第一個），建議設計的過程中使用較粗的字體，另外在使用的過程中需要考慮文字的識別度（如右邊的效果），重疊之后文字的識別度或多或是會受到影響。

1. 中文字體的嘗試

由于中文字比英文復雜，因此使用中文字在設計的時候，可以尋找一些共筆的地方進行重疊（如下圖左邊的設計），利用字體筆畫粗細一致的情況下，進行了邊與邊的重疊。另外在設計的過程中建議加大字間距，這樣可以避免不同文字的重疊，產(chǎn)生過度復雜的效果，影響文字的識別性（如下圖最右邊的設計）。

2. 拓展案例

在簡單的疊色之外，結(jié)合不同質(zhì)感和肌理，可以讓整個文字具有不一樣的視覺感受。

立體空間的文字

文字按照立方幾何結(jié)構(gòu)進行排版，通過顏色差異，陰陽，線面等方式設計處理后形成空間感和立體感。相比于平面排列的文字更具有空間感和層次感，提升整體畫面的設計感。

1. 設計嘗試

使用空間錯位結(jié)合虛實的設計，讓簡單重復的文字變得具有空間感和立體感。

2. 拓展案例

除了常規(guī)的空間打造，甚至可以融入到場景中或者結(jié)合物體本身的設計。

以上設計風格，常常會在一些運動品牌的設計中看到。例如，Nike 的設計中應到的文字，也會結(jié)合這些方式，來豐富和提高整體的設計感。

火箭隊出場片頭的字體應用，線形字體疊加漸變的效果，具有層次感又有未來感。

阿迪達斯的廣告：

Converse 的廣告：

Under Armour 的廣告：

除了一些品牌的設計，音樂唱片的封面也有應用到這些類型的設計手法。

我們除了在一些常規(guī)的媒介上會看到相關(guān)的文字設計，在這兩年的耐克或阿迪達斯的鞋子設計中，也會加入文字元素的設計，甚至球員會直接在鞋子上寫上文字。

文字設計的拓展疊加

文字的設計已經(jīng)成為一種新的設計趨勢，結(jié)合實際需要表達的想法，對于設計手法進行活學活用是做出好設計的關(guān)鍵。當然只有掌握了基礎(chǔ)手法才可能做到舉一反三的設計思考。在實際設計的過程中，我們往往不會是單獨使用某一種方式，而是對不同的設計手法進行重組再設計，或者使用 2~3 種方式疊加設計來打造整體的畫面效果。如下：

總結(jié)

在這十種基礎(chǔ)的文字設計中，通過結(jié)合發(fā)散可以迸發(fā)出遠遠不止于十種的創(chuàng)意設計。本次收集總結(jié)除了自身學習提高之外，希望可以起到拋磚引玉的作用，激發(fā)設計師對于文字的設計思考。

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

動效有助于讓UI具有更好的表現(xiàn)力及更易于使用，盡管具有如此大的潛力，但可能由于它是UI設計家族中的新成員之一，所以它大概是所有設計學科中最不被大眾所了解的。視覺設計和交互設計可追溯到早期的GUI，但由于動畫必須由現(xiàn)代硬件來順暢的渲染，而且UI動效和傳統(tǒng)動畫之間的重疊區(qū)間也使得兩者之間的區(qū)分變得復雜。傳統(tǒng)動畫需要掌握迪斯尼的12個基本原則，那么這是否意味著UI動效也像傳統(tǒng)動畫一樣復雜？我經(jīng)常能聽到人們說，動效設計很復雜，不知道如何選擇相對應的動畫模式，但是我認為至少在UI領(lǐng)域，動效設計是可以很簡單的。

從哪里開始

動效主要是通過UI元素之間關(guān)系過渡來幫助用戶瀏覽App。當然還可以通過使用圖標、勛章以及插畫動效來為App增色，但是建立產(chǎn)品可用性應該優(yōu)先于增加動效表現(xiàn)力。在展示你的動效設計技巧之前，讓我們先從設計一個基本的動效開始，即產(chǎn)品導航之間的過渡。

過渡模式

在設計導航之間進行動效過渡時，簡單性和一致性是最關(guān)鍵的點。為了達到這個目的，我們將以下2種動畫模式中進行選擇：

1、基于容器的過渡。

2、沒有容器的過渡。

基于容器的過渡 

文本、圖標和圖片等元素在容器內(nèi)進行分組

如果動畫涉及像按鈕，卡片或列表這樣的內(nèi)容，則使用基于容器的動畫設計，容器通常有很明顯的邊界，這種模式分為三個步驟：

1.使用Material的標準緩動為容器設置動畫（意味著它可以快速加速，然后逐漸的慢下來）。在下圖的示例中，容器的尺寸和圓角半徑從圓形按鈕動畫過渡到填充整個屏幕的矩形。

2.縮放容器中的元素進行寬度自適應，將元素固定在頂部但是仍然存在容器內(nèi)，這樣在容器和內(nèi)部元素之間創(chuàng)建了清晰的關(guān)系鏈。

*放慢動畫速度以說明元素在容器內(nèi)如何縮放

3.隨著容器加速，在過渡期間逐漸淡出消失。當容器減速時輸入的元素逐漸淡入。當元素進行快速移動時，通過淡入淡出來實現(xiàn)元素的更替。 

*放慢動畫速度以說明元素如何使用淡出淡出

將此模式應用于所有涉及容器過渡的動效，這樣會建立起來一致的動效規(guī)則。這樣還使得開始和結(jié)束之間的關(guān)系更加清晰，因為它們是由兩個動畫容器互相銜接的。為了展示這種模式的靈活性，這里將它分為五種不同使用場景： 

*放慢動畫速度以說明容器如何連接開始和結(jié)束

有的容器只是使用Material的標準緩動從屏幕外滑入，它滑動的方向取決于與之關(guān)聯(lián)的組件位置。例如點擊左上角的抽屜導航，圖標將從左側(cè)滑動容器。 

如果容器從屏幕邊界進入，則它會淡入并放大。它并不是從0％的比例制作動畫，而是從95％開始，以避免元素之間的過渡幅度太大?？s放動畫使用Material的減速緩動，這意味著它以峰值速度開始并逐漸減速停止。在元素退出時，容器會在沒有縮放動畫的情況下淡出。為什么退出動畫會有這樣微妙的設計呢，這樣做是便于將注意力集中在新內(nèi)容上。

*放慢動畫速度以說明容器如何通過淡入淡出進行縮放動畫

沒有容器的過渡

有些作品將使用沒有容器的過渡來構(gòu)建動效設計，例如點擊底部導航中的圖標，將用戶帶到新的頁面，在這些情況下，將使用以下兩個步驟：

1、起始元素通過淡出消失，然后最終元素通過淡入進入。

2、隨著最終元素逐漸出現(xiàn)，使用Material的減速運動來巧妙的展現(xiàn)。但同時縮放僅適用于新舊內(nèi)容的替換。 

*放慢動畫速度以說明沒有容器的過渡如何使用淡入淡出和縮放

如果開始和結(jié)束的組合元素具有清晰的空間或順序關(guān)系，則可以使用共享動畫來強化它。例如當下圖觸發(fā)導航組件時，開始和結(jié)束的動畫都在垂直維度進行滑動，這加強了他們的垂直布局。當點擊下右圖入門流程中的下一個按鈕時，從左向右水平動畫強化了序列進行的的概念。共享動畫使用Material的標準緩動。

*減慢動畫以說明垂直和水平共享動畫

最佳方案

把事情變的更簡單一些

鑒于其動畫頻率高低與產(chǎn)品可用性密切相關(guān)，導航過渡通常應該優(yōu)先于功能展示。引人注目的動畫通常最適用于小圖標，勛章，加載或空狀態(tài)等元素。下面這個簡單的案例可能不會得到Dribbble的那么多關(guān)注，但是它更像一個真實的產(chǎn)品。

*放慢動畫速度以顯示不同的動畫風格

選擇合適的時間及緩動類型

導航過渡應該使用合適的時間，快速過渡優(yōu)先考慮功能，但是速度也不要太快，防止動畫路徑迷失。根據(jù)動畫占用的屏幕比例來選擇動畫持續(xù)時間。由于導航過渡通常占據(jù)屏幕的大部分，因此300ms是一個比較有經(jīng)驗的動畫時長。相比之下，像開關(guān)按鈕這種小組件動畫持續(xù)時間很短，大概在100ms左右。如果過渡感覺太快或太慢，請以25ms的增量調(diào)整其持續(xù)時間，直到它達到合適的動畫節(jié)奏。

Easing描述了動畫加速和減速。大多數(shù)導航過渡使用Material的標準緩動，這是一種不對稱的緩動類型。這意味著元素會快速加速運動，然后緩慢減速以將注意力集中在動畫結(jié)束時。這種類型的緩動為動畫提供了自然的感覺，因為現(xiàn)實世界中的物體不會立即開始或停止移動。如果動畫看起來很僵硬或死板，那么可能是由于你選錯了緩動類型。

*放慢動畫速度以說明不同的緩動類型

本文所說的動效模式在建立一種實用而又微妙的動畫風格。這適用于大多數(shù)產(chǎn)品，但某些品牌可能需要更激進的動效表達。要了解更多有關(guān)動效的內(nèi)容，請閱讀Material motion指南。

一旦處理好了導航之間的過渡動畫，在你的產(chǎn)品中添加角色動畫的挑戰(zhàn)就開始了。這意味著簡單動畫模式是不夠的，這時候動傳統(tǒng)的動畫工藝會真正閃耀起來。

角色動畫可以增加趣味性

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

最近折騰自己的網(wǎng)站，在自適應方面發(fā)現(xiàn)有了很多新的方法，感嘆前端的技術(shù)真是日新月異，從以前只能這樣，到現(xiàn)在除了這樣，還可以那樣，甚至再那樣......技術(shù)永無止境啊。

回到主題，自適應響應式布局這個話題古老而新穎，從最早的不同分辨率的屏幕，到現(xiàn)在遍布各個生活角落的移動設備，響應式布局已經(jīng)成了幾乎所有互聯(lián)網(wǎng)公司必備的條件。在我的映像中，bootstrap一直是響應式的頭號選擇，的確，其中的各種xl，xs，柵格布局讓響應式變得很容易。

話說，這Vue做響應式，其實一點都不復雜：一個生命周期鉤子，一個條指令，一套js判斷語句解決，說到這，高手們應該早已經(jīng)明白如何操作了， 這篇文章就給廣大剛?cè)腴T的同學們拓寬一下吧（不熟悉Vue的同學，還是先惡補一下Vue基礎(chǔ)吧）。

一個生命周期鉤子——mounted：掛載時操作；一條指令——v-show（本例中采用，非絕對）：根據(jù)條件顯示；一套js判斷語句：if/else或者switch/case。具體操作起來很簡單：（代碼直接展示）

<!--這是一段導航html-->
<nav id="nav-part" class="easyUtil-backImgPostion easyUtil-flexContainerRow">
<ul class="easyUtil-flexContainerRow">
<li class="nav-list" :class="nav.className" v-for="(nav,i) in navs">
<a :href="nav.href">{{nav.name}}</a>
</li>
</ul>
<div id="serach-part" v-show="show"><input type="search" id="search" :placeholder="placeholder" class="easyUtil-input"><button id="searchBtn" class="easyUtil-btn">{{btn}}</button></div>
</nav>
var head = new Vue({
el : "#head",
data : {
        //此處省略一千字
show : true
},
mounted : function(){
//可用于設置自適應屏幕，根據(jù)獲得的可視寬度（兼容性）判斷是否顯示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})
我的目的是在移動設備中不顯示搜索欄（search-part）部分，那么利用v-show,和mounted配合，在掛載時檢測一下屏幕可視寬度，如果小于1000，則認為是手機，v-show設為false,不顯示即可。

看，很簡單吧，簡單到我覺得自己好像在忽悠。其實到這里，原理已經(jīng)說完，具體的應用大家可以自行發(fā)揮，而且也不一定就用v-show，我這里是為了顯示與否，如果大家想添加樣式什么的，還可以寫別的，甚至于計算屬性，watch都可以。只要記住在掛載的時候完成即可，不然頁面會有跳動，不利于體驗。

可能有人會問，用css的@media就可以完成了，為啥用js，我這里想說的是，我并沒有否認@media，這里只是寫出更多一種方式，同時結(jié)合一下現(xiàn)在很火的前端框架。多一種方法，就多一種解決思路，不至于再回到以前"只能這樣"的道路上。具體到實際應用中，當然是最適合的方法為主。前端水深，前端的路子也越來越多，越來也豐富，敞開思維，就會看見不同的天空。

ps一句，js確實需要刷新頁面重新加載才會顯示，也就是說如果用戶將頁面從大屏移動到小屏幕，就可能出現(xiàn)布局不響應問題，但是在實際使用中，這種情況幾乎不會出現(xiàn)，因為用戶不能可能將電腦打開的網(wǎng)頁，直接移動到手機上，操作永遠都是重新打開，所以js，css在顯示效果上是沒有區(qū)別的（當然如果js太過復雜，性能會有影響）。另外，文中方法的兼容性問題，只要支持Vue的瀏覽器，都沒問題。

就說到這吧，歡迎大神指正，不勝感激！
藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

1、用px2rem配合lib-flexible，讓網(wǎng)頁適配。

lib-flexible
作用：讓網(wǎng)頁根據(jù)設備dpr和寬度，利用viewport和html根元素的font-size配合rem來適配不同尺寸的移動端設備
安裝：

npm install lib-flexible
1
引入：入口文件main.js中：

import "lib-flexible/flexible.js"
1
2、手寫一個js小工具，省略rem的計算，加快開發(fā)速度。
在src目錄下增加一個utils目錄，在里面新建一個js文件，寫入以下內(nèi)容：

// 基準大小
const baseSize = 32
// 設置 rem 函數(shù)
function setRem () {
    // 當前頁面寬度相對于 750 寬的縮放比例，可根據(jù)自己需要修改。
    const scale = document.documentElement.clientWidth / 750
    // 設置頁面根節(jié)點字體大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
    setRem()
}


在main.js中引入改js文件：

import "./utils/rem"
1
然后就可以直接用px寫頁面啦，而不用去計算rem的值，是不是很舒服呢。

3、使用VW。了解下vw 與 vh單位，以viewport為基準，1vw 與 1vh分別為window.innerWidth 與 window.innerHeight的百分之一

安裝：

npm i postcss-px-to-viewport -save -dev
1
在package.json中配置如下：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 32,
        "propList": ["*"]
      }
    },
    "plugins": {
      "autoprefixer": {},
      "postcss-px-to-viewport": {
        "viewportWidth": 750,
        "minPixelValue": 1
      }
    }
  },

4、利用bootstrap實現(xiàn)響應式圖片

在 Bootstrap 版本 3 中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應式布局。其實質(zhì)是為圖片設置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。
對于圖片的大小限制一定要在圖片的父級元素進行限制。

5、利用bootstrap的柵格系統(tǒng)，下面列一下柵格系統(tǒng)的參數(shù)：

超小屏手機 (<768px) 小屏幕平板(>=768px) 中等屏桌面(>=992px) 大屏桌面(>=1200px)
類前綴 .col-xs .col-sm .col-md .col-lg
列數(shù) 12 12 12 12
.container最大寬度 None(自動) 750px 970px 1170px
舉個移動設備和桌面的例子：


<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

還有更多對響應式的支持，就不一一列舉了。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

Bootstrap：
 

1. 概念： 一個前端開發(fā)的框架，Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。
    * 框架:一個半成品軟件，開發(fā)人員可以在框架基礎(chǔ)上，在進行開發(fā)，簡化編碼。
    * 好處：
        1. 定義了很多的css樣式和js插件。我們開發(fā)人員直接可以使用這些樣式和插件得到豐富的頁面效果。
        2. 響應式布局。
            * 同一套頁面可以兼容不同分辨率的設備。

2. 快速入門
  
    1. 下載Bootstrap
    2. 在項目中將這三個文件夾復制
    3. 創(chuàng)建html頁面，引入必要的資源文件

3.演示案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>Bootstrap HelloWorld</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <h1>你好，世界！</h1>
</body>
</html>
響應式布局
同一套頁面可以兼容不同分辨率的設備。
* 實現(xiàn)：依賴于柵格系統(tǒng)：將一行平均分成12個格子，可以指定元素占幾個格子
* 步驟：
    1. 定義容器。相當于之前的table、
        * 容器分類：
            1. container：兩邊留白
            2. container-fluid：每一種設備都是100%寬度
    2. 定義行。相當于之前的tr   樣式：row
    3. 定義元素。指定該元素在不同的設備上，所占的格子數(shù)目。樣式：col-設備代號-格子數(shù)目
        * 設備代號：
            1. xs：超小屏幕 手機 (<768px)：col-xs-12
            2. sm：小屏幕 平板 (≥768px)
            3. md：中等屏幕 桌面顯示器 (≥992px)
            4. lg：大屏幕 大桌面顯示器 (≥1200px)

    * 注意：
        1. 一行中如果格子數(shù)目超過12，則超出部分自動換行。
        2. 柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點大小的設備。
        3. 如果真實設備寬度小于了設置柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行。

CSS樣式和JS插件
 

1. 全局CSS樣式：
    * 按鈕：class="btn btn-default"
    * 圖片：
        *  class="img-responsive"：圖片在任意尺寸都占100%
        *  圖片形狀
            *  <img src="..." alt="..." class="img-rounded">：方形
            *  <img src="..." alt="..." class="img-circle"> ： 圓形
            *  <img src="..." alt="..." class="img-thumbnail"> ：相框
    * 表格
        * table
        * table-bordered
        * table-hover
    * 表單
        * 給表單項添加：class="form-control" 
2. 組件：
    * 導航條
    * 分頁條
3. 插件：
    * 輪播圖

 

演示案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>Bootstrap HelloWorld</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .paddtop{
            padding-top: 10px;
        }
        .search-btn{
            float: left;
            border:1px solid #ffc900;
            width: 90px;
            height: 35px;
            background-color:#ffc900 ;
            text-align: center;
            line-height: 35px;
            margin-top: 15px;
        }
 
        .search-input{
            float: left;
            border:2px solid #ffc900;
            width: 400px;
            height: 35px;
            padding-left: 5px;
            margin-top: 15px;
        }
        .jx{
            border-bottom: 2px solid #ffc900;
            padding: 5px;
        }
        .company{
            height: 40px;
            background-color: #ffc900;
            text-align: center;
            line-height:40px ;
            font-size: 8px;
        }
    </style>
</head>
<body>
 
   <!-- 1.頁眉部分-->
   <header class="container-fluid">
       <div class="row">
           <img src="img/top_banner.jpg" class="img-responsive">
       </div>
       <div class="row paddtop">
           <div class="col-md-3">
               <img src="img/logo.jpg" class="img-responsive">
           </div>
           <div class="col-md-5">
               <input class="search-input" placeholder="請輸入線路名稱">
               <a class="search-btn" href="#">搜索</a>
           </div>
           <div class="col-md-4">
               <img src="img/hotel_tel.png" class="img-responsive">
           </div>
 
       </div>
       <!--導航欄-->
       <div class="row">
           <nav class="navbar navbar-default">
               <div class="container-fluid">
                   <!-- Brand and toggle get grouped for better mobile display -->
                   <div class="navbar-header">
                       <!-- 定義漢堡按鈕 -->
                       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                       </button>
                       <a class="navbar-brand" href="#">首頁</a>
                   </div>
 
                   <!-- Collect the nav links, forms, and other content for toggling -->
                   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                       <ul class="nav navbar-nav">
                           <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>
                           <li><a href="#">Link</a></li>
 
                       </ul>
                   </div><!-- /.navbar-collapse -->
               </div><!-- /.container-fluid -->
           </nav>
 
       </div>
 
       <!--輪播圖-->
       <div class="row">
           <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
               <!-- Indicators -->
               <ol class="carousel-indicators">
                   <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                   <li data-target="#carousel-example-generic" data-slide-to="2"></li>
               </ol>
 
               <!-- Wrapper for slides -->
               <div class="carousel-inner" role="listbox">
                   <div class="item active">
                       <img src="img/banner_1.jpg" alt="...">
                   </div>
                   <div class="item">
                       <img src="img/banner_2.jpg" alt="...">
                   </div>
                   <div class="item">
                       <img src="img/banner_3.jpg" alt="...">
                   </div>
 
               </div>
 
               <!-- Controls -->
               <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                   <span class="sr-only">Previous</span>
               </a>
               <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                   <span class="sr-only">Next</span>
               </a>
           </div>
    </div>
 
 </header>
<!-- 2.主體部分-->
   <div class="container">
        <div class="row jx">
            <img src="img/icon_5.jpg">
            <span>黑馬精選</span>
        </div>
 
       <div class="row paddtop">
           <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/jiangxuan_3.jpg" alt="">
                    <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                    <font color="red">&yen; 699</font>
                </div>
           </div>
           <div class="col-md-3">
               <div class="thumbnail">
                   <img src="img/jiangxuan_3.jpg" alt="">
                   <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                   <font color="red">&yen; 699</font>
               </div>
 
           </div>
           <div class="col-md-3">
 
               <div class="thumbnail">
                   <img src="img/jiangxuan_3.jpg" alt="">
                   <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                   <font color="red">&yen; 699</font>
               </div>
           </div>
           <div class="col-md-3">
 
               <div class="thumbnail">
                   <img src="img/jiangxuan_3.jpg" alt="">
                   <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                   <font color="red">&yen; 699</font>
               </div>
           </div>
           </div>
           <div class="row jx">
               <img src="img/icon_6.jpg">
               <span>國內(nèi)游</span>
           </div>
           <div class="row paddtop">
               <div class="col-md-4">
                   <img src="img/guonei_1.jpg">
               </div>
               <div class="col-md-8">
                   <div class="row">
                       <div class="col-md-4">
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
                       </div>
                       <div class="col-md-4">
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
 
                       </div>
                       <div class="col-md-4">
 
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
                       </div>
 
                   </div>
                   <div class="row">
                       <div class="col-md-4">
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
                       </div>
                       <div class="col-md-4">
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
 
                       </div>
                       <div class="col-md-4">
 
                           <div class="thumbnail">
                               <img src="img/jiangxuan_3.jpg" alt="">
                               <p>上海直飛三亞5天4晚自由行(春節(jié)預售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</p>
                               <font color="red">&yen; 699</font>
                           </div>
                       </div>
                        </div>
 
           </div>
 
       </div>
   </div>
   <!-- 3.頁腳部分-->
   <footer class="container-fluid">
       <div class="row">
           <img src="img/footer_service.png" class="img-responsive">
       </div>
       <div class="row company">
           CSDN博客楊校老師 版權(quán)所有Copyright 2017-2019, All Rights Reserved 魯ICP備19007759號-1
       </div>
 
   </footer>
</body>
</html> 
藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

本文就以「企業(yè)內(nèi)部權(quán)限分配平臺」的需求為案例，整理了之前處理復雜需求的一些思路。講講在交互設計的過程中，如何避免以上兩種情況，讓我們的工作更好地服務用戶，體現(xiàn)價值。

理解需求

首先，我想任何設計師在設計產(chǎn)品的時候第一步都是理解需求，這包括了需求的目標背景、角色場景、產(chǎn)品邏輯等，不同的需求側(cè)重點會不同。以「企業(yè)內(nèi)部權(quán)限分配平臺」的需求為例，目標背景和角色都比較簡單，但是一般涉及權(quán)限的產(chǎn)品，背后的邏輯就會很復雜，場景情況也很多。

和產(chǎn)品溝通，和用戶溝通，甚至網(wǎng)上找資料，都是理解需求的一些好方法。比如本次設計的需求是關(guān)于權(quán)限分配，這一篇《網(wǎng)易高手：角色權(quán)限設計的100種解法》的文章，就很好地幫助我理解權(quán)限分配背后的設計邏輯。

包括理解需求內(nèi)的專有名詞，為其建立特殊的標識樣式，也是幫助自己、團隊、用戶更好地理解產(chǎn)品需求的一種方式。

△ 名詞解釋

需求結(jié)構(gòu)化

我們在最初思考需求的時候，肯定會從場景/問題出發(fā)，思考怎么去解決這個問題，是以「人」的思維來思考這個問題的，這是必然的，也是正確的。但此時我們的思維是散點式的，例如當我們想到權(quán)限分配的需求時，可能會說：這次我們要新增一個「崗位」的概念，讓權(quán)限和崗位綁定，不要和人綁定。對了，還有人員離職這個問題困擾業(yè)務很久了，我們這次要在人員離職的時候進行……

所以，在最初的需求框架確定后，我得到的是這樣兩段文字：

看上去已經(jīng)非常全面了，但由于我們是散點式地收集需求，很多時候可能還是會有遺漏，或者說錯誤關(guān)聯(lián)了內(nèi)在邏輯，導致一些邏輯沖突、漏洞。

此時，我們需要將我們的思維從「散點式收集」轉(zhuǎn)為「結(jié)構(gòu)化梳理」。從需求說明里抽絲剝繭，我們可以得到：

• 用戶角色有三類：超級管理員、業(yè)務管理員、HR；
• 操作對象是：部門、崗位、人員、權(quán)限包；
• 可執(zhí)行的操作包括傳統(tǒng)的：增、刪、改、查，還有和本次業(yè)務相關(guān)的「關(guān)聯(lián)」，即權(quán)限的賦予。

各個對象之間的關(guān)系又是怎樣呢？我們把所有的對象兩兩組合，再把沒有關(guān)系的刪掉。

也就是：

• 在部門可以下設立崗位，崗位必須從屬部門；
• 人員必須從屬某一部門；
• 人員必須從屬某一崗位；
• 權(quán)限包可以賦予給部門；
• 權(quán)限包可以賦予給崗位；
• 人員和權(quán)限包沒有任何直接關(guān)聯(lián)，這也是本次權(quán)限分配的核心。

這個具體的業(yè)務邏輯并不重要，不需要去費心理解，重要的是這樣一種結(jié)構(gòu)化思考的方法，可以應用在后續(xù)各種各樣的設計中。

對象間的關(guān)聯(lián)，再和我們剛才梳理的人物、操作相結(jié)合，就可以還原成一系列的需求描述：「角色」可以在「A對象」下「操作」「B對象」，例如：超級管理員可以在部門下新增崗位。

至此，我們已經(jīng)可以建立「需求→功能對應表」：

其中，紅色部分都是在之前散點式的需求羅列中沒有考慮到的功能點，通過結(jié)構(gòu)化的梳理，我們可以提前把它們都一一補齊。

這個過程可以減少我們最小顆粒功能點的遺漏，避免在做完大部分設計后，突然發(fā)現(xiàn)遺漏了某個功能，任務時間點又已經(jīng)到了，慌慌忙忙地加功能，就可能會影響整體的設計思路和框架。

設計的減法：只考慮主流程

完成了功能點的整理歸納后，就可以開始我們的界面設計了。在最初的界面設計中，這三點需要做減法：

• 優(yōu)先進行框架設計，不要在一開始就考慮細節(jié)；
• 優(yōu)先完成主流程，再考慮異常場景；
• 按照功能對應表將各個模塊獨立設計完成，再添加快捷操作。

當然，可以先把可能存在的異常、細節(jié)都記錄下來，以便后續(xù)補充。

比如，在人員權(quán)限分配的界面結(jié)構(gòu)中，分為三個大模塊：

在有了界面框架和功能對應表后，我們做設計會變得比較簡單，按照之前整理的「需求→功能對應表」，把每個小顆粒的功能細節(jié)填充到界面框架內(nèi)即可。

設計的加法：回歸場景，考慮細節(jié)

當主流程設計完畢之后，我們就要開始做加法了，在之前，我們一直是用一種純理性的視角來完成我們的設計，保持純理性的設計會有兩個問題：

• 很多業(yè)務場景靠邏輯思維是無法想象的，必須設身處地站在用戶的角度去思考，才能理解場景，進而補充可能的體驗細節(jié)。
• 純理性的設計，可能在功能點上是完整的，但在用戶體驗上是缺失的。

例如，純從邏輯思維角度你能想到在一個企業(yè)里有人是沒有任何部門歸屬的嗎？然而現(xiàn)實中就存在這樣的情況──外包人員。不結(jié)合實際場景，我們也不知道用戶一天需要處理多少次重復操作，目前的設計對他是否足夠便捷。

作為一個企業(yè)內(nèi)部權(quán)限分配平臺，我們可以把部?、崗位、人員等對象作為初始線索，站在不同的用戶使用角度，沿著線索去全面地思考場景，修改功能。有一些實在難以理解的業(yè)務，找用戶聊聊也是一個好方法。

很快，我們就找到了下面這些特殊場景。

1. 人員變動

• 新增人員流程：找到新加入部門→找到崗位→添加人，由于企業(yè)內(nèi)部還有一個最基礎(chǔ)的 OA 系統(tǒng)，那么HR是否會需要重復操作，一個人員在不同平臺添加兩次？是否增加了他的工作成本？
• 人員變動頻繁，是否容易遺忘？

處理方法：行政架構(gòu)自動同步，紅點待辦。

我們與 OA 系統(tǒng)數(shù)據(jù)打通，自動形成四類待辦紅點：人員新增、人員離職、行政部門新增、行政部門刪除。

這樣 HR 就不需要重復做新人員的添加操作，只需要業(yè)務管理員把 OA 內(nèi)無法覆蓋的人員崗位設定好就可以，也不會出現(xiàn)遺漏的情況。

2. 高管兼職

例如某位高管：本身為 A 部門負責人，臨時兼任 B 部門負責人，那么當他不再負責 B 部門時，該如何處理他的崗位？離職？轉(zhuǎn)崗？似乎都不合適。

處理方法：新增崗位移除功能。

3. 外包人員

了解到現(xiàn)實情況中，外包人員是沒有部門歸屬的，但是實際上他們肯定也有自己負責的業(yè)務范圍和崗位，在初始化時如何安置沒有部門的人？

處理方法：新增一個部門，叫做「無崗位人員」，并且標紅作為待辦，提醒操作者去處理這些「無崗位人員」。

4. 人員離職/轉(zhuǎn)崗

在進行功能設計整合時，我考慮是否「人員離職」應該叫「人員刪除」更系統(tǒng)化？是否可以直接整合為一個「人員編輯」的功能，將離職、轉(zhuǎn)崗的操作合并？（實際上這2個功能操作起來確實比較相似）

處理方法：最終我依然保留了「人員離職」、「人員轉(zhuǎn)崗」的功能，因為這樣更場景化，用戶清晰地知道自己當前該操作什么。

目前對一個人進行離職操作的路徑是：找到原部門→找到崗位→找到人→處理離職，而我們的企業(yè)有 2500+ 員工，對于離職操作者 HR 來說，這個路徑是否現(xiàn)實？是否快捷？

處理方法：新增搜索功能，直接搜索人名→處理離職，這個功能也方便了其他找人的場景。

5. 更多

諸如此類的考慮還有很多，例如新建部門的時候是否會有空部門，在企業(yè)進行組織架構(gòu)重組時是否會有大批量的人員、組織變動，進而需要有批量操作等等。找到最初的線索，站在用戶的角度沿著線索思考，進行全局掃描，就會發(fā)現(xiàn)很多需要做加法的地方，發(fā)現(xiàn)的方式可以是觀察、訪談、思考等任何方式。

在已經(jīng)保證了主流程的簡潔、清晰后，再用全局掃描的方式去搜集特殊場景，給我們的設計做加法，可以保證我們整體的設計框架是清晰可用的，而特殊場景是散落在骨干上的各種小分支。

如果我們可以做到，對所有的主干場景、分支場景了然于心，并且有自己的優(yōu)先級考慮，那么對于項目成員、用戶提出的質(zhì)疑，我們也有足夠的理由來證明自己設計的合理性。

當然，場景基本考慮全面后，還有最后一步，就是統(tǒng)一交互，完善細節(jié)，這一步也是設計上的加法。

總結(jié)

以上，就是一個針對復雜需求的加減設計法案例，總結(jié)來說有四個大步驟：

• 從實際場景出發(fā)，發(fā)現(xiàn)問題，理解需求；
• 需求結(jié)構(gòu)化：把本源的場景、需求結(jié)構(gòu)化成功能對應表；
• 設計的減法：先解決最根本的問題；
• 設計的加法：回歸場景，全面考慮。

所以，交互設計師是需要理性和感性的結(jié)合，要有抽絲剝繭，提煉總結(jié)的能力，也要有貼近用戶關(guān)注情感的細膩。把自己的工作規(guī)范化，減少無效付出，也是我們的一種能力。希望本篇文章對新人設計師有一些幫助，也歡迎大家一起探討交流。

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

有這樣一種常見的需求：有一個搜索框，需要根據(jù)用戶的輸入進行實時的查詢。也就是說用戶每輸入一個字符就要發(fā)送一次請求。

想到的做法是監(jiān)聽輸入框的keyup時間然后在回調(diào)里發(fā)送異步請求。

這樣做的不足也很明顯：

其實我們并不需要用戶每次輸入時都發(fā)送請求，這樣會給服務器造成不必要的壓力。

因為發(fā)送的是異步請求，有可能查詢的結(jié)果和最后輸入的內(nèi)容并不匹配。

如何解決以上兩種問題呢？ 有兩種解決方案

首先我們規(guī)定當用戶停止輸入1秒（具體時間根據(jù)自己需求而定）后再根據(jù)輸入框的值發(fā)送請求。
其次我們利用定時器來解決以上問題。
第一種方案：直接看代碼吧

vat timer
$('.input').on('keyup', function(e) {
    clearTimeout(timer)
    timer = setTimeout(function() {
      // do something
    }, 1000)
})

首先定義一個定時器timer
監(jiān)聽輸入框的keyup事件，在回調(diào)函數(shù)里先清除timer，這一步總能保證在用戶停止輸入1秒后執(zhí)行最后一個timer。如果用戶輸入的間隔小于1秒就不會執(zhí)行timer
這么寫似乎不太抽象，而且定義了一個全局變量timer，不友好！稍加改動一下：

function debounce(func,delay){
    var timer
    return function(){
        clearTimeout(timer)
        var event = arguments[0]  // 獲取原生event參數(shù)
        timer = setTimeout(function(){
            func(event)
        },delay)
    }
}
function handle(event){
    // do something 
}
$('.input').on('keyup', debounce(handle, 1000))

這樣是不是復用性更高，我們只需要在handle函數(shù)中寫我們的處理邏輯就可以了。而且沒有了全局變量，避免了全局污染的可能??！

*第二種方案： *

var lastTime
$('.input').on('keyup', function(e) {
    lastTime = e.timeStamp
    setTimeout(function() {
        console.log('timeout')
        if (lastTime == e.timeStamp) {
            // do something
        }
    }, 1000)
})

首先定義一個時間戳來保存最后一次輸入的時間
然后1秒后在定時器里判斷保存的時間戳和觸發(fā)事件的時間戳e.timeStamp是否相同，只要1秒內(nèi)又輸入了內(nèi)容，e.timeStamp就回變化。
但是這種寫法有個弊端，用戶鍵入幾次就會執(zhí)行幾次setTimeout，也就是說當用戶連續(xù)鍵入多個字符后，會有多個任務被推入待執(zhí)行隊列，然后每隔1秒執(zhí)行，只是在執(zhí)行的時候判斷要不要發(fā)送異步請求，這種方式不會發(fā)送多余的異步請求，但是會執(zhí)行多余的任務，這無疑浪費了性能。

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

DOM樹

                                 

    在訪問頁面時，需要與頁面中的元素進行交互式的操作。在操作中，元素的訪問是最頻繁、最常用的，主要包括對元素屬性、內(nèi)容、值CSS的操作。

一、操作元素的屬性

attr()   prop() 獲取或設置元素的屬性值

兩者區(qū)別：簡單來說，對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。對于HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

針對屬性對象不同

prop( )是針對Dom元素屬性，attr( )針對HTML元素屬性，和attribute與property區(qū)別一樣。

用于設置的屬性值類型不同

attr()函數(shù)操作的是文檔節(jié)點的屬性，因此設置的屬性值只能是字符串類型，如果不是字符串類型，也會調(diào)用其toString()方法，將其轉(zhuǎn)為字符串類型。

prop()函數(shù)操作的是JS對象的屬性，因此設置的屬性值可以為包括數(shù)組和對象在內(nèi)的任意類型。

應用版本不同

attr()是jQuery 1.0版本就有的函數(shù)，prop()是jQuery 1.6版本新增的函數(shù)。毫無疑問，在1.6之前，你只能使用attr()函數(shù)；1.6及以后版本，你可以根據(jù)實際需要選擇對應的函數(shù)。

其他不同

對于表單元素的checked、selected、disabled等屬性，Attr()方法拿不到值，請使用prop()函數(shù)來設置或獲取checked、selected、disabled等屬性。對于其它能夠用prop()實現(xiàn)的操作，也盡量使用prop()函數(shù)。如下圖代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="button" id="btn1" value="按鈕">
<input type="button" id="btn2" value="按鈕">
<script>
    //操作元素的屬性
    //attr() prop()獲取或設置元素的屬性值
    $("#btn1").attr("value","按鈕1");//將#btn1的value值改為按鈕1
    $("#btn1").prop("value","按鈕2");//將#btn1的value值改為按鈕2
    console.log( $("input[type='button']").prop("value"));//獲取#btn1的value值,輸出為按鈕2
    console.log($("#btn2").attr("value"));//獲取#btn1的value值,輸出為按鈕
    //設置多個屬性值
    $("input[type='button']").prop({
        width:"200px",
        value:"hello"
    });//同時設置寬度為100px,value值為hello
    //根據(jù)輸出結(jié)果，width值設置失敗，value值設置成功
    console.log($("input[type='button']").prop("width"));//0
    console.log($("input[type='button']").attr("width"));//0
    $("input[type='button']").attr({
        width:"200px",
        value:"HELLO"
    })//同時設置寬度為200px,value值為HELLO
    //根據(jù)輸出結(jié)果可以看到，width和value均設置成功
    console.log($("input[type='button']").prop("width"));//0
    console.log($("input[type='button']").attr("width"));//200px
 
//    var btn=$("input[type='button']");
//    btn.attr("data-src","pink");
//    console.log(btn.attr("data-src"));//pink
//    console.log(btn.prop("data-src"));//undefined
    
    
    var btn=$("input[type='button']");
    btn.prop("data-src","pink");
    console.log(btn.attr("data-src"));//undefined
    console.log(btn.prop("data-src"));//pink
 
</script>
二、刪除元素的屬性

removeAttr( name ) ,其中name為元素屬性的名稱

removeProp( name ) ,其中name為元素屬性的名稱

 

三、元素內(nèi)容的操作

在JQuery中，操作元素內(nèi)容的方法包括html( )和text( )。前者與JavaScript中的innerHTML屬性類似，即獲取或設置元素的HTML內(nèi)容；后者類似于JavaScript中的innerText屬性，即獲取或設置元素的文本內(nèi)容。區(qū)別如下：

語法格式 參數(shù)說明 功能描述
html() 無參數(shù) 用于獲取元素的HTML內(nèi)容
html(val) val參數(shù)為元素的HTML內(nèi)容 用于設置元素的HTML內(nèi)容
text() 無參數(shù) 用于獲取元素 的文本內(nèi)容
text(val) val參數(shù)為元素的文本內(nèi)容 用于設置元素的文本內(nèi)容
<script>
    //js中的寫法 innerHTML  innerText
    var sd=document.getElementById("block");
    sd.innerText="小貓吃魚";
    console.log(sd.innerHTML);//小貓吃魚
    console.log(sd.innerText);//小貓吃魚
//    //jquery  html()  text() 和js一致  獲取或設置元素的html值或文本值
    console.log($("#block").html());//小貓吃魚
    console.log($("#block").text());//小貓吃魚
    $("#block").text("小貓抓老鼠");//修改innerText內(nèi)容
    console.log($("#block").html());//小貓抓老鼠
    console.log($("#block").text());//小貓抓老鼠
    $("#block").html("小貓吃肉肉");//修改innerHTML內(nèi)容
    console.log($("#block").html());//小貓吃肉肉
    console.log($("#block").text());//小貓吃肉肉
</script>
四、操作表單元素的值

val()   獲取或設置表單元素的value值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" id="txt" value="請輸入...">
<script>
    console.log( $("#txt").val());// 獲取#txt的value值  輸出為：請輸入...
    $("#txt").val("12345");//修改#txt的value值為12345
    console.log( $("#txt").val());//12345
</script>
</body>
</html>
五、元素樣式的操作

1.直接設置元素樣式值

在JQuery中，通過css()方法為某個指定的元素設置樣式值，語法格式如下：

css(name,value) ,其中name為樣式名稱，value為樣式的值

css()可以設置樣式也可以獲取樣式



2.增加CSS類別

通過addClass()方法增加元素類別的名稱，語法格式如下：

addClass(class) ,其中參數(shù)class為類名稱，可以同時增加多個，用空格隔開即可，如addClass(class0 class1 class2 ...)

3.刪除CSS類別

與addClass()方法相對應，removeClass()方法用于刪除類別，語法格式與addClass()相同，如果不設定參數(shù)，則刪除元素中的所有類名稱

4.類別切換

通過toggleClass()方法切換不同的元素類別，語法格式如下:

toggleClass(class) ,其中參數(shù)class為類別名稱，其功能是當元素中含有名稱為class的CSS類別時，刪除該類別，若沒有，則增加該類別

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btndata">按鈕</button>
<script>
    $("#btn").addClass("btn1");//追加一個類名稱
    $("#btn").addClass("btn2 btn3");//追加多個類名稱
    $("#btn").removeClass("btn2 btn1");//移除類名稱
    $("#btn").removeClass();//移除所有類名稱
    $("#btn").toggleClass("btn1");//類的切換 toggleClass()  如果有類名稱則替換  如果沒有就添加
</script>
</body>
</html>
六、jquery操作子父節(jié)點

children()  找父元素里面的子節(jié)點

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
    <li class="lilist">1</li>
    <li class="lidata">2</li>
    <span>6</span>
    <li class="lilist">3</li>
    <span>5</span>
    <li class="lilist">4</li>
    <span>7</span>
</ul>
<script>
        console.log($("ul").children());//輸出ul 下的所有子節(jié)點
        console.log($("ul").children()[0]);//輸出ul下索引為0的子節(jié)點
        console.log($("ul>li").first());//輸出ul里面第一個li
        console.log($("ul>li").last());//輸出ul里面最后一個li
        console.log($("ul>li").eq(2));//eq()  根據(jù)索引找元素
        console.log($("ul>li").first().siblings(".lilist"));//找同胞元素  輸出和first()相同類名稱的元素
        console.log($("ul>li").eq(1).prev());//找當前元素的前一個元素
        console.log($("ul>li").eq(2).prevAll("span"));//當前元素前面的所有指定元素
        console.log($("ul>li").eq(2).prevAll());//當前元素前面的所有元素
        console.log($("ul>li").eq(1).next());//找當前元素的下一個元素
        console.log($("ul>li").eq(1).nextAll("li"));//當前元素后面的所有指定元素
        console.log($("ul>li").eq(1).nextAll());//當前元素后面的所有元素
        console.log($("ul>li").eq(0).is(".qq"));//is() 判斷當前對象是誰  輸出true  or  false  當前元素與類名稱相符  輸出true
</script>
</body>
</html>
七、JQuery中的尺寸問題

下面以高度為例進行說明

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.9.1.min.js"></script>
    <style>
       .ss{
           width: 200px;
           height: 200px;
           margin: 10px 10px;
           padding: 20px 20px;
       }
    </style>
</head>
<body>
<div class="ss"></div>
<script>
        console.log($(".ss").height());//200  可視區(qū)域  不包括內(nèi)外邊距 
        console.log($(".ss").innerHeight());//240  包括內(nèi)邊距的距離  
        console.log($(".ss").outerHeight());//240  包括內(nèi)邊距的距離
</script>
</body>
</html>
藍藍設計( www.alimai.net )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。