如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
我們在設(shè)計(jì)中除了接觸到圖形，還需要了解文字的設(shè)計(jì)。特別的文字設(shè)計(jì)或者排版可以使整體的畫面效果更加有氛圍，甚至超過圖形表達(dá)的感受，更加直觀地表達(dá)出內(nèi)容的主旨。文字的設(shè)計(jì)方式有很多種，例如通過字體變形，結(jié)構(gòu)重組等方式來讓文字變得更加特別，但往往會(huì)讓我們耗費(fèi)比較多的時(shí)間。
因此我一直在思考有沒有一些既簡單又的設(shè)計(jì)方式來提高文字的設(shè)計(jì)感。在瀏覽國外的一些設(shè)計(jì)網(wǎng)站的過程中，做了一下文字設(shè)計(jì)形式方面的收集，并整理出十種我認(rèn)為具有代表性的文字設(shè)計(jì)形式。另外還參考這些設(shè)計(jì)方式，使用中文字體進(jìn)行了一些嘗試。
拉伸的處理手法，讓文字更具有張力，整體氛圍更具標(biāo)題感和圖形化，但依然保留著文字該有的識(shí)別度。常見于純文字排版的海報(bào)，既滿足閱讀需要，同時(shí)具有設(shè)計(jì)感。
拉伸與文字本身的字形、字體有著很大程度的關(guān)聯(lián)，并不是所有的文字都適合拉伸，例如下面的案例。
1. 不同字體對比
從方案嘗試中看出，左邊字體在進(jìn)行拉伸之后，文字本身的結(jié)構(gòu)會(huì)遭到破壞，而右邊的效果可以較為接受。因此在設(shè)計(jì)的過程中盡量選擇可適用于拉伸的字體，另外在拉伸的過程中需要對細(xì)節(jié)重新處理，使字體保留原有字體的細(xì)節(jié)美感。
2. 不同字形的對比
從下面案例中對比，O 在進(jìn)行上下拉伸的時(shí)候效果比較好，而左右拉伸的時(shí)候會(huì)失去字體本身的美感，而 Y 在上下左右拉伸后整體視覺效果都相對平衡。
3. 細(xì)節(jié)處理對比
優(yōu)化字體線條的細(xì)節(jié)可以使得整體文字更加規(guī)整、方正（右邊）。而未進(jìn)行細(xì)節(jié)的設(shè)計(jì)則會(huì)顯得筆畫參差不齊（左邊）。
4. 傳統(tǒng)與現(xiàn)代對比
傳統(tǒng)的字體拉伸后（如下圖中間的字體），字體本身的韻味就失去了，因此不建議對一些較為傳統(tǒng)的字體進(jìn)行拉伸設(shè)計(jì)。
5. 設(shè)計(jì)嘗試
中文字的筆畫比較多樣性，因此在細(xì)節(jié)的設(shè)計(jì)上比英文來得更加復(fù)雜，在處理「撇、捺、點(diǎn)、折、彎、勾」時(shí)需要保持原本的筆畫結(jié)構(gòu)性。
6. 拓展案例
結(jié)合實(shí)際要表達(dá)的內(nèi)容，使用拉伸的設(shè)計(jì)手法，例如結(jié)合物體，疊加顏色或者交錯(cuò)拉伸等。
虛實(shí)結(jié)合即為線面/陰陽的設(shè)計(jì)手法，通過虛實(shí)的處理，可以突出一組或一段文字中的重點(diǎn)信息。在一些強(qiáng)調(diào)主次的設(shè)計(jì)中，可以嘗試這種方式來做區(qū)分，線面結(jié)合的處理手法讓原有都是面的字體多了一些透氣感和空間感。
虛實(shí)處理的方法需要考慮本身字體的粗細(xì)，過分纖細(xì)的字體效果可能并不明顯。
1. 嘗試對比
從對比中，發(fā)現(xiàn)粗體相比于細(xì)體來得更加直接更容易出效果，對比明確。
2. 中文字體的嘗試
從嘗試中來看，與上面中的結(jié)論較為一致，較細(xì)的字體使用虛實(shí)結(jié)合效果并不理想。對于書法體的應(yīng)用，更多需要考慮字體的收邊效果是否工整，收邊過碎，會(huì)影響在描邊之后的細(xì)節(jié)美感。
3. 設(shè)計(jì)嘗試
通過遞增或者遞減的設(shè)計(jì)手法，讓原本簡單重復(fù)的文字元素，變得更加具有層次感和節(jié)奏感，讓文字的生命力變得更加豐富多樣。
在設(shè)計(jì)的過程中需要提前規(guī)范好各個(gè)字體之間的差異關(guān)系及變化的效果過程。按照一定的數(shù)值倍數(shù)差異比進(jìn)行變化。
1. 不同方式的嘗試對比
在嘗試的時(shí)候發(fā)現(xiàn)，粗細(xì)變化的模式可能更多會(huì)依賴于字體本身的模式。
2. 中文字體的嘗試
中文在使用遞進(jìn)漸變的方式中需要考慮整體文字的結(jié)構(gòu)感和塊狀感，由于字形較為復(fù)雜，整體視覺效果會(huì)過于零碎。
與遞進(jìn)漸變接近但卻又有差別的文字設(shè)計(jì)形式。擴(kuò)展變化的文字具有張力的同時(shí)有一定的速度感和發(fā)射性，就像向四周展開的波紋效果，具有延續(xù)性。
按文字的行高或者字寬作為基礎(chǔ)值，按一定的比例，對文字進(jìn)行破形切割處理，上下左右進(jìn)行擴(kuò)展發(fā)散。
1. 比例值示意效果
2. 中文字體的嘗試
外觀的完整度還算可以，但由于中文本身自有的特性（筆畫較為豐富多樣），因此在擴(kuò)展層次的數(shù)量上需要進(jìn)行一定的控制，不宜過多，以短語或標(biāo)題使用較好，避免過于形式而導(dǎo)致文字識(shí)別性降低。
3. 設(shè)計(jì)嘗試
文字作為紋理出現(xiàn)在畫面中，區(qū)別于圖形化的紋理。既有圖形感，同時(shí)可以輔助傳達(dá)一定的信息和態(tài)度。
在字體的選擇上盡量適用字形較為簡潔的字體，避免影響前景內(nèi)容的展示。設(shè)計(jì)上可以結(jié)合其他的設(shè)計(jì)形式，例如虛實(shí)結(jié)合/拉伸變形/擴(kuò)展變化等方式，提升畫面的豐富程度。
1. 中文字體的嘗試
常規(guī)的中文字體，整體效果還算不錯(cuò)。但結(jié)合中國書法字作為底紋，可以讓整體的設(shè)計(jì)更具有不同于英文的設(shè)計(jì)感，整體效果更具有力量感，因此建議在設(shè)計(jì)中文底紋的時(shí)候可以大膽嘗試中文書法字。
通過疊加的方式，讓原本簡單的文字和背景產(chǎn)生了融合。既提升了背景的層次感，又讓文字變得具有設(shè)計(jì)感。
粗細(xì)的字體會(huì)產(chǎn)生不一樣的視覺感受，較細(xì)的字體會(huì)產(chǎn)生若隱若現(xiàn)的視覺效果，文字的識(shí)別性會(huì)稍弱，較粗的字體識(shí)別度基本上沒有太大問題，因此在設(shè)計(jì)的過程中可以結(jié)合實(shí)際的情況選擇不同粗細(xì)的文字。
1. 粗細(xì)對比嘗試
穿透的文字設(shè)計(jì)，對于打造設(shè)計(jì)的大片感具有很突出的視覺效果。例如漫威的電影片頭設(shè)計(jì)。
2. 中文字體的嘗試
結(jié)合不同的語意使用不同的字體，再結(jié)合穿透的設(shè)計(jì)方式，使畫面具有中文的文藝感。
3. 拓展案例
結(jié)合實(shí)際的內(nèi)容設(shè)計(jì)，穿透文字的玩法還可以拓展出更多不一樣的設(shè)計(jì)，例如下面這些例子。
扭動(dòng)的設(shè)計(jì)，讓文字具有曲線的動(dòng)態(tài)感，提升了文字的裝飾性。不同曲線的動(dòng)態(tài)變化，賦予文字不同的律動(dòng)感。變形的文字并未影響到文字該有的識(shí)別性和閱讀感，卻具有了設(shè)計(jì)感。
如下面的三個(gè)案例，曲率的差別，賦予文字不同的動(dòng)態(tài)規(guī)則，有不同的視覺感知，有時(shí)柔美，有時(shí)卻具有速度感。因此在設(shè)計(jì)的時(shí)候，可根據(jù)具體的內(nèi)容設(shè)計(jì)不同的扭動(dòng)趨勢。
1. 中文字體的嘗試
對比可見較細(xì)的字體使用扭動(dòng)的設(shè)計(jì)，效果并不理想。由于中文筆畫的差異點(diǎn)，經(jīng)過扭動(dòng)之后整體外形較為不規(guī)整，而粗體的效果則較為規(guī)整，動(dòng)態(tài)曲線趨勢也較為明顯。
2. 設(shè)計(jì)嘗試
扭動(dòng)+虛實(shí)+底紋的效果。
3. 拓展案例
更高級(jí)的設(shè)計(jì)手法是利用自然環(huán)境的介質(zhì)結(jié)合文字，起到扭曲的視覺效果。
與擴(kuò)展變化有異曲同工之妙，文字通過一定的角度和位移間隔，由二維向三維的視覺效果進(jìn)行變化，讓文字更加多變化和有重量感、層次感。
立體層疊的設(shè)計(jì)對于字體本身具有一定的要求，較為纖細(xì)的字體出來的效果并不理想。
1. 不同的字體嘗試
從對比中看出，細(xì)體或較細(xì)的襯線字體，層疊后會(huì)出現(xiàn)銜接不上或視覺黑點(diǎn)的情況（如下面左圖和右圖）。因此設(shè)計(jì)時(shí)建議使用粗體，并且整體筆畫較為平均的字體（中間的圖）。
2. 中文字體的嘗試
雖然具有了層次感和空間感，但也會(huì)讓整體變得更加復(fù)雜，因此需要根據(jù)文字的多少情況進(jìn)行使用。
3. 拓展案例
立體層疊還不止單向的設(shè)計(jì)，例如可以進(jìn)行軌跡變化，向外擴(kuò)展層疊，或是增加一些顏色漸變來豐富整體的設(shè)計(jì)。
文字通過錯(cuò)位，疊加，顏色變化，透明度變化，切割等方式的設(shè)計(jì)之后，具有故障的視覺偏差感受。整體視覺感知類似雙重曝光的照片，文字具有豐富的層次感。
顏色疊加的效果，對于顏色的選擇極為重要，兩個(gè)顏色交錯(cuò)之間的顏色可以為過渡色或者互補(bǔ)色。
細(xì)體的效果并不理想（如上圖左邊第一個(gè)），建議設(shè)計(jì)的過程中使用較粗的字體，另外在使用的過程中需要考慮文字的識(shí)別度（如右邊的效果），重疊之后文字的識(shí)別度或多或是會(huì)受到影響。
1. 中文字體的嘗試
由于中文字比英文復(fù)雜，因此使用中文字在設(shè)計(jì)的時(shí)候，可以尋找一些共筆的地方進(jìn)行重疊（如下圖左邊的設(shè)計(jì)），利用字體筆畫粗細(xì)一致的情況下，進(jìn)行了邊與邊的重疊。另外在設(shè)計(jì)的過程中建議加大字間距，這樣可以避免不同文字的重疊，產(chǎn)生過度復(fù)雜的效果，影響文字的識(shí)別性（如下圖最右邊的設(shè)計(jì)）。
2. 拓展案例
在簡單的疊色之外，結(jié)合不同質(zhì)感和肌理，可以讓整個(gè)文字具有不一樣的視覺感受。
文字按照立方幾何結(jié)構(gòu)進(jìn)行排版，通過顏色差異，陰陽，線面等方式設(shè)計(jì)處理后形成空間感和立體感。相比于平面排列的文字更具有空間感和層次感，提升整體畫面的設(shè)計(jì)感。
1. 設(shè)計(jì)嘗試
使用空間錯(cuò)位結(jié)合虛實(shí)的設(shè)計(jì)，讓簡單重復(fù)的文字變得具有空間感和立體感。
2. 拓展案例
除了常規(guī)的空間打造，甚至可以融入到場景中或者結(jié)合物體本身的設(shè)計(jì)。
以上設(shè)計(jì)風(fēng)格，常常會(huì)在一些運(yùn)動(dòng)品牌的設(shè)計(jì)中看到。例如，Nike 的設(shè)計(jì)中應(yīng)到的文字，也會(huì)結(jié)合這些方式，來豐富和提高整體的設(shè)計(jì)感。
火箭隊(duì)出場片頭的字體應(yīng)用，線形字體疊加漸變的效果，具有層次感又有未來感。
阿迪達(dá)斯的廣告：
Converse 的廣告：
Under Armour 的廣告：
除了一些品牌的設(shè)計(jì)，音樂唱片的封面也有應(yīng)用到這些類型的設(shè)計(jì)手法。
我們除了在一些常規(guī)的媒介上會(huì)看到相關(guān)的文字設(shè)計(jì)，在這兩年的耐克或阿迪達(dá)斯的鞋子設(shè)計(jì)中，也會(huì)加入文字元素的設(shè)計(jì)，甚至球員會(huì)直接在鞋子上寫上文字。
文字設(shè)計(jì)的拓展疊加
文字的設(shè)計(jì)已經(jīng)成為一種新的設(shè)計(jì)趨勢，結(jié)合實(shí)際需要表達(dá)的想法，對于設(shè)計(jì)手法進(jìn)行活學(xué)活用是做出好設(shè)計(jì)的關(guān)鍵。當(dāng)然只有掌握了基礎(chǔ)手法才可能做到舉一反三的設(shè)計(jì)思考。在實(shí)際設(shè)計(jì)的過程中，我們往往不會(huì)是單獨(dú)使用某一種方式，而是對不同的設(shè)計(jì)手法進(jìn)行重組再設(shè)計(jì)，或者使用 2~3 種方式疊加設(shè)計(jì)來打造整體的畫面效果。如下：
在這十種基礎(chǔ)的文字設(shè)計(jì)中，通過結(jié)合發(fā)散可以迸發(fā)出遠(yuǎn)遠(yuǎn)不止于十種的創(chuàng)意設(shè)計(jì)。本次收集總結(jié)除了自身學(xué)習(xí)提高之外，希望可以起到拋磚引玉的作用，激發(fā)設(shè)計(jì)師對于文字的設(shè)計(jì)思考。
藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
動(dòng)效有助于讓UI具有更好的表現(xiàn)力及更易于使用，盡管具有如此大的潛力，但可能由于它是UI設(shè)計(jì)家族中的新成員之一，所以它大概是所有設(shè)計(jì)學(xué)科中最不被大眾所了解的。視覺設(shè)計(jì)和交互設(shè)計(jì)可追溯到早期的GUI，但由于動(dòng)畫必須由現(xiàn)代硬件來順暢的渲染，而且UI動(dòng)效和傳統(tǒng)動(dòng)畫之間的重疊區(qū)間也使得兩者之間的區(qū)分變得復(fù)雜。傳統(tǒng)動(dòng)畫需要掌握迪斯尼的12個(gè)基本原則，那么這是否意味著UI動(dòng)效也像傳統(tǒng)動(dòng)畫一樣復(fù)雜？我經(jīng)常能聽到人們說，動(dòng)效設(shè)計(jì)很復(fù)雜，不知道如何選擇相對應(yīng)的動(dòng)畫模式，但是我認(rèn)為至少在UI領(lǐng)域，動(dòng)效設(shè)計(jì)是可以很簡單的。
從哪里開始
動(dòng)效主要是通過UI元素之間關(guān)系過渡來幫助用戶瀏覽App。當(dāng)然還可以通過使用圖標(biāo)、勛章以及插畫動(dòng)效來為App增色，但是建立產(chǎn)品可用性應(yīng)該優(yōu)先于增加動(dòng)效表現(xiàn)力。在展示你的動(dòng)效設(shè)計(jì)技巧之前，讓我們先從設(shè)計(jì)一個(gè)基本的動(dòng)效開始，即產(chǎn)品導(dǎo)航之間的過渡。
過渡模式
在設(shè)計(jì)導(dǎo)航之間進(jìn)行動(dòng)效過渡時(shí)，簡單性和一致性是最關(guān)鍵的點(diǎn)。為了達(dá)到這個(gè)目的，我們將以下2種動(dòng)畫模式中進(jìn)行選擇：
1、基于容器的過渡。
2、沒有容器的過渡。
基于容器的過渡
文本、圖標(biāo)和圖片等元素在容器內(nèi)進(jìn)行分組
如果動(dòng)畫涉及像按鈕，卡片或列表這樣的內(nèi)容，則使用基于容器的動(dòng)畫設(shè)計(jì)，容器通常有很明顯的邊界，這種模式分為三個(gè)步驟：
1.使用Material的標(biāo)準(zhǔn)緩動(dòng)為容器設(shè)置動(dòng)畫（意味著它可以快速加速，然后逐漸的慢下來）。在下圖的示例中，容器的尺寸和圓角半徑從圓形按鈕動(dòng)畫過渡到填充整個(gè)屏幕的矩形。
2.縮放容器中的元素進(jìn)行寬度自適應(yīng)，將元素固定在頂部但是仍然存在容器內(nèi)，這樣在容器和內(nèi)部元素之間創(chuàng)建了清晰的關(guān)系鏈。
*放慢動(dòng)畫速度以說明元素在容器內(nèi)如何縮放
3.隨著容器加速，在過渡期間逐漸淡出消失。當(dāng)容器減速時(shí)輸入的元素逐漸淡入。當(dāng)元素進(jìn)行快速移動(dòng)時(shí)，通過淡入淡出來實(shí)現(xiàn)元素的更替。
*放慢動(dòng)畫速度以說明元素如何使用淡出淡出
將此模式應(yīng)用于所有涉及容器過渡的動(dòng)效，這樣會(huì)建立起來一致的動(dòng)效規(guī)則。這樣還使得開始和結(jié)束之間的關(guān)系更加清晰，因?yàn)樗鼈兪怯蓛蓚€(gè)動(dòng)畫容器互相銜接的。為了展示這種模式的靈活性，這里將它分為五種不同使用場景：
*放慢動(dòng)畫速度以說明容器如何連接開始和結(jié)束
有的容器只是使用Material的標(biāo)準(zhǔn)緩動(dòng)從屏幕外滑入，它滑動(dòng)的方向取決于與之關(guān)聯(lián)的組件位置。例如點(diǎn)擊左上角的抽屜導(dǎo)航，圖標(biāo)將從左側(cè)滑動(dòng)容器。
如果容器從屏幕邊界進(jìn)入，則它會(huì)淡入并放大。它并不是從0％的比例制作動(dòng)畫，而是從95％開始，以避免元素之間的過渡幅度太大。縮放動(dòng)畫使用Material的減速緩動(dòng)，這意味著它以峰值速度開始并逐漸減速停止。在元素退出時(shí)，容器會(huì)在沒有縮放動(dòng)畫的情況下淡出。為什么退出動(dòng)畫會(huì)有這樣微妙的設(shè)計(jì)呢，這樣做是便于將注意力集中在新內(nèi)容上。
*放慢動(dòng)畫速度以說明容器如何通過淡入淡出進(jìn)行縮放動(dòng)畫
沒有容器的過渡
有些作品將使用沒有容器的過渡來構(gòu)建動(dòng)效設(shè)計(jì)，例如點(diǎn)擊底部導(dǎo)航中的圖標(biāo)，將用戶帶到新的頁面，在這些情況下，將使用以下兩個(gè)步驟：
1、起始元素通過淡出消失，然后最終元素通過淡入進(jìn)入。
2、隨著最終元素逐漸出現(xiàn)，使用Material的減速運(yùn)動(dòng)來巧妙的展現(xiàn)。但同時(shí)縮放僅適用于新舊內(nèi)容的替換。
*放慢動(dòng)畫速度以說明沒有容器的過渡如何使用淡入淡出和縮放
如果開始和結(jié)束的組合元素具有清晰的空間或順序關(guān)系，則可以使用共享動(dòng)畫來強(qiáng)化它。例如當(dāng)下圖觸發(fā)導(dǎo)航組件時(shí)，開始和結(jié)束的動(dòng)畫都在垂直維度進(jìn)行滑動(dòng)，這加強(qiáng)了他們的垂直布局。當(dāng)點(diǎn)擊下右圖入門流程中的下一個(gè)按鈕時(shí)，從左向右水平動(dòng)畫強(qiáng)化了序列進(jìn)行的的概念。共享動(dòng)畫使用Material的標(biāo)準(zhǔn)緩動(dòng)。
*減慢動(dòng)畫以說明垂直和水平共享動(dòng)畫
最佳方案
把事情變的更簡單一些
鑒于其動(dòng)畫頻率高低與產(chǎn)品可用性密切相關(guān)，導(dǎo)航過渡通常應(yīng)該優(yōu)先于功能展示。引人注目的動(dòng)畫通常最適用于小圖標(biāo)，勛章，加載或空狀態(tài)等元素。下面這個(gè)簡單的案例可能不會(huì)得到Dribbble的那么多關(guān)注，但是它更像一個(gè)真實(shí)的產(chǎn)品。
*放慢動(dòng)畫速度以顯示不同的動(dòng)畫風(fēng)格
選擇合適的時(shí)間及緩動(dòng)類型
導(dǎo)航過渡應(yīng)該使用合適的時(shí)間，快速過渡優(yōu)先考慮功能，但是速度也不要太快，防止動(dòng)畫路徑迷失。根據(jù)動(dòng)畫占用的屏幕比例來選擇動(dòng)畫持續(xù)時(shí)間。由于導(dǎo)航過渡通常占據(jù)屏幕的大部分，因此300ms是一個(gè)比較有經(jīng)驗(yàn)的動(dòng)畫時(shí)長。相比之下，像開關(guān)按鈕這種小組件動(dòng)畫持續(xù)時(shí)間很短，大概在100ms左右。如果過渡感覺太快或太慢，請以25ms的增量調(diào)整其持續(xù)時(shí)間，直到它達(dá)到合適的動(dòng)畫節(jié)奏。
Easing描述了動(dòng)畫加速和減速。大多數(shù)導(dǎo)航過渡使用Material的標(biāo)準(zhǔn)緩動(dòng)，這是一種不對稱的緩動(dòng)類型。這意味著元素會(huì)快速加速運(yùn)動(dòng)，然后緩慢減速以將注意力集中在動(dòng)畫結(jié)束時(shí)。這種類型的緩動(dòng)為動(dòng)畫提供了自然的感覺，因?yàn)楝F(xiàn)實(shí)世界中的物體不會(huì)立即開始或停止移動(dòng)。如果動(dòng)畫看起來很僵硬或死板，那么可能是由于你選錯(cuò)了緩動(dòng)類型。
*放慢動(dòng)畫速度以說明不同的緩動(dòng)類型
本文所說的動(dòng)效模式在建立一種實(shí)用而又微妙的動(dòng)畫風(fēng)格。這適用于大多數(shù)產(chǎn)品，但某些品牌可能需要更激進(jìn)的動(dòng)效表達(dá)。要了解更多有關(guān)動(dòng)效的內(nèi)容，請閱讀Material motion指南。
一旦處理好了導(dǎo)航之間的過渡動(dòng)畫，在你的產(chǎn)品中添加角色動(dòng)畫的挑戰(zhàn)就開始了。這意味著簡單動(dòng)畫模式是不夠的，這時(shí)候動(dòng)傳統(tǒng)的動(dòng)畫工藝會(huì)真正閃耀起來。
角色動(dòng)畫可以增加趣味性
藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
最近折騰自己的網(wǎng)站，在自適應(yīng)方面發(fā)現(xiàn)有了很多新的方法，感嘆前端的技術(shù)真是日新月異，從以前只能這樣，到現(xiàn)在除了這樣，還可以那樣，甚至再那樣......技術(shù)永無止境啊。
回到主題，自適應(yīng)響應(yīng)式布局這個(gè)話題古老而新穎，從最早的不同分辨率的屏幕，到現(xiàn)在遍布各個(gè)生活角落的移動(dòng)設(shè)備，響應(yīng)式布局已經(jīng)成了幾乎所有互聯(lián)網(wǎng)公司必備的條件。在我的映像中，bootstrap一直是響應(yīng)式的頭號(hào)選擇，的確，其中的各種xl，xs，柵格布局讓響應(yīng)式變得很容易。
話說，這Vue做響應(yīng)式，其實(shí)一點(diǎn)都不復(fù)雜：一個(gè)生命周期鉤子，一個(gè)條指令，一套js判斷語句解決，說到這，高手們應(yīng)該早已經(jīng)明白如何操作了， 這篇文章就給廣大剛?cè)腴T的同學(xué)們拓寬一下吧（不熟悉Vue的同學(xué)，還是先惡補(bǔ)一下Vue基礎(chǔ)吧）。
一個(gè)生命周期鉤子——mounted：掛載時(shí)操作；一條指令——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;
}
})
我的目的是在移動(dòng)設(shè)備中不顯示搜索欄（search-part）部分，那么利用v-show,和mounted配合，在掛載時(shí)檢測一下屏幕可視寬度，如果小于1000，則認(rèn)為是手機(jī)，v-show設(shè)為false,不顯示即可。
看，很簡單吧，簡單到我覺得自己好像在忽悠。其實(shí)到這里，原理已經(jīng)說完，具體的應(yīng)用大家可以自行發(fā)揮，而且也不一定就用v-show，我這里是為了顯示與否，如果大家想添加樣式什么的，還可以寫別的，甚至于計(jì)算屬性，watch都可以。只要記住在掛載的時(shí)候完成即可，不然頁面會(huì)有跳動(dòng)，不利于體驗(yàn)。
可能有人會(huì)問，用css的@media就可以完成了，為啥用js，我這里想說的是，我并沒有否認(rèn)@media，這里只是寫出更多一種方式，同時(shí)結(jié)合一下現(xiàn)在很火的前端框架。多一種方法，就多一種解決思路，不至于再回到以前"只能這樣"的道路上。具體到實(shí)際應(yīng)用中，當(dāng)然是最適合的方法為主。前端水深，前端的路子也越來越多，越來也豐富，敞開思維，就會(huì)看見不同的天空。
ps一句，js確實(shí)需要刷新頁面重新加載才會(huì)顯示，也就是說如果用戶將頁面從大屏移動(dòng)到小屏幕，就可能出現(xiàn)布局不響應(yīng)問題，但是在實(shí)際使用中，這種情況幾乎不會(huì)出現(xiàn)，因?yàn)橛脩舨荒芸赡軐㈦娔X打開的網(wǎng)頁，直接移動(dòng)到手機(jī)上，操作永遠(yuǎn)都是重新打開，所以js，css在顯示效果上是沒有區(qū)別的（當(dāng)然如果js太過復(fù)雜，性能會(huì)有影響）。另外，文中方法的兼容性問題，只要支持Vue的瀏覽器，都沒問題。
就說到這吧，歡迎大神指正，不勝感激！
藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
1、用px2rem配合lib-flexible，讓網(wǎng)頁適配。
lib-flexible
作用：讓網(wǎng)頁根據(jù)設(shè)備dpr和寬度，利用viewport和html根元素的font-size配合rem來適配不同尺寸的移動(dòng)端設(shè)備
安裝：
npm install lib-flexible
1
引入：入口文件main.js中：
import "lib-flexible/flexible.js"
1
2、手寫一個(gè)js小工具，省略rem的計(jì)算，加快開發(fā)速度。
在src目錄下增加一個(gè)utils目錄，在里面新建一個(gè)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é)點(diǎn)字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
setRem()
}
在main.js中引入改js文件：
import "./utils/rem"
1
然后就可以直接用px寫頁面啦，而不用去計(jì)算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實(shí)現(xiàn)響應(yīng)式圖片
在 Bootstrap 版本 3 中，通過為圖片添加 .img-responsive 類可以讓圖片支持響應(yīng)式布局。其實(shí)質(zhì)是為圖片設(shè)置了 max-width: 100%;、 height: auto; 和 display: block; 屬性，從而讓圖片在其父元素中更好的縮放。
對于圖片的大小限制一定要在圖片的父級(jí)元素進(jìn)行限制。
5、利用bootstrap的柵格系統(tǒng)，下面列一下柵格系統(tǒng)的參數(shù)：
超小屏手機(jī) (<768px) 小屏幕平板(>=768px) 中等屏桌面(>=992px) 大屏桌面(>=1200px)
類前綴 .col-xs .col-sm .col-md .col-lg
列數(shù) 12 12 12 12
.container最大寬度 None(自動(dòng)) 750px 970px 1170px
舉個(gè)移動(dòng)設(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)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
Bootstrap：
1. 概念： 一個(gè)前端開發(fā)的框架，Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。
* 框架:一個(gè)半成品軟件，開發(fā)人員可以在框架基礎(chǔ)上，在進(jìn)行開發(fā)，簡化編碼。
* 好處：
1. 定義了很多的css樣式和js插件。我們開發(fā)人員直接可以使用這些樣式和插件得到豐富的頁面效果。
2. 響應(yīng)式布局。
* 同一套頁面可以兼容不同分辨率的設(shè)備。
2. 快速入門
1. 下載Bootstrap
2. 在項(xiàng)目中將這三個(gè)文件夾復(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個(gè)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ù)需要只加載單個(gè)插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
響應(yīng)式布局
同一套頁面可以兼容不同分辨率的設(shè)備。
* 實(shí)現(xiàn)：依賴于柵格系統(tǒng)：將一行平均分成12個(gè)格子，可以指定元素占幾個(gè)格子
* 步驟：
1. 定義容器。相當(dāng)于之前的table、
* 容器分類：
1. container：兩邊留白
2. container-fluid：每一種設(shè)備都是100%寬度
2. 定義行。相當(dāng)于之前的tr 樣式：row
3. 定義元素。指定該元素在不同的設(shè)備上，所占的格子數(shù)目。樣式：col-設(shè)備代號(hào)-格子數(shù)目
* 設(shè)備代號(hào)：
1. xs：超小屏幕 手機(jī) (<768px)：col-xs-12
2. sm：小屏幕 平板 (≥768px)
3. md：中等屏幕 桌面顯示器 (≥992px)
4. lg：大屏幕 大桌面顯示器 (≥1200px)
* 注意：
1. 一行中如果格子數(shù)目超過12，則超出部分自動(dòng)換行。
2. 柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備。
3. 如果真實(shí)設(shè)備寬度小于了設(shè)置柵格類屬性的設(shè)備代碼的最小值，會(huì)一個(gè)元素沾滿一整行。
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
* 表單
* 給表單項(xiàng)添加：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個(gè)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ù)需要只加載單個(gè)插件。 -->
<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ù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 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ù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 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ù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飛三亞5天4晚自由行(春節(jié)預(yù)售+親子/蜜月/休閑游首選+豪華酒店任選+接送機(jī))</p>
<font color="red">¥ 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號(hào)-1
</div>
</footer>
</body>
</html>
藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
新人設(shè)計(jì)師可能都會(huì)遇到這樣的問題：在設(shè)計(jì)一個(gè)復(fù)雜需求的時(shí)候，各種場景、可能性在腦中來回亂竄，常常覺得邏輯不夠嚴(yán)密。設(shè)計(jì)完成后，又被各方質(zhì)疑，提出各種異常場景，導(dǎo)致頻繁修改，縫縫補(bǔ)補(bǔ)。本文將和大家分享下解決以上問題的小方法。本文就以「企業(yè)內(nèi)部權(quán)限分配平臺(tái)」的需求為案例，整理了之前處理復(fù)雜需求的一些思路。講講在交互設(shè)計(jì)的過程中，如何避免以上兩種情況，讓我們的工作更好地服務(wù)用戶，體現(xiàn)價(jià)值。
首先，我想任何設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品的時(shí)候第一步都是理解需求，這包括了需求的目標(biāo)背景、角色場景、產(chǎn)品邏輯等，不同的需求側(cè)重點(diǎn)會(huì)不同。以「企業(yè)內(nèi)部權(quán)限分配平臺(tái)」的需求為例，目標(biāo)背景和角色都比較簡單，但是一般涉及權(quán)限的產(chǎn)品，背后的邏輯就會(huì)很復(fù)雜，場景情況也很多。
和產(chǎn)品溝通，和用戶溝通，甚至網(wǎng)上找資料，都是理解需求的一些好方法。比如本次設(shè)計(jì)的需求是關(guān)于權(quán)限分配，這一篇《網(wǎng)易高手：角色權(quán)限設(shè)計(jì)的100種解法》的文章，就很好地幫助我理解權(quán)限分配背后的設(shè)計(jì)邏輯。
包括理解需求內(nèi)的專有名詞，為其建立特殊的標(biāo)識(shí)樣式，也是幫助自己、團(tuán)隊(duì)、用戶更好地理解產(chǎn)品需求的一種方式。
△ 名詞解釋
我們在最初思考需求的時(shí)候，肯定會(huì)從場景/問題出發(fā)，思考怎么去解決這個(gè)問題，是以「人」的思維來思考這個(gè)問題的，這是必然的，也是正確的。但此時(shí)我們的思維是散點(diǎn)式的，例如當(dāng)我們想到權(quán)限分配的需求時(shí)，可能會(huì)說：這次我們要新增一個(gè)「崗位」的概念，讓權(quán)限和崗位綁定，不要和人綁定。對了，還有人員離職這個(gè)問題困擾業(yè)務(wù)很久了，我們這次要在人員離職的時(shí)候進(jìn)行……
所以，在最初的需求框架確定后，我得到的是這樣兩段文字：
看上去已經(jīng)非常全面了，但由于我們是散點(diǎn)式地收集需求，很多時(shí)候可能還是會(huì)有遺漏，或者說錯(cuò)誤關(guān)聯(lián)了內(nèi)在邏輯，導(dǎo)致一些邏輯沖突、漏洞。
此時(shí)，我們需要將我們的思維從「散點(diǎn)式收集」轉(zhuǎn)為「結(jié)構(gòu)化梳理」。從需求說明里抽絲剝繭，我們可以得到：
各個(gè)對象之間的關(guān)系又是怎樣呢？我們把所有的對象兩兩組合，再把沒有關(guān)系的刪掉。
也就是：
這個(gè)具體的業(yè)務(wù)邏輯并不重要，不需要去費(fèi)心理解，重要的是這樣一種結(jié)構(gòu)化思考的方法，可以應(yīng)用在后續(xù)各種各樣的設(shè)計(jì)中。
對象間的關(guān)聯(lián)，再和我們剛才梳理的人物、操作相結(jié)合，就可以還原成一系列的需求描述：「角色」可以在「A對象」下「操作」「B對象」，例如：超級(jí)管理員可以在部門下新增崗位。
至此，我們已經(jīng)可以建立「需求→功能對應(yīng)表」：
其中，紅色部分都是在之前散點(diǎn)式的需求羅列中沒有考慮到的功能點(diǎn)，通過結(jié)構(gòu)化的梳理，我們可以提前把它們都一一補(bǔ)齊。
這個(gè)過程可以減少我們最小顆粒功能點(diǎn)的遺漏，避免在做完大部分設(shè)計(jì)后，突然發(fā)現(xiàn)遺漏了某個(gè)功能，任務(wù)時(shí)間點(diǎn)又已經(jīng)到了，慌慌忙忙地加功能，就可能會(huì)影響整體的設(shè)計(jì)思路和框架。
完成了功能點(diǎn)的整理歸納后，就可以開始我們的界面設(shè)計(jì)了。在最初的界面設(shè)計(jì)中，這三點(diǎn)需要做減法：
當(dāng)然，可以先把可能存在的異常、細(xì)節(jié)都記錄下來，以便后續(xù)補(bǔ)充。
比如，在人員權(quán)限分配的界面結(jié)構(gòu)中，分為三個(gè)大模塊：
在有了界面框架和功能對應(yīng)表后，我們做設(shè)計(jì)會(huì)變得比較簡單，按照之前整理的「需求→功能對應(yīng)表」，把每個(gè)小顆粒的功能細(xì)節(jié)填充到界面框架內(nèi)即可。
當(dāng)主流程設(shè)計(jì)完畢之后，我們就要開始做加法了，在之前，我們一直是用一種純理性的視角來完成我們的設(shè)計(jì)，保持純理性的設(shè)計(jì)會(huì)有兩個(gè)問題：
例如，純從邏輯思維角度你能想到在一個(gè)企業(yè)里有人是沒有任何部門歸屬的嗎？然而現(xiàn)實(shí)中就存在這樣的情況──外包人員。不結(jié)合實(shí)際場景，我們也不知道用戶一天需要處理多少次重復(fù)操作，目前的設(shè)計(jì)對他是否足夠便捷。
作為一個(gè)企業(yè)內(nèi)部權(quán)限分配平臺(tái)，我們可以把部?、崗位、人員等對象作為初始線索，站在不同的用戶使用角度，沿著線索去全面地思考場景，修改功能。有一些實(shí)在難以理解的業(yè)務(wù)，找用戶聊聊也是一個(gè)好方法。
很快，我們就找到了下面這些特殊場景。
1. 人員變動(dòng)
處理方法：行政架構(gòu)自動(dòng)同步，紅點(diǎn)待辦。
我們與 OA 系統(tǒng)數(shù)據(jù)打通，自動(dòng)形成四類待辦紅點(diǎn)：人員新增、人員離職、行政部門新增、行政部門刪除。
這樣 HR 就不需要重復(fù)做新人員的添加操作，只需要業(yè)務(wù)管理員把 OA 內(nèi)無法覆蓋的人員崗位設(shè)定好就可以，也不會(huì)出現(xiàn)遺漏的情況。
2. 高管兼職
例如某位高管：本身為 A 部門負(fù)責(zé)人，臨時(shí)兼任 B 部門負(fù)責(zé)人，那么當(dāng)他不再負(fù)責(zé) B 部門時(shí)，該如何處理他的崗位？離職？轉(zhuǎn)崗？似乎都不合適。
處理方法：新增崗位移除功能。
3. 外包人員
了解到現(xiàn)實(shí)情況中，外包人員是沒有部門歸屬的，但是實(shí)際上他們肯定也有自己負(fù)責(zé)的業(yè)務(wù)范圍和崗位，在初始化時(shí)如何安置沒有部門的人？
處理方法：新增一個(gè)部門，叫做「無崗位人員」，并且標(biāo)紅作為待辦，提醒操作者去處理這些「無崗位人員」。
4. 人員離職/轉(zhuǎn)崗
在進(jìn)行功能設(shè)計(jì)整合時(shí)，我考慮是否「人員離職」應(yīng)該叫「人員刪除」更系統(tǒng)化？是否可以直接整合為一個(gè)「人員編輯」的功能，將離職、轉(zhuǎn)崗的操作合并？（實(shí)際上這2個(gè)功能操作起來確實(shí)比較相似）
處理方法：最終我依然保留了「人員離職」、「人員轉(zhuǎn)崗」的功能，因?yàn)檫@樣更場景化，用戶清晰地知道自己當(dāng)前該操作什么。
目前對一個(gè)人進(jìn)行離職操作的路徑是：找到原部門→找到崗位→找到人→處理離職，而我們的企業(yè)有 2500+ 員工，對于離職操作者 HR 來說，這個(gè)路徑是否現(xiàn)實(shí)？是否快捷？
處理方法：新增搜索功能，直接搜索人名→處理離職，這個(gè)功能也方便了其他找人的場景。
5. 更多
諸如此類的考慮還有很多，例如新建部門的時(shí)候是否會(huì)有空部門，在企業(yè)進(jìn)行組織架構(gòu)重組時(shí)是否會(huì)有大批量的人員、組織變動(dòng)，進(jìn)而需要有批量操作等等。找到最初的線索，站在用戶的角度沿著線索思考，進(jìn)行全局掃描，就會(huì)發(fā)現(xiàn)很多需要做加法的地方，發(fā)現(xiàn)的方式可以是觀察、訪談、思考等任何方式。
在已經(jīng)保證了主流程的簡潔、清晰后，再用全局掃描的方式去搜集特殊場景，給我們的設(shè)計(jì)做加法，可以保證我們整體的設(shè)計(jì)框架是清晰可用的，而特殊場景是散落在骨干上的各種小分支。
如果我們可以做到，對所有的主干場景、分支場景了然于心，并且有自己的優(yōu)先級(jí)考慮，那么對于項(xiàng)目成員、用戶提出的質(zhì)疑，我們也有足夠的理由來證明自己設(shè)計(jì)的合理性。
當(dāng)然，場景基本考慮全面后，還有最后一步，就是統(tǒng)一交互，完善細(xì)節(jié)，這一步也是設(shè)計(jì)上的加法。
以上，就是一個(gè)針對復(fù)雜需求的加減設(shè)計(jì)法案例，總結(jié)來說有四個(gè)大步驟：
所以，交互設(shè)計(jì)師是需要理性和感性的結(jié)合，要有抽絲剝繭，提煉總結(jié)的能力，也要有貼近用戶關(guān)注情感的細(xì)膩。把自己的工作規(guī)范化，減少無效付出，也是我們的一種能力。希望本篇文章對新人設(shè)計(jì)師有一些幫助，也歡迎大家一起探討交流。
藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
有這樣一種常見的需求：有一個(gè)搜索框，需要根據(jù)用戶的輸入進(jìn)行實(shí)時(shí)的查詢。也就是說用戶每輸入一個(gè)字符就要發(fā)送一次請求。
想到的做法是監(jiān)聽輸入框的keyup時(shí)間然后在回調(diào)里發(fā)送異步請求。
這樣做的不足也很明顯：
其實(shí)我們并不需要用戶每次輸入時(shí)都發(fā)送請求，這樣會(huì)給服務(wù)器造成不必要的壓力。
因?yàn)榘l(fā)送的是異步請求，有可能查詢的結(jié)果和最后輸入的內(nèi)容并不匹配。
如何解決以上兩種問題呢？ 有兩種解決方案
首先我們規(guī)定當(dāng)用戶停止輸入1秒（具體時(shí)間根據(jù)自己需求而定）后再根據(jù)輸入框的值發(fā)送請求。
其次我們利用定時(shí)器來解決以上問題。
第一種方案：直接看代碼吧
vat timer
$('.input').on('keyup', function(e) {
clearTimeout(timer)
timer = setTimeout(function() {
// do something
}, 1000)
})
首先定義一個(gè)定時(shí)器timer
監(jiān)聽輸入框的keyup事件，在回調(diào)函數(shù)里先清除timer，這一步總能保證在用戶停止輸入1秒后執(zhí)行最后一個(gè)timer。如果用戶輸入的間隔小于1秒就不會(huì)執(zhí)行timer
這么寫似乎不太抽象，而且定義了一個(gè)全局變量timer，不友好！稍加改動(dòng)一下：
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ù)中寫我們的處理邏輯就可以了。而且沒有了全局變量，避免了全局污染的可能?。?br />
*第二種方案： *
var lastTime
$('.input').on('keyup', function(e) {
lastTime = e.timeStamp
setTimeout(function() {
console.log('timeout')
if (lastTime == e.timeStamp) {
// do something
}
}, 1000)
})
首先定義一個(gè)時(shí)間戳來保存最后一次輸入的時(shí)間
然后1秒后在定時(shí)器里判斷保存的時(shí)間戳和觸發(fā)事件的時(shí)間戳e.timeStamp是否相同，只要1秒內(nèi)又輸入了內(nèi)容，e.timeStamp就回變化。
但是這種寫法有個(gè)弊端，用戶鍵入幾次就會(huì)執(zhí)行幾次setTimeout，也就是說當(dāng)用戶連續(xù)鍵入多個(gè)字符后，會(huì)有多個(gè)任務(wù)被推入待執(zhí)行隊(duì)列，然后每隔1秒執(zhí)行，只是在執(zhí)行的時(shí)候判斷要不要發(fā)送異步請求，這種方式不會(huì)發(fā)送多余的異步請求，但是會(huì)執(zhí)行多余的任務(wù)，這無疑浪費(fèi)了性能。
藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
DOM樹
在訪問頁面時(shí)，需要與頁面中的元素進(jìn)行交互式的操作。在操作中，元素的訪問是最頻繁、最常用的，主要包括對元素屬性、內(nèi)容、值CSS的操作。
一、操作元素的屬性
attr() prop() 獲取或設(shè)置元素的屬性值
兩者區(qū)別：簡單來說，對于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。對于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
針對屬性對象不同
prop( )是針對Dom元素屬性，attr( )針對HTML元素屬性，和attribute與property區(qū)別一樣。
用于設(shè)置的屬性值類型不同
attr()函數(shù)操作的是文檔節(jié)點(diǎn)的屬性，因此設(shè)置的屬性值只能是字符串類型，如果不是字符串類型，也會(huì)調(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ù)實(shí)際需要選擇對應(yīng)的函數(shù)。
其他不同
對于表單元素的checked、selected、disabled等屬性，Attr()方法拿不到值，請使用prop()函數(shù)來設(shè)置或獲取checked、selected、disabled等屬性。對于其它能夠用prop()實(shí)現(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è)置多個(gè)屬性值
$("input[type='button']").prop({
width:"200px",
value:"hello"
});//同時(shí)設(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í)設(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()方法為某個(gè)指定的元素設(shè)置樣式值，語法格式如下：
css(name,value) ,其中name為樣式名稱，value為樣式的值
css()可以設(shè)置樣式也可以獲取樣式
2.增加CSS類別
通過addClass()方法增加元素類別的名稱，語法格式如下：
addClass(class) ,其中參數(shù)class為類名稱，可以同時(shí)增加多個(gè)，用空格隔開即可，如addClass(class0 class1 class2 ...)
3.刪除CSS類別
與addClass()方法相對應(yīng)，removeClass()方法用于刪除類別，語法格式與addClass()相同，如果不設(shè)定參數(shù)，則刪除元素中的所有類名稱
4.類別切換
通過toggleClass()方法切換不同的元素類別，語法格式如下:
toggleClass(class) ,其中參數(shù)class為類別名稱，其功能是當(dāng)元素中含有名稱為class的CSS類別時(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>
<button id="btn" class="btndata">按鈕</button>
<script>
$("#btn").addClass("btn1");//追加一個(gè)類名稱
$("#btn").addClass("btn2 btn3");//追加多個(gè)類名稱
$("#btn").removeClass("btn2 btn1");//移除類名稱
$("#btn").removeClass();//移除所有類名稱
$("#btn").toggleClass("btn1");//類的切換 toggleClass() 如果有類名稱則替換 如果沒有就添加
</script>
</body>
</html>
六、jquery操作子父節(jié)點(diǎn)
children() 找父元素里面的子節(jié)點(diǎn)
<!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é)點(diǎn)
console.log($("ul").children()[0]);//輸出ul下索引為0的子節(jié)點(diǎn)
console.log($("ul>li").first());//輸出ul里面第一個(gè)li
console.log($("ul>li").last());//輸出ul里面最后一個(gè)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)前元素的前一個(gè)元素
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)前元素的下一個(gè)元素
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è)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.bouu.cn