說起nubia，很多人的印象當(dāng)中就是硬件很不錯，但是系統(tǒng)很渣，自己也是4年的老牛仔了，對于Nubia的系統(tǒng)，是看著它一點一點成長的，咱們先談?wù)凬ubia UI 的歷史：

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

1.什么是DOM

DOM 是 Document Object Model（文檔對象模型）的縮寫。


DOM是中立于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式。


在 HTML DOM中，所有事物都是節(jié)點。DOM 是被視為節(jié)點樹的 HTML。


什么是節(jié)點
2.什么是DOM節(jié)點
HTML 文檔中的所有內(nèi)容都是節(jié)點


整個文檔是一個文檔節(jié)點


每個 HTML 元素是元素節(jié)點


HTML 元素內(nèi)的文本是文本節(jié)點


每個 HTML 屬性是屬性節(jié)點


注釋是注釋節(jié)點


demo
3.常見的DOM屬性
屬性是節(jié)點（HTML 元素）的值，您能夠獲取或設(shè)置。


innerHTML 屬性
nodeName 屬性


nodeName 屬性規(guī)定節(jié)點的名稱


元素節(jié)點的 nodeName 與標(biāo)簽名相同


屬性節(jié)點的 nodeName 與屬性名相同


文本節(jié)點的 nodeName 始終是 #text


文檔節(jié)點的 nodeName 始終是 #document


nodeValue 屬性
nodeValue 屬性規(guī)定節(jié)點的值。


元素節(jié)點的 nodeValue 是 undefined 或 null


文本節(jié)點的 nodeValue 是文本本身


屬性節(jié)點的 nodeValue 是屬性值

4.訪問元素的方法

通過使用 getElementById() 方法


通過使用 getElementsByTagName() 方法


通過使用 getElementsByClassName() 方法


5.修改元素的方法
改變 HTML 內(nèi)容


document.getElementById("p1").innerHTML="New text!";


改變 CSS 樣式


document.getElementById("p2").style.color="blue";


改html和css
追加子元素的方法


首先必須創(chuàng)建該元素（元素節(jié)點），然后把它追加到已有的元素上。var para=document.createElement("p");


創(chuàng)建新的 HTML 元素 - appendChild() 在父元素的最后追加


創(chuàng)建新的 HTML 元素-element.insertBefore(para,child);在指定位置給父級追加子元素


刪除 HTML 元素，您必須清楚該元素的父元素：parent.removeChild(child);


替換 HTML 元素:parent.replaceChild(para,child); 方法


6.DOM - 事件
允許 JavaScript 對 HTML 事件作出反應(yīng)


onclick 事件——當(dāng)用戶點擊時


onload 事件——用戶進入


onunload 事件——用戶離開


onmouseover事件——鼠標(biāo)移入


onmouseout事件——鼠標(biāo)移出


onmousedown事件——鼠標(biāo)按下


onmouseup 事件——鼠標(biāo)抬起


7.參考文獻

8.更多討論

問題1:getElementsByClassName() 使用時需要注意的地方

回答:它取出來的是個數(shù)組,及時只有一個那也是數(shù)組對象,所以改變指定元素時需使用角標(biāo)

問題2:innerHTML 和innerText的區(qū)別

回答:innerText替換是會將標(biāo)簽替換成字符串,而innerHTML 則會保留標(biāo)簽插入到節(jié)點當(dāng)中

問題3:dom事件

回答:事件是文檔或者瀏覽器窗口中發(fā)生的，特定的交互瞬間。事件是用戶或瀏覽器自身執(zhí)行的某種動作，如click,load和mouseover都是事件的名字。事件是javaScript和DOM之間交互的橋梁。

事件發(fā)生，調(diào)用它的處理函數(shù)執(zhí)行相應(yīng)的JavaScript代碼給出響應(yīng)。

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

端午節(jié)到了，阿里巴巴TXD的小伙伴們準(zhǔn)備送你只'口味粽'，祝大家假期玩的開開心心，點擊圖片識別二維碼便可生成你專屬的‘口味粽’。

01

—

項目背景

阿里對待中秋節(jié)會更加的濃重，每年中秋節(jié)所有的員工都會收到精美的月餅和祝福。相比之下我們的端午節(jié)就過得比較平淡了，于是咱們團隊的小伙伴們準(zhǔn)備做一個H5，用我們的自己的方式送大家以及自己一枚口味粽。

整個項目的初衷有兩個，一個是代表TXD送給大家端午節(jié)的祝福，另一個就是用團隊協(xié)作的方式在極短的時間里面設(shè)計一款H5。

02

—

項目思路

對于我們來說最大的挑戰(zhàn)是時間。距離端午假期僅剩一周不到的時間，而大家都有自己的業(yè)務(wù)工作，難道放棄？既然已經(jīng)立下了flag，怎么也得完成。我們制定了項目的節(jié)點，并且通過多枚成員分工協(xié)作去完成它。

大部分項目是需要協(xié)作完成的，一旦協(xié)作不好，項目進度則事倍功半。所以最考驗大家的是怎么進行更的協(xié)作。通過有效的決策，我們讓協(xié)作變得順利。

我們通過小組會議確定玩法后，分配人員進行文案和交互設(shè)計。由主設(shè)計師定下設(shè)計風(fēng)格，其他設(shè)計根據(jù)風(fēng)格繪制UI以及其他場景素材。所有素材實時同步在項目群里，確保保持統(tǒng)一的風(fēng)格。

03

—

項目介紹

首先我們的粽子不是一般的粽子≧ω≦，我們粽子的餡兒都采用各種珍稀的食材。

這些“珍稀”食材通過我們神秘的構(gòu)造機做成不同的神奇粽子！

更多不一樣的粽子，通過我們的機器定制屬于自己的神奇粽子。

本次的項目屬于我們的團隊成員通過空閑時間在短時間里面完成的。只是想送給端午節(jié)的童鞋們一個小小的祝福。

如何知己知彼，做好視覺競品分析？

Android和iOS在過去幾年里，APP界面的UI設(shè)計變化很大，從擬物到扁平，蘋果目前為iOS8，而谷歌最近推出了全新的Material Design風(fēng)格。隨著界面風(fēng)格的迅速演變，很多移動應(yīng)用也跟著更新，并使用新界面的一些新特性。

一、當(dāng)前背景

今天聊些設(shè)計基礎(chǔ)部分。

設(shè)計工作中，我們總會接到不同場景、不同目標(biāo)用戶的業(yè)務(wù)需求，需要不同風(fēng)格的設(shè)計方案支持，但無論是什么風(fēng)格的設(shè)計，用戶都會有一個共同訴求——「品質(zhì)感」。

二、什么是品質(zhì)感？

所謂品質(zhì)感其實就是產(chǎn)品給人的一種嚴(yán)謹(jǐn)、專心對待的態(tài)度。同樣一本書的封面，粗糙紙的封面和細(xì)心打磨的小羊皮封面就是不同的概念。

例如無印良品和愛馬仕，兩者都會傳達給用戶一種「品質(zhì)感」，雖設(shè)計方向不同，但他們有一個共同的特性——對細(xì)節(jié)的深度打磨。其實品質(zhì)感就是來源于產(chǎn)品對細(xì)節(jié)的深度考究與打磨。

一款有品質(zhì)感的設(shè)計，隨之帶來的是用戶使用中的舒適度、好感度、信賴感。

三、界面中的品質(zhì)感

界面設(shè)計也是一樣，也會帶給用戶一種品質(zhì)感，其同樣是源于設(shè)計師對界面的每處細(xì)節(jié)的深度考究。

界面的品質(zhì)感主要來源于界面四個維度、界面中的結(jié)構(gòu)、界面中的圖形、界面中的顏色和界面中的動態(tài)，今天說如何通過結(jié)構(gòu)提升界面品質(zhì)感。

四、界面中的結(jié)構(gòu)

界面的結(jié)構(gòu)在用戶體驗中起著重要作用，其相當(dāng)于界面設(shè)計中的「骨」，界面結(jié)構(gòu)中的細(xì)節(jié)更是會直接影響到整體設(shè)計的品質(zhì)感。那么具體結(jié)構(gòu)中的細(xì)節(jié)體現(xiàn)在哪里？

1. 關(guān)系

信息關(guān)系包含界面中的組合、層級、分割等。

組合

「物以類聚」，界面內(nèi)需明確傳達各元素間的關(guān)系。

輔助信息服務(wù)于主體信息：輔助信息為主體內(nèi)容的延續(xù)說明或補充操作，作用為服務(wù)于主體內(nèi)容。同一組合內(nèi)，信息間需有明確的關(guān)系與合理的順序，且輔助信息不能搶鏡。例如朋友圈，清晰傳達關(guān)系的同時，以內(nèi)容為主的閱讀方式不會被頭像內(nèi)容干擾。

關(guān)系越緊密的內(nèi)容距離應(yīng)越近：形式不變的基礎(chǔ)上，元素之間的距離越近，越易被視為同一組合。距離相同時，橫向排列的內(nèi)容接近度相對更高。

層級

界面的層級關(guān)系主要體現(xiàn)在主次、優(yōu)先級、層數(shù)。

主次分明、避免層級混亂：清晰的層級結(jié)構(gòu)，能讓用戶更快的獲取重要內(nèi)容，同一組合下其信息一定有主要展示和次要展示?？梢酝ㄟ^位置、面積、顏色三個維度建立主次層級的對比度。

• 位置。在中國，用戶的閱讀習(xí)慣為從左上至右下，所以用戶對左上區(qū)域的觀察最優(yōu)，依次為右上，左下，而右下最差。因此，左上部和上中部被稱為「最佳視域」。
• 面積。信息內(nèi)容在界面內(nèi)的占比面積越大，信息越是突出。
• 顏色。白色背景下，明度越低/飽和度越高，信息越是突出。

同一組合下，有且僅能有一個最重要的內(nèi)容：當(dāng)所有的內(nèi)容都重要，也就等于所有內(nèi)容都不重要，信息的優(yōu)先級不取決于主要信息是否夠大，而是主要信息和次要信息的對比度。

同一頁面，信息層級不宜過多：過多的信息層級會讓頁面變得復(fù)雜，增加用戶的理解成本。冗余的信息展示會讓界面變的凌亂瑣碎，一定程度上干擾用戶使用體驗。一般情況下界面應(yīng)控制在3層信息以內(nèi)。

主次分明、優(yōu)先級明確、層級適當(dāng)會讓界面的信息傳達更清晰明確，進而增加用戶的使用中的舒適度。

分割

分割是用于區(qū)分不同信息的方法，大概可以分為距離分割、線性分割、面性分割（背景色分割）、顏色分割。

距離分割：增大兩模塊的距離達到內(nèi)容分割內(nèi)容作用，元素間的距離越遠(yuǎn)，越不易被視為同一組合。其好處是可以省去分割元素，減少視覺層級，讓界面更干凈、明快。

線性分割：線性分割是目前界面中最常用的分割方式，其優(yōu)勢是線自身「較輕」，不易干擾用戶。值得注意的是線本身不重要，不宜過度強調(diào)，應(yīng)點到為止，所以線的顏色不宜過重。

面性分割/背景色分割：當(dāng)處理多層級、信息復(fù)雜的場景，在單個模塊里已經(jīng)用了線性分割的情況下。可能需要更強一點的分割方式來表明模塊與模塊間的關(guān)系，這時我們可能需要面性分割方式。這種方式像是灰色的背景上，羅列著多張卡片，能更明確的表達兩組內(nèi)容的分割感，但其缺點是會較明顯的增多界面層級。

顏色分割：當(dāng)信息的表現(xiàn)形式重復(fù)性較高，容易被看混的情況下，顏色分割是更為合適的選擇。

能起到分割作用的前提下，分割方式越輕，越不會干擾閱讀、界面越干凈。

以上可以總結(jié)為

• 界面中的組合能讓信息關(guān)系更縝密。
• 層級能讓用戶更快的獲取重要內(nèi)容。
• 分割能讓用戶更清晰的區(qū)分不同模塊間關(guān)系。

2. 字體

文字字體是界面結(jié)構(gòu)中重要組成部分，文字也是多數(shù)場景下信息傳達最為準(zhǔn)確的方法。合理的字體能夠增加用戶的閱讀體驗，提升用戶在產(chǎn)品使用中的舒適度。合理的字體包含字體的可讀性、對比度、間距。

可讀性：可讀性是字體在界面中需考慮的基礎(chǔ)因素，也是首要因素。字體的信息傳達需精準(zhǔn)、明確。字形選擇包括其場景適應(yīng)和字形的適度性。

字形的場景適應(yīng)：由于不同的字形會帶給用戶不同的感覺。由于場景需要，我們一定情況下會選擇自定義字體。當(dāng)我們選擇不同的字體時，需要考慮字體在產(chǎn)品內(nèi)不同模塊下是否易于閱讀。

字形的適度性：字體本身不宜搶鏡。隨意的、搶眼的字體一定場景下上能夠帶來足夠的氛圍感，但是長期使用會出現(xiàn)「視覺疲勞」，其原因是字體本身的設(shè)計搶走了用戶正常在該場景下閱讀或使用的內(nèi)容和信息。

對比度

字號：用于區(qū)分不同層級的信息內(nèi)容，為保證信息的快速傳達，不同層級的字體需有一定的優(yōu)先級順序。

界面內(nèi)的主文案/一級文案應(yīng)精簡明確。假設(shè)用戶只會在這個界面停留3、4秒，能夠吸引用戶繼續(xù)瀏覽界面的就是一級信息。當(dāng)一級信息文案字?jǐn)?shù)過多，會增加用戶剛進入頁面時的閱讀成本，進而降低閱讀體驗。

另外，移動端小于24px的字號應(yīng)慎重使用，雖然小的字號會讓版式更加的精致，但當(dāng)同一場景下，小于24px的文案字?jǐn)?shù)偏多時，會影響用戶的正常閱讀。但可用于弱化的文字鏈、標(biāo)簽等字?jǐn)?shù)少的場景。

加粗：字號相同，字體加粗也是區(qū)分不同層級信息的一種方法，當(dāng)兩信息區(qū)分度不大、界面層級過多需要減少層級的場景下，可以選擇加粗部分內(nèi)容建立輕度對比。

字色：我們畫畫的時候，時常會聽到老師說「要注意畫面的黑白灰」。在界面設(shè)計中，也是一樣，我們需注意各層級字體間的黑白灰關(guān)系。明確的畫面黑白灰關(guān)系會讓界面變得更干凈清晰。另外，當(dāng)不同明度切換時應(yīng)保持色相/飽和度不變。

間距：在界面設(shè)計中，字間距和行間距會直接影響用戶閱讀效率。過于緊密的間距會讓字體間失去「透氣性」，根據(jù)我們正常的閱讀順序來講，字間距要小于行間距以便于每一行更易被視為一組，進而給用戶帶來更好的閱讀體驗。我們可根據(jù)文案長短，字號大小制定更適合閱讀的間距。

字體的可讀性是字體的基礎(chǔ)，明確的字體對比度能夠讓信息層級更加清晰干凈，而合理的字間距能夠無形的提升用戶的閱讀體驗。

3. 信息對齊

對齊是界面結(jié)構(gòu)中的一部分，合理的對齊方式能夠使界面內(nèi)的信息變得更規(guī)整，內(nèi)容傳達更明確。讓元素間的關(guān)系更具節(jié)奏感。

聯(lián)系性

同一組合內(nèi)的不同元素間需有明確的對齊關(guān)系，其關(guān)系能夠清晰表達不同元素間的親密性。

元素間的居左對齊：當(dāng)文案的字?jǐn)?shù)偏多一些的場景下，居左對齊更符合用戶的閱讀習(xí)慣。

元素間的居中對齊：當(dāng)內(nèi)容信息較少、或由于對齊元素形狀等因素，居中對齊可能會帶來意外的收獲與效果。

元素間的居右對齊：界面內(nèi)一般不會用居右對齊的方式來建立兩元素間的關(guān)系，但是界面內(nèi)會存在和屏幕建立右對齊關(guān)系的元素，與屏幕右對齊的元素一般為主體的解釋說明以及輔助操作等。一般情境下，當(dāng)用戶閱讀完主要內(nèi)容信息后才會對操作類的功能有需求，如查看購買、關(guān)注、查看更多、進入下一頁面等。

統(tǒng)一性

另外，不同組件間也需要合理的建立對齊關(guān)系，同時為保持界面的簡潔性，同一界面內(nèi)建立的對齊模式不要過多。

總結(jié)

界面的結(jié)構(gòu)是提升界面品質(zhì)感的關(guān)鍵，而合理的信息關(guān)系、字體、對齊方式能夠讓界面的結(jié)構(gòu)更加完整，精致。也希望每個設(shè)計師的作品都更加的美而精致。

微信更新：公眾號引入信息流概念，要變成今日頭條了？

微信更新了！在的微信 6.7.0 版里，微信公眾號第一次引入了信息流概念。本文將詳細(xì)為你解說微信公眾號有哪些新的變化。

在年初的微信公開課 Pro 上，張小龍曾表示「不做信息流」，沒想到不到半年的時間，微信公眾號就迎來了創(chuàng)立以來樣式最大的一次改版：可以直接瀏覽訂閱號的消息。

在的微信 6.7.0 版里，微信公眾號第一次引入了「信息流」概念。

接下來，就帶大家快速了解一下微信公眾號的新變化！

界面變化

1. 文章卡片式展示

在經(jīng)歷了朋友圈設(shè)計升級、微信訂閱號懸浮窗之后，公眾號的列表界面也終于迎來了升級，一次的巨大的升級。

在版本的微信訂閱號列表中，可以看到推送的文章變成了一張張精美的卡片，每個公眾號的文章卡片信息依然是按照時間發(fā)送的順序排列以「信息流」的形式展示。

和舊版的公眾號界面相比，卡片式的陳列放大了圖片，比純粹的文字顯得更有吸引力。

2. 推送條數(shù)折疊

除了卡片形式之外，筆者還發(fā)現(xiàn)一個公眾號在「信息流」列表中最多只能直接顯示兩篇文章，即頭條和次條。

而多出來的條數(shù)則被自動折疊了起來，需要點擊右下角的箭頭來展開「余下 X 篇」才能查看。

3. 多少好友和你志趣相投？

還記得前段時間更新的微信「搜一搜」里的「X 位朋友讀過」的功能嗎？

現(xiàn)在你可以在新版「信息流」訂閱號界面里，看看有多少好友和你志趣相投。

而且，是每一篇文章都能看到你有多少位朋友讀過。

4. 置頂？不存在的

在舊版的公眾號界面中，許多人都會把自己喜歡的公眾號置頂在列表的頂部，以免錯過它的每一次推送。

但是在這次的新版「信息流」訂閱號界面中，你恐怕是辦不到了。

在新版「信息流」訂閱號界面中，你之前置頂過的公眾號名稱旁會有一個黃色小星星，提醒你「這是你置頂過的公眾號哦！」。

在排列順序上則不會像舊版一樣永遠(yuǎn)在頂端顯示，依然和泱泱公眾號一樣，發(fā)布的推送文章在最前。

5. 摘要？不好意思，也沒有

以前的公眾號推送中，如果單詞推送只有一篇的文章的話，我們往往可以通過文章顯示的摘要來獲取更多相關(guān)信息。

但是在新版中，單獨推送一篇文章的摘要也不再顯示了。

6. 新舊界面，一鍵切換

看了這么多新界面新功能，也許會有人說「我還是喜歡以前的舊界面，有沒有什么辦法換回去？」，放心，還真的有后悔藥吃。

點擊新版「信息流」訂閱號界面右上角的小標(biāo)，幫你一鍵切回舊版界面。

有什么影響？

這次微信公眾號信息流的排版，對于公眾號運營者和用戶來說的影響都不少，我們認(rèn)為主要會有以下幾個影響。

1. 弱化公眾號主體 ，更強調(diào)內(nèi)容

公眾號改版信息流，訂閱消息的入口變淺了，用戶更容易觸達內(nèi)容。同時也也弱化了公眾號主體的感覺。

盡管微信官方表示「依然保留了對訂閱號的突出，訂閱號的頭像和名稱展示明顯。」但新版相比舊版需要進入公眾號才能閱讀文章的形式，用戶對于公眾號的歸屬感無疑是減弱了。

2. 閱讀體驗變化，標(biāo)題和題圖更重要，標(biāo)題黨和封面黨可能也更多了

新版公眾號按照信息流呈現(xiàn)，取消了文章摘要的顯示，減少了可見的推文條數(shù)，頭條封面也一律按照過往文章單推的樣式來顯示。

這都表明公眾號文章向要吸引用戶點開，頭條的標(biāo)題和題圖將變得更加重要，這將促使運營者在標(biāo)題和題圖上花費更多精力。

而為了在一滑即過的信息流中，為了抓住讀者的眼球，標(biāo)題黨和封面黨也可能會越來越泛濫。

3. 鼓勵公眾號做少而精的內(nèi)容

除了減少了可見的推文條數(shù)，獲取關(guān)注和取消關(guān)注都變得更容易，這意味著微信更加鼓勵公眾號精細(xì)化運營，生產(chǎn)少而精的內(nèi)容，減少對用戶的信息干擾。

4. 打擊營銷號，不鼓勵在公眾號做服務(wù)和電商

減少了可見的推文條數(shù)對營銷號的影響非常明顯，營銷號動輒七八條的推送會被淹沒在信息流中，而公眾號推送后邊的三四條的廣告價值也大大減弱。

此外更深的公眾號入口也弱化了原本自定義菜單的一些服務(wù)，同時服務(wù)號是不受影響的，這說明微信不再鼓勵在公眾號內(nèi)提供服務(wù)功能。

5. 公眾號閱讀的社交屬性增強

新版公眾號的信息流中強調(diào)「朋友閱讀」，表明公眾號閱讀的屬性將進一步增強。

「朋友閱讀」人數(shù)多的文章在舊版公眾號的訂閱界面會優(yōu)先顯示，這也意味著未來公眾號的信息流排列可能不再完全按照時間排列，將好友的社交行為作為信息流的排列權(quán)重。

6. 對公眾號作者有什么影響？

公眾號本質(zhì)是以品牌為中心，讓用戶去選擇。信息流本質(zhì)是話題為中心，剝離開生產(chǎn)者，讓用戶直達信息。用戶對于話題的選擇成本遠(yuǎn)比品牌的選擇要低，很可能會出現(xiàn)像刷抖音一樣刷內(nèi)容。

同理，不再以品牌為中心，意味著你之前因為「刻板印象」從來不看的公眾號，可能會更多地被你點開——信息流意味著民主，差評的一次牢騷仍然可以把特朗普擠到屏幕下方。

這對整個微信內(nèi)容生態(tài)是更有好處的——所有的訂閱號都被扔進羅馬斗獸場肉搏，一切靠內(nèi)容說話。

One More Thing……

在測試中，AppSo 還發(fā)現(xiàn)了一個小彩蛋。

在新版「信息流」訂閱號界面中，長按任意一條推送就會展示一個功能菜單「未完成的功能」，點擊會顯示「功能還在開發(fā)中 ^_^」。

看來，微信的開發(fā)小哥給大家留下了一個懸念。你覺得這個新功能會是什么呢？不妨在底部留言告訴 A 君吧！

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

“>”子選擇器：用于選擇指定標(biāo)簽元素的第一代子元素?！局苯雍蟠?span style="box-sizing:border-box;outline:0px;word-break:break-all;font-family:宋體;">】 first>span{border：1px  solid  red；}  <span>我還是一個<span>膽小如鼠</span>的小女孩</span>

包含（后代）選擇器：加入空格，用于選擇指定標(biāo)簽元素下的后輩元素?！舅凶雍蟠亍?/span>

通用選擇器：由一個*指定，匹配html 中所有標(biāo)簽元素。在style 里：

*{color：red；}

偽類選擇符  “  ：hover”：它允許給html 不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式。 a：hover{color：red；}鼠標(biāo)滑過時字體變?yōu)榧t色。

分組選擇符  “  ，”：為多個標(biāo)簽元素設(shè)置同一個樣式。  如h1，p{  }。

繼承：有些樣式具有繼承性如color，有些不具有如border。具有繼承性的允許樣式不僅應(yīng)用于某個特定 html 標(biāo)簽元素，而且應(yīng)用于其后代。

權(quán)值：標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10，ID 選擇符的權(quán)值最高為 100。

p{color：red；} /*權(quán)值為1*/

p span{color：green；} /*權(quán)值為1+1=2*/

。warning{color：white；} /*權(quán)值為10*/

p span。warning{color：purple；} /*權(quán)值為1+1+10=12*/

#footer 。note p{color：yellow；} /*權(quán)值為100+10+1=111*/ 特殊性：繼承也有權(quán)值，但是只有0。1 。

層疊：當(dāng)有相同權(quán)重值時，后面的樣式會覆蓋前面的樣式。

重要性 ！important ：p{color：red！important；}這時p 段落中的文本會顯示紅色。！important 要寫在分號前面。

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

交互設(shè)計 Interaction Design 也被成為IXD。交互設(shè)計建立起了人與計算機便捷溝通的通道，它的目標(biāo)是創(chuàng)造可用性和用戶體驗俱佳的產(chǎn)品。我們在工作之中經(jīng)常會對接交互設(shè)計師和產(chǎn)品經(jīng)理，他們具有豐富的交互知識和經(jīng)驗。那是不是我們作為UI設(shè)計師，就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計了呢？當(dāng)然不是，在視覺設(shè)計層面更多地考慮布局和交互原則才可以讓我們的界面更友好，視覺設(shè)計師是交互設(shè)計中非常重要的角色。

喜馬拉雅主播等級體系算是喜馬各業(yè)務(wù)線中資歷比較老的一員了，主要服務(wù)于主播用戶查看自身等級，以及特權(quán)享受，這次整理了近期關(guān)于主播等級線現(xiàn)存問題的改版。

一、產(chǎn)品背景

1. 產(chǎn)品層面

這次迭代的目的是：

• 把流量分發(fā)的核心參考點「專輯質(zhì)量分」作為主播等級主要評判標(biāo)準(zhǔn)之一。
• 讓主播能夠清楚的認(rèn)知自己在平臺的地位/影響力。
• 給主播升級目標(biāo)，促進升級。

通過溝通我們知道產(chǎn)品希望通過這次迭代來引起用戶注意，增加主播用戶和產(chǎn)品之間的互動，而提升頁面日活以及次日留存。

2. 設(shè)計層面

設(shè)計師的基本出發(fā)點是需要設(shè)計出不低于競品且更加精致的稿件，能夠更加有效傳達品牌理念和視覺延展性，進而理解產(chǎn)品與競品之間的差異化，增強用戶認(rèn)知。

3. 用戶層面

此次迭代需要考慮到主播用戶的教育成本和接受程度，能否讓用戶感受到產(chǎn)品的差異性，能否讓用戶在第一時間看到我們希望用戶關(guān)注的東西。

二、設(shè)計前期分析

通過溝通我們明確了產(chǎn)品需求點，接下來需要針對需求進行分析，我們從競品視覺分析、設(shè)計關(guān)鍵詞提煉兩點來進行設(shè)計決策。

1. 視覺競品分析

針對性的通過對 VIP、等級等屬性的頁面進行視覺收集。

2. 設(shè)計關(guān)鍵詞提煉

主播等級頁面的服務(wù)理念是為主播用戶提供更加清晰的等級提升指引。區(qū)別于喜馬其他等級線，整個流程中除了滿足等級查看的基本需求和特權(quán)展示的標(biāo)準(zhǔn)化流程，更多的差異是對目標(biāo)用戶需求的洞察和挖掘，我們從目標(biāo)用戶需求定義了主播等級線設(shè)計差異化的關(guān)鍵詞。

三、設(shè)計執(zhí)行

通過與產(chǎn)品溝通需求點，我們了解到視覺層面需要滿足或改進的內(nèi)容；通過視覺競品分析我們獲取產(chǎn)品未來的設(shè)計趨勢以及具有前瞻性的設(shè)計概念；接下來在稿件輸出的過程中我們就可以打散原有頁面的信息層級并進行重新分組，分析所有層級信息字段的屬性，然后整理出不可變動信息、可變動信息、可增加的信息、可變的布局樣式，不斷嘗試重組信息結(jié)構(gòu)，找出合適的視覺決策點。

針對設(shè)計稿件，開展設(shè)計內(nèi)部視覺評審，針對視覺稿件還邀請了產(chǎn)品以及交互進行意見收集，最終選擇方案一作為主播等級迭代方案。

四、業(yè)務(wù)線視覺延展

在主頁面色彩偏好、功能布局定稿之后，為了在關(guān)鍵轉(zhuǎn)化點給用戶帶來統(tǒng)一有趣的視覺體驗，以主頁面視覺為參考以動效、ICON、插畫三個維度進行設(shè)計延展，保證與競品的品牌差異性以及設(shè)計的統(tǒng)一性。

1. 特權(quán)ICON

為了達到設(shè)計稿件色彩傾向、品牌差異設(shè)計貫穿用戶每一個關(guān)鍵轉(zhuǎn)化點保持特權(quán) ICON 視覺語言統(tǒng)一，并增加趣味性拉開與競品的差異，提升用戶點擊轉(zhuǎn)化率。

2. 插畫延伸

針對產(chǎn)品等級攻略個性化需求的訴求點，圍繞等級提升的不同要求繪制場景化插畫，并保持視覺層面的輸出配套，通過十字交叉分析有針對性的進行精準(zhǔn)推送。

3. 動效延伸

圍繞溫暖、成就感兩個關(guān)鍵進行延展，在用戶點擊等級主頁入口的第一時間感受到等級提升的成就感以及統(tǒng)一色彩傾向帶來的重視感，通過特權(quán)展示達到所見即所得的直觀感受。

結(jié)語

設(shè)計并非一念間的靈感迸發(fā)，設(shè)計師對整個業(yè)務(wù)需要有清晰的理解，明白產(chǎn)品定位并通過前期設(shè)計分析奠定設(shè)計理念而進行設(shè)計產(chǎn)出。

設(shè)計是一個逐漸嶄露頭角的過程，而我理解的設(shè)計師則應(yīng)該是快樂的戰(zhàn)士而不是輕言放棄的賭徒，還是那句話：每個人都有屬于自己的一片森林。一點工作總結(jié)希望對大家有多裨益，同時歡迎各位大佬加入喜馬拉雅FM。