乱码国产一区二区三区-精品久久久久免费极品大片-久久中文视频青草-亚洲福利片午夜在线-中文字幕久在线视频-色网中文一区av-亚洲欧洲在线播放-欧美日韩国产亚洲一区二区-久久精品视频991区二区-www.国产三级久久久

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

我們在設(shè)計中除了接觸到圖形，還需要了解文字的設(shè)計。特別的文字設(shè)計或者排版可以使整體的畫面效果更加有氛圍，甚至超過圖形表達(dá)的感受，更加直觀地表達(dá)出內(nèi)容的主旨。

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

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

拉伸的文字

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

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

1. 不同字體對比

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

2. 不同字形的對比

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

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

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

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

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

5. 設(shè)計嘗試

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

6. 拓展案例

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

虛實結(jié)合文字

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

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

1. 嘗試對比

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

2. 中文字體的嘗試

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

3. 設(shè)計嘗試

遞進(jìn)漸變的文字

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

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

1. 不同方式的嘗試對比

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

2. 中文字體的嘗試

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

擴展變化的文字

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

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

1. 比例值示意效果

2. 中文字體的嘗試

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

3. 設(shè)計嘗試

底紋的文字

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

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

1. 中文字體的嘗試

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

穿透的文字

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

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

1. 粗細(xì)對比嘗試

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

2. 中文字體的嘗試

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

3. 拓展案例

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

扭動的文字

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

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

1. 中文字體的嘗試

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

2. 設(shè)計嘗試

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

3. 拓展案例

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

立體層疊的文字

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

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

1. 不同的字體嘗試

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

2. 中文字體的嘗試

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

3. 拓展案例

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

顏色疊加的文字

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

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

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

1. 中文字體的嘗試

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

2. 拓展案例

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

立體空間的文字

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

1. 設(shè)計嘗試

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

2. 拓展案例

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

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

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

阿迪達(dá)斯的廣告：

Converse 的廣告：

Under Armour 的廣告：

除了一些品牌的設(shè)計，音樂唱片的封面也有應(yīng)用到這些類型的設(shè)計手法。

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

文字設(shè)計的拓展疊加

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

總結(jié)

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

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

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

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

從哪里開始

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

過渡模式

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

1、基于容器的過渡。

2、沒有容器的過渡。

基于容器的過渡 

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

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

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

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

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

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

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

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

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

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

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

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

沒有容器的過渡

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

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

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

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

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

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

最佳方案

把事情變的更簡單一些

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

*放慢動畫速度以顯示不同的動畫風(fēng)格

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

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

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

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

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

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

角色動畫可以增加趣味性

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

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

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

 

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

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

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

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

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

<!--這是一段導(dǎo)航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(){
//可用于設(shè)置自適應(yīng)屏幕，根據(jù)獲得的可視寬度（兼容性）判斷是否顯示
let w = document.documentElement.offsetWidth || document.body.offsetWidth;
if(w < 1000){
this.show = false;
}
})
我的目的是在移動設(shè)備中不顯示搜索欄（search-part）部分，那么利用v-show,和mounted配合，在掛載時檢測一下屏幕可視寬度，如果小于1000，則認(rèn)為是手機，v-show設(shè)為false,不顯示即可。

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

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

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

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

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

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

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

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

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

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


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

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

3、使用VW。了解下vw 與 vh單位，以viewport為基準(zhǔn)，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)響應(yīng)式圖片

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

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
舉個移動設(shè)備和桌面的例子：


<!-- 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>

還有更多對響應(yīng)式的支持，就不一一列舉了。

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

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

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

Bootstrap：
 

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

2. 快速入門
  
    1. 下載Bootstrap
    2. 在項目中將這三個文件夾復(fù)制
    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標(biāo)簽*必須*放在最前面，任何其他內(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>
響應(yīng)式布局
同一套頁面可以兼容不同分辨率的設(shè)備。
* 實現(xiàn)：依賴于柵格系統(tǒng)：將一行平均分成12個格子，可以指定元素占幾個格子
* 步驟：
    1. 定義容器。相當(dāng)于之前的table、
        * 容器分類：
            1. container：兩邊留白
            2. container-fluid：每一種設(shè)備都是100%寬度
    2. 定義行。相當(dāng)于之前的tr   樣式：row
    3. 定義元素。指定該元素在不同的設(shè)備上，所占的格子數(shù)目。樣式：col-設(shè)備代號-格子數(shù)目
        * 設(shè)備代號：
            1. xs：超小屏幕 手機 (<768px)：col-xs-12
            2. sm：小屏幕 平板 (≥768px)
            3. md：中等屏幕 桌面顯示器 (≥992px)
            4. lg：大屏幕 大桌面顯示器 (≥1200px)

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

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. 組件：
    * 導(dǎo)航條
    * 分頁條
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標(biāo)簽*必須*放在最前面，任何其他內(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>
       <!--導(dǎo)航欄-->
       <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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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é)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機)</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> 
藍(lán)藍(lán)設(shè)計( m.qdjdjx.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

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

新人設(shè)計師可能都會遇到這樣的問題：在設(shè)計一個復(fù)雜需求的時候，各種場景、可能性在腦中來回亂竄，常常覺得邏輯不夠嚴(yán)密。設(shè)計完成后，又被各方質(zhì)疑，提出各種異常場景，導(dǎo)致頻繁修改，縫縫補補。本文將和大家分享下解決以上問題的小方法。

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

理解需求

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

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

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

△ 名詞解釋

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

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

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

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

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

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

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

也就是：

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

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

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

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

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

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

設(shè)計的減法：只考慮主流程

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

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

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

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

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

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

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

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

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

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

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

1. 人員變動

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

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

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

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

2. 高管兼職

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

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

3. 外包人員

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

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

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

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

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

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

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

5. 更多

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

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

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

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

總結(jié)

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

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

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

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

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

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

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

這樣做的不足也很明顯：

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

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

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

首先我們規(guī)定當(dāng)用戶停止輸入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))

這樣是不是復(fù)用性更高，我們只需要在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，也就是說當(dāng)用戶連續(xù)鍵入多個字符后，會有多個任務(wù)被推入待執(zhí)行隊列，然后每隔1秒執(zhí)行，只是在執(zhí)行的時候判斷要不要發(fā)送異步請求，這種方式不會發(fā)送多余的異步請求，但是會執(zhí)行多余的任務(wù)，這無疑浪費了性能。

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

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

DOM樹

                                 

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

一、操作元素的屬性

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

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

針對屬性對象不同

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

用于設(shè)置的屬性值類型不同

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

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

應(yīng)用版本不同

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

其他不同

對于表單元素的checked、selected、disabled等屬性，Attr()方法拿不到值，請使用prop()函數(shù)來設(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()獲取或設(shè)置元素的屬性值
    $("#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值,輸出為按鈕
    //設(shè)置多個屬性值
    $("input[type='button']").prop({
        width:"200px",
        value:"hello"
    });//同時設(shè)置寬度為100px,value值為hello
    //根據(jù)輸出結(jié)果，width值設(shè)置失敗，value值設(shè)置成功
    console.log($("input[type='button']").prop("width"));//0
    console.log($("input[type='button']").attr("width"));//0
    $("input[type='button']").attr({
        width:"200px",
        value:"HELLO"
    })//同時設(shè)置寬度為200px,value值為HELLO
    //根據(jù)輸出結(jié)果可以看到，width和value均設(shè)置成功
    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屬性類似，即獲取或設(shè)置元素的HTML內(nèi)容；后者類似于JavaScript中的innerText屬性，即獲取或設(shè)置元素的文本內(nèi)容。區(qū)別如下：

語法格式 參數(shù)說明 功能描述
html() 無參數(shù) 用于獲取元素的HTML內(nèi)容
html(val) val參數(shù)為元素的HTML內(nèi)容 用于設(shè)置元素的HTML內(nèi)容
text() 無參數(shù) 用于獲取元素 的文本內(nèi)容
text(val) val參數(shù)為元素的文本內(nèi)容 用于設(shè)置元素的文本內(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一致  獲取或設(shè)置元素的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()   獲取或設(shè)置表單元素的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.直接設(shè)置元素樣式值

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

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

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



2.增加CSS類別

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

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

3.刪除CSS類別

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

4.類別切換

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

toggleClass(class) ,其中參數(shù)class為類別名稱，其功能是當(dāng)元素中含有名稱為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());//找當(dāng)前元素的前一個元素
        console.log($("ul>li").eq(2).prevAll("span"));//當(dāng)前元素前面的所有指定元素
        console.log($("ul>li").eq(2).prevAll());//當(dāng)前元素前面的所有元素
        console.log($("ul>li").eq(1).next());//找當(dāng)前元素的下一個元素
        console.log($("ul>li").eq(1).nextAll("li"));//當(dāng)前元素后面的所有指定元素
        console.log($("ul>li").eq(1).nextAll());//當(dāng)前元素后面的所有元素
        console.log($("ul>li").eq(0).is(".qq"));//is() 判斷當(dāng)前對象是誰  輸出true  or  false  當(dāng)前元素與類名稱相符  輸出true
</script>
</body>
</html>
七、JQuery中的尺寸問題

下面以高度為例進(jìn)行說明

<!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>
藍(lán)藍(lán)設(shè)計( m.qdjdjx.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。