原始transition組件和CSS
定義transition的最簡單方法是使用transition·或transition-group 組件。這需要為transition定義一個name`和一些CSS。
<template>
<div id="app">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
show: true
};
}
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
圖片描述
看起來容易,對吧?然而，這種方法有一個問題。我們不能在另一個項目中真正重用這個transition。
封裝transition組件
如果我們將前面的邏輯封裝到一個組件中，并將其用作一個組件，結果會怎樣呢？
// FadeTransition.vue
<template>
<transition name="fade">
<slot></slot>
</transition>
</template>
<script>
export default {
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
// App.vue
<template>
<div id="app">
<button v-on:click="show = !show">
Toggle transition
</button>
<fade-transition>
<div v-if="show" class="box"></div>
</fade-transition>
</div>
</template>
<script>...</script>
<style>...</style>
圖片描述
通過在transition組件中提供一個slot，我們幾乎可以像使用基本transition組件一樣使用它。這比前面的例子稍微好一點，但是如果我們想要傳遞其他特定于transition的prop，比如mode或者一些hook，該怎么辦呢
封裝的包裝器transition組件
幸運的是，Vue 中有一個功能，使我們可以將用戶指定的所有額外props和監(jiān)聽器傳遞給我們的內部標簽/組件。 如果你還不知道，則可以通過$attrs訪問額外傳遞的 props，并將它們與v-bind結合使用以將它們綁定為props。 這同樣適用于通過$listeners進行的事件，并通過v-on對其進行應用。
// FadeTransition.vue
<template>
<transition name="fade" v-bind="$attrs" v-on="$listeners">
<slot></slot>
</transition>
</template>
<script>
export default {};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
// App.vue
...
<fade-transition mode="out-in">
<div key="blue" v-if="show" class="box"></div>
<div key="red" v-else class="red-box"></div>
</fade-transition>
...
圖片描述
完整事例地址：https://codesandbox.io/s/yjl1...
現在，我們可以傳遞普通transition組件可以接受的任何事件和支持，這使得我們的組件更加可重用。但為什么不更進一步，增加通過 prop 輕松定制持續(xù)時間的可能性。
顯式持續(xù)時間 prop
Vue 為transition組件提供了一個duration prop，然而，它是為更復雜的動畫鏈接而設計的，它幫助 Vue 正確地將它們鏈接在一起。
在我們的案例中，我們真正需要的是通過組件prop控制CSS animation/transition。 我們可以通過不在CSS中指定顯式的CSS動畫持續(xù)時間，而是將其作為樣式來實現。 我們可以借助transition hook來做到這一點，該transition hook與組件生命周期 hook 非常相似，但是它們在過渡所需元素之前和之后被調用。 讓我們看看效果如何。
// FadeTransition.vue
<template>
<transition name="fade"
enter-active-class="fadeIn"
leave-active-class="fadeOut"
v-bind="$attrs"
v-on="hooks">
<slot></slot>
</transition>
</template>
<script>
export default {
props: {
duration: {
type: Number,
default: 300
}
},
computed: {
hooks() {
return {
beforeEnter: this.setDuration,
afterEnter: this.cleanUpDuration,
beforeLeave: this.setDuration,
afterLeave: this.cleanUpDuration,
...this.$listeners
};
}
},
methods: {
setDuration(el) {
el.style.animationDuration = `${this.duration}ms`;
},
cleanUpDuration(el) {
el.style.animationDuration = "";
}
}
};
</script>
<style>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
</style>
圖片描述
完整事例地址：https://codesandbox.io/s/j4qn...
現在，我們可以控制實際的可見過渡時間，這使我們可重用的過渡變得靈活且易于使用。 但是，如何過渡多個元素（如列表項）呢？
Transition group 支持
你想到的最直接的方法可能是創(chuàng)建一個新組件，比如fade-transition-group，然后將當前transition標簽替換為transition-group標簽，以實現 group transition。如果我們可以在相同的組件中這樣做，并公開一個將切換到transition-group實現的group prop，那會怎么樣呢?幸運的是，我們可以通過render函數或component和is屬性來實現這一點。
// FadeTransition.vue
<template>
<component :is="type"
:tag="tag"
enter-active-class="fadeIn"
leave-active-class="fadeOut"
move-class="fade-move"
v-bind="$attrs"
v-on="hooks">
<slot></slot>
</component>
</template>
<script>
export default {
props: {
duration: {
type: Number,
default: 300
},
group: {
type: Boolean,
default: false
},
tag: {
type: String,
default: "div"
}
},
computed: {
type() {
return this.group ? "transition-group" : "transition";
},
hooks() {
return {
beforeEnter: this.setDuration,
afterEnter: this.cleanUpDuration,
beforeLeave: this.setDuration,
afterLeave: this.cleanUpDuration,
leave: this.setAbsolutePosition,
...this.$listeners
};
}
},
methods: {
setDuration(el) {
el.style.animationDuration = `${this.duration}ms`;
},
cleanUpDuration(el) {
el.style.animationDuration = "";
},
setAbsolutePosition(el) {
if (this.group) {
el.style.position = "absolute";
}
}
}
};
</script>
<style>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
.fade-move {
transition: transform 0.3s ease-out;
}
</style>
// App.vue
...
<div class="box-wrapper">
<fade-transition group :duration="300">
<div class="box"
v-for="(item, index) in list"
@click="remove(index)"
:key="item"
>
</div>
</fade-transition>
</div>
...
圖片描述
完整事例地址：https://codesandbox.io/s/pk9r...
文檔中介紹了一個帶有transition-group元素的警告。 我們基本上必須在元素離開時將每個項目的定位設置為absolute，以實現其他項目的平滑移動動畫。 我們也必須添加一個move-class并手動指定過渡持續(xù)時間，因為沒有用于移動的 JS hook。我們將這些調整添加到我們的上一個示例中。
再做一些調整，通過在mixin中提取 JS 邏輯，我們可以將其應用于輕松創(chuàng)建新的transition組件，只需將其放入下一個項目中即可。
Vue Transition
在此之前描述的所有內容基本上都是這個小型 transition 集合所包含的內容。它有 10 個封裝的transition組件，每個約1kb(縮小)。我認為它非常方便，可以輕松地在不同的項目中使用。你可以試一試:)
總結
我們從一個基本的過渡示例開始，并最終通過可調整的持續(xù)時間和transition-group支持來創(chuàng)建可重用的過渡組件。 我們可以使用這些技巧根據并根據自身的需求創(chuàng)建自己的過渡組件。 希望讀者從本文中學到了一些知識，并且可以幫助你們建立功能更好的過渡組件。
今日頭條作為資訊閱讀類產品，Feed流場景是資訊類產品的核心場景之一，關于Feed流的改版嘗試一直在進行，針對本次優(yōu)化，多次在線上進行驗證后，得到一個滿意的結果，也將我們關于「頭條首頁改版」運用到的設計方法進行分享。
觀點-實驗-規(guī)則
項目前期提出設計論點，通過方案和實驗去驗證可行性，最后結合案例形成符合當前場景的設計規(guī)則，這也是本次設計探索所運用到的論證方法。
1. 什么是閱讀需求？
一組信息通過不同的字號反差組合來滿足不同場景下的文字閱讀需求，這稱之為閱讀需求，閱讀需求一般可以歸納為以下3種類型：快速定位型、瀏覽型、閱讀型。
△ 三種閱讀需求
2. 今日頭條首頁的閱讀需求是什么？
今日頭條Feed的閱讀需求，我們定義為快速定位型和瀏覽型之間。原因是在閱讀Feed時，用戶有獲取標題關鍵信息的強定位屬性，同時也有瀏覽feed信息的瀏覽訴求；從Feed閱讀習慣的分析，我們提到兩個關鍵詞，信息的定位和瀏覽，后面的探索也會圍繞這兩個關鍵詞展開。
△ 首頁的閱讀需求
1. 信噪比與界面
「信噪比」（Signal-to-Noise Ratio）原本是用在聲音和圖像領域的概念，指在聲音傳播過程中信號和噪音的比例。這個理論也可以運用在頁面中，如果要將訊息完整地傳遞給使用者，可以選擇強化原有的訊息，或是降低多余的雜訊，來提高「信噪比」（Signal-to-Noise Ratio）以增加訊息成功被判讀的機率，也讓使用者能更輕松地閱讀資訊。
一組信息是否更好的兼容定位與瀏覽屬性，在于信息本身是否足夠強調與清晰；「信噪比」理論是幫助我們理解「信息清晰度」的存在。
簡而言之，「信噪比」理論通指有效信息和次級信息的比例，控制平衡這個比例，可以有利于信息完整的傳遞給用戶，也能更輕松的獲取資訊。
通過強化頁面內的有效資訊，降低多余雜訊，從而提升頁面內的「信噪比」，以達到提高有效資訊傳遞，幫助用戶能更輕松獲取資訊的目的?！感旁氡取估碚撌欠浅Ｍㄓ谩⑹褂脧V泛的指導理論，對信息流頁面設計有明確的指導作用；
△ 提升「信噪比」的目的
2. 視覺搜尋實驗
△ 視覺搜尋實驗
在視覺搜尋的實驗里，讓受試者從許多個「X」里面挑出1個「O」，然后再讓他們從「┸」里面挑出一個「┼」。我們把所有的視覺元素稱作刺激總量，大部分的元素（「X」和「┸」）稱為干擾物，唯一不一樣的那個元素（上面例子的「O」和「┼」）稱為目標物。而實驗的目的，就是要檢測在干擾物增加和同等情況下，受試者會不會需要花費更多時間才能找到目標物。
當我們的視覺系統(tǒng)在辨識影像時，有一些影像的屬性很容易被大腦處理，我們的視覺系統(tǒng)可以很快過濾辨識這些基礎特征，讓我們的大腦分辨這些影像屬性更容易一些。因此我們涉及到大量信息的設計時，如果能夠善用這些基本特征，便可以提高用戶的閱讀效率。
那么，什么樣的特征能夠幫助訊息更快，更有效的被用戶判讀和接收呢？在視覺搜尋實驗中，有一些基礎特征很容易被我們的視覺系統(tǒng)所辨識出來，其中主要有4種不需注意力介入便能輕易分辨的基本特征：
△ 4種基礎特征
強化信息的基本特征是增強信息被判讀最有效的方式，我們可以根據場景和用戶訴求，選取最合理的方式來對信息進行處理；這4個基礎特征，通過反差來增強核心信息的突出程度，輔助信息更好的傳遞給用戶。
通過「視覺搜尋實驗」，我們可以得到兩點結論：
這兩點結論是對于」信噪比「理論的補充，處理好信息的」信噪比「關系，強化有效資訊，弱化次要雜訊，幫助用戶有效接收資訊，更輕松獲取資訊。
3. 首頁目標的變化
資訊的生命周期中，包括了產生、傳遞、接收這三個重要的階段，而每個階段都有可能造成信息的損耗；
信息產生是源頭，這里的損耗在所難免，我們所要做的，是盡可能控制」傳遞「和」接受「階段的損耗；早期的頭條首頁承載大量信息，目的是為了讓用戶可以接受到更多信息，這時「效率」會是第一位。
但在承載大量信息的同時，頁面信息過多，容易造成信息對比弱、布局密集，從而導致信息 」傳遞「 階段的損耗，同時用戶在」接受「信息時，看到擁擠的信息布局，接受信息的」效率「被降低，被迫造成損耗。
為了更好的提升首頁閱讀效率，我們重新審視當前的設計目標，通過對不同組合的空間調整，平衡展示效率以及閱讀識別性，控制「傳遞」和「接受」中不必要的信息損耗；將設計目標從過去的「效率最大化」，調整為「有效，輕松的閱讀」
對于這個目標，我們結合之前抽離的」信噪比「理論，進行更為細致的拆解，確保能落實到后續(xù)的設計方案中。
△ 設計目標轉變
4. 回顧信噪比
「信噪比」理論可以平衡頁面內有效信息和次級信息，在這樣理論的引導下，提供的方案其實更具備說服力。
和圖片噪點一樣，噪點越低，清晰度越高，映射到頁面也是如此，頁面內的雜訊過多，影響到有效訊息的傳遞，我們需要做的，就是給頁面進行「降噪」處理。
1. 文字的反差比
根據前期的」信噪比「論點和」視覺搜尋實驗「，我們得出兩個核心觀點：
兩個論點其實都提到了信息對比強弱對于用戶判讀的影響，由此可見，不同信息的反差關系,是增強信息傳遞，縮短用戶接受信息耗費時間的關鍵指標。
如果說「信噪比」是信息流優(yōu)化的理論依據，那么「反差比」則是驗證頁面信息反差關系的手段。
調整頁面內文字反差，一般通過三種方式來提升或調整
△ 提升文字反差方式
讓我們來看首頁中Feed流的標題字號，我們通過 iOS 和 Android 的通用文字規(guī)范可以發(fā)現，最小閱讀文字為12號字（10號字用在標簽，9號字用在數字提醒，都不適合作為閱讀文字），Material design中正文內容默認字號為16px，iOS規(guī)范中則定義了7個正文字階（14、15、16、17、19、21、23)，綜合多方因素，我們選取了16號字、17號字為主要驗證目標.最后形成16/12 17/12這兩組組合來驗證線上Feed信息流。
「信噪比」和「視覺搜索」理論中，多次提到增強元素反差比，用戶能越快獲取資訊；所以我們也嘗試了加粗字體和加大文字的實驗嘗試，用于驗證文字反差比的上限。
△ iOS/Android 通用文字
2. 反差比公式
為了更好的驗證和觀察Feed流中的不同文字字號的反差關系范圍，我們提出了一個坐標公式用于驗證，可以直觀的觀察字號，字色，字重三組信息間的關系。
Y軸代表字號，X軸是不同灰階文字顏色，我們可以將Feed信息組合中的字號放入表格中，通過科學方法檢驗反差范圍。
關于這套驗證公式，是我們?yōu)榱蓑炞C文字反差比所提出的檢驗方法，通過不同實驗組中字號的反差范圍來驗證哪組更適合Feed場景，最后輸出成符合當前場景的通用規(guī)則。
△ 文字/灰階反差比推導圖
最后，我們選擇4組方案進行首頁反差比驗證，同時將比字號放入坐標軸中,可以看出以下文字的反差范圍
△ 在反差比范圍內，選取的四種字體組合
上面4個表格分別對應4組反差比驗證的字號組合，不同字號組合的反差比范圍，我們都可視化出來，以便于更好驗證哪個信噪比范圍更合理；每組方案的反差比范圍都不一樣，我們會通過線上實驗，選取最適合當前場景的反差比范圍，并形成適用于Feed的反差比規(guī)則。
這里也是驗證首頁Feed反差比的上限和下限范圍，有時主體并不是反差越強越好，反差也是有閾值范圍，超過這個閾值范圍，會導致信息展示比例不協(xié)調，用戶側也會起到反作用。
目前對于坐標公式驗證文字反差比的理論還處于實驗理論階段，我們認為對于字號和灰階之間，有合理的規(guī)則存在，單獨對于規(guī)則的抽離和梳理，還需要大量樣本去實驗論證，后續(xù)有新的結論產出和模型迭代。
目前線上首頁存在以下問題：
為了解決這些問題，我們對于首頁的視覺語言進行了優(yōu)化，通過」信噪比「理論，我們了解到平衡有效信息和雜訊的比例，是保持信息干凈清晰，更好觸達用戶的保證；因此我們重新梳理不同題材的結構，確保核心信息在首頁展示的唯一性，去掉了對于用戶閱讀過程中可能造成阻礙的信息。
△ 首頁前后對比
這樣，首頁上核心信息的展示層級得到統(tǒng)一，保證了信息干凈清晰，能夠更好觸達用戶。
在「信噪比」理論和「反差比」實驗的基礎上，輸出了用于線上測試的設計方案，為了驗證首頁中不同變量的影響，我們把頭部，字號，字重，間距這些可能影響首頁的因素都拆分驗證對于首頁影響；同時，根據前面」反差比「的驗證理論，我們把」字號加大「和」文字加粗「也放進實驗中進行驗證，為后續(xù)實驗積累數據樣本。
△ 線上驗證首頁方案
綜合前面的實驗結果，最終我們選擇了兩組這兩組方案，目前線上在進行最后實驗。在實驗中，我們也提取到幾點關鍵指標：
用戶對于灰頭樣式并未特別排斥，這個對于過去頭條頂部必須是紅色的認知有些挑戰(zhàn)；其實當下設計趨勢是在減少用戶閱讀的信息干擾，灰頭更符合這一趨勢，同時使用灰頭也會提升頭條整體計品質感，對于后續(xù)設計拓展有很大幫助。
加粗字體上，男性用戶比較偏好加粗字體，但是女性用戶和年輕用戶較為反感。
增大Feed字號，信息展示確實更突出，但是影響到整個首頁的感官，而且違背了我們的設計目標，同時也不利于后續(xù)設計拓展。部分用戶手機的展示情況和特殊字體設置都會受到大字體影響，需慎重考慮。
前面有談及18號字的問題，字號增大確實能增強視覺感官，但要考慮到頭條用戶比較喜歡運用特殊字體，特殊字體對比通用字體更加個性化，但是字體大小，展示高度并不可控，當字號比較大的情況下，再加上手寫字體，效果不可控。
△ 線上手寫字體情況
線上實驗后，我們也進行了一次線下用戶調研，用研結果中用戶對新版滿意度高于舊版，其中有一個點多次被用戶提及到，就是調整后的全圓角搜索框。相比過去的方形搜索框，調整后的全圓角搜索框是能給用戶留下深刻印象的視覺記憶。
回顧整個首頁改版過程，我們總結了項目中的流程和思考，希望能幫助大家：
1. 定義當前使用場景的閱讀需求：
閱讀Feed的時候，用戶有獲取關鍵信息的強定位屬性，同時也兼顧feed信息的瀏覽屬性。
2. 通過「信噪比」理論，明確設計方向：
強化頁面內的有效資訊，降低多余雜訊，提升頁面內的」信噪比「，達到用戶有效接受資訊，輕松獲取資訊的目的。
3. 運用「反差比」手段，提升信息反差比，增強信息傳遞：
文字可以通過字號，字色，字重調整反差關系，并且通過「文字反差驗證表」進行反差比范圍驗證，推導出更適合首頁的反差范圍，形成首頁反差比規(guī)則。
4. 線上拆分驗證，量化首頁影響指標：
線上驗證方案，把字號、字重、間距疏密，頭部顏色多個維度拆分驗證，觀察不同個指標對首頁影響。
5. 抽離項目中有價值的信息，后續(xù)形成統(tǒng)一規(guī)則：
間距樣式和信息層級統(tǒng)一的feed模塊；從矩形到全圓角的搜索框這些知識點都可以沉淀成信息流場景的認知規(guī)則，并且給予其它業(yè)務和項目理論和實踐支持，將理論和線上驗證相結合，形成真正有價值的設計方法。
「信噪比」理論可以廣泛運用到頁面信息設計中，幫助大家合理的梳理核心信息與次要信息關系，并且通過」反差比「手段，增強有效信息或弱化次要信息；保障頁面內層級的合理布局，幫助用戶更有效的判讀信息；這次改版也是對目前認知基礎上進行的一次拆解與構建，過去我們所認知的基礎目前可能處于變化階段，這也為我們后續(xù)方向探索提供更多可能性。
希望這些能為后續(xù)設計起到幫助，給予大家思路與靈感，更好的服務用戶。
文章來源：優(yōu)設 作者：今日頭條UED
設計總是在變化。在過去一年里，我們不僅看見了五福的C4D運用，雙11的動效插畫運用，以及大量AR/VR智能的設計，還有蘋果黑暗模式的普及，新技術帶來新的體驗和解決方案。2020年，關注研究新興的用戶體驗趨勢，前段時間，在我星球里，我?guī)еO計師一起來研究關于2020界面設計趨勢，希望能幫助大家是設計中有所啟發(fā)。
研究背景
隨著UI/UX領域人工智能的發(fā)展，和虛擬現實等新技術的變革，從前單一的內容很難滿足用戶的訴求，用戶的訴求也變得千人前面，所以在研究趨勢之前，我基于這些關鍵詞，來分析2020的設計趨勢。
色彩趨勢
1.彩虹漸變
這兩年來，彩色漸變一直是設計趨勢，設計師將大膽的漸變，飽和度更高的漸變運用在設計中去，讓整體的色彩感覺，更加年輕化與活躍。
▲ Apple一直是這個領域的引領者，隨著當年iPhoneX的發(fā)布，彩虹的漸變色，大膽的漸變風格瞬間成為設計師筆下的弄潮兒。
▲ 這組插畫中，作者就運用了大面積的漸變，兩種顏色的運用，通過重疊，明度變化，豐富了整個設計層次。
▲ 不僅在平面設計中，在網頁設計中，也是被大量運用，SWATCH的官網，清新的漸變配合動感的模特照片，以及和產品的完全結合，讓頁面充滿著活力。
▲ 在移動端也是如此，金融產品的背景設計，銀行卡面的設計，可視化圖表的運用，都能看出大膽漸變還是很受歡迎。
2.黑暗模式
隨著google和facebook以及instagram這些知名應用都開始提供黑暗模式，國內微信也開始黑暗模式，2020黑暗模式設計，一定是需要設計師去關注的。
黑暗模式，除了在黑暗中提高內容可讀性以外，還能減少用戶疲勞，還可以節(jié)約電池，所以黑暗模式在今年將是所有應用程序必不可少的一個功能。
▲ Google的黑暗模式運用，通過一個簡單的按鈕開關就可以切換，也可以根據系統(tǒng)定義切換。
▲ 黑暗模式未來會成為一種標配，一個軟件設計在剛開始的時候就必須考慮進來。
▲ 關于黑暗模式，正向當年iOS扁平化剛出來的時候，國內的很多產品都還沒有準備好，但是相信過不了多久，黑暗模式一定會普及開來，所以2020大家都應該提前去了解黑暗模式的，設計規(guī)范和細節(jié)。
3.更大膽的一種顏色
▲ 除了漸變色，那么大膽的單色在設計中運用也會越來越多，整個設計就一套色彩體系貫穿，大多時候以品牌色的形式去運用，配合留白，對比明顯的字體，整體給人印象深刻。
▲ 在韓國的應用中用的比較多，它的優(yōu)勢是色彩干凈，品牌整體感強，但是對設計師駕馭頁面能力也要求很高，因為大面積的單色，如果用不好就會很刺眼。
▲ Naverpay的設計，整個界面就是用的綠色漸變，清新同時也能很好和Naver品牌色進行結合。
▲ 在它的很多頁面中，很多控件這個綠色運用的很巧妙，不會給人很刺眼的感覺，所以大膽的一種顏色運用在2020頁將是設計師值得去關注的一個方向。
▲ 掃碼加入知識星球，了解更多
插畫趨勢
在過去幾年里，插畫是一種新的表達方式，越來越多的設計師，插畫師通過插畫表達產品的情緒，個人的情緒主張，那么在2020插畫的運用就得和品牌很好的融合起來，如果你的插畫是和品牌割裂的，需要注意。
1.和品牌結合
▲ wibbite的插畫，標志性歐美的風格，除了插畫本身手法比較簡約模塊，插畫中運用的色彩和內容本身也很產品定位匹配。
▲ 插畫對于品牌來說也是非常重要的一個因素，無論在界面設計，還是在品牌營銷很多場景都需要插畫去營造產品氛圍和氣質，插畫有助于將我們的品牌故事講述給聽眾聽，所以在構建一個品牌時候，插畫是非常重要的點之一，但是做之前一定要盡量多去了解我們?yōu)榭蛻籼峁┑脑O計價值，只有了解了用戶價值，才能去定義去特色的故事，幫助產品。
▲ Uber系列插畫提供暖色，以及安全藍的運用，突出打車服務中安全的關鍵要素。
▲ Google的插畫系統(tǒng)也是如此，沒有很華麗的炫技，有的是對于多元文化的思考，設計場景的融合貫通。
所以不難看出，插畫的方向一定是和品牌結合的，不會為了趨勢而趨勢，一定是圍繞內容去設計。
2.3D插畫
▲ 如果說這2年，各種各樣的插畫手法百花齊放，那么隨著人們的審美變化，趨勢也從靜態(tài)變成動態(tài)，從平面變成3D，從今年的支付寶五福設計中大家應該能感覺到2020的插畫設計一定是往著3D方向，而且是動態(tài)3D方向演進的。
▲ 谷歌一組插畫，結合與大腦、團隊合作、想法、密碼箱為圖形進行創(chuàng)意設計，人物造型可愛好玩，凸顯年輕化潮流。
▲ Apple在中國區(qū)App Store 的一組設計，整體設計以紅色為主，運用了象征中國元素的龍、紅包、燈籠、福字、紙牌作為設計元素，整體運用3D表達，凸顯年輕和趣味性。
3.等距插畫
等距插畫這兩年已經是一個主流風格之一，在未來還會接著流行，但是等距插畫未來或許和場景聯系在更緊密，在每年天貓雙11設計中，互動城的設計每年基本都是等距插畫風格，它的故事感和畫面感，都能讓人眼前一亮，所以電商的設計，在短時間內，大型活動場景基本都離不開這個風格。
▲ 這組等距插畫場景故事感很強，建立了一個空間世界，作為網站主風格非常的吸引人。
▲ 除了這種大的場景，等距插畫，在小的場景中，作為插畫規(guī)范也是運用比較多，它風格可輕可重，隨著5G時代到來，靜態(tài)可能會逐步演進成動態(tài)插畫。
4.根據內容定制的插畫
隨著內容的升級，對內容的表達也會被越來越重視，那么如何更好的把內容更生動表達出來，插畫就是很好的一個形式，根據內容定制的插畫，在很多產品中被運用到，互聯網教育，IT等領域。所以專門針對內容去設計插畫，在今年或許是一個趨勢，插畫不再是孤零零只是為了情感化而存在。
▲ Crowdrise的產品設計，整體就是運用作為整體設計語言，風格統(tǒng)一，內容突出，畫面效果好。
▲ 插畫的形態(tài)終于不再是孤零零的只是用戶情感的表達，而是隨著內容的升級變化，在產品中發(fā)揮的重要性也越來越大。
3.3D黏土插畫的運用
3D設計因為今年設計師很喜歡用的樣式之一，我們將盡管3D已經存在了一段時間，但最近我們看到了很多模仿粘土樣式效果的3D插圖的興起。這將成為今年流行的設計趨勢，我們甚至還會看到很多藝術家在電影，插畫和廣告中結合了2D和3D風格。
▲ 在instagran的一組設計中，設計師運用這種黏土和3D的方式設計，畫面充滿了生活感和溫暖。
▲ 谷歌也在它們的項目中大量運用這種黏土風格設計，會顯得更加的現代和活潑，黏土的設計相對3D插畫區(qū)別在于更加細膩，線條上更加柔和。
字體趨勢
這幾年越來越多的公司，開始定制字體，根據自己的品牌特質去做一些獨特的字體，從國外到國內，品牌定制字體未來或許還會越來越多，對于設計師好處來說，這些品牌字體很多都是免費開放給設計師用，會形成一個很高的商業(yè)環(huán)境。
1.定制字體
▲ 錘子發(fā)布了他們的Smartisan T黑字體。
▲ 騰訊發(fā)布了定制的“騰訊字體”，相比原來傾斜的黑體字，騰訊的新字體更現代、更協(xié)調、更動感。運用起來也非常有力量感。
▲ 阿里普惠體，隨著集團業(yè)務龐大，字體使用場景多且復雜，包括各產品客戶端、營銷設計、操作系統(tǒng)、硬件設備、建筑空間及公關傳播等等。決定以現代為核心設計理念，以可靠、明快為設計切入點，將阿里精神融入到字體當中。最終一款擁有現代感滿足全場景黑體誕生了，而且商用免費。
▲ 除了前面的阿里，騰訊，錘子，小米OPPO，京東也都發(fā)布了自己的專屬品牌字體，所以在2020年，品牌字體或許是每個公司的一個標配了，我們拭目以待。
▲ 國外其實是最早開始為品牌定制字體的，三星手機雖然銷量消化，但是他們品牌字體：SamsungOne，設計風格，很強的現代感，而且，這個字體有不同粗細的筆畫字重，適用面很廣。
▲ IBM的字體名稱：IBM Plex Sans Text，這款字體設計比較簡潔，干凈，沒有多余的筆畫，這個字體很良心免費商用的。
2.粗體的運用
縱觀2020的一些設計，留白越來越大，邊距越留越多，字體也變的很粗，粗的字體和正文普通字體形成了明顯的對比，再加上網格的布局，讓頁面內容更加凸顯。
▲ 大字體的運用，字體就是內容，重復運用內容元素作為排版手段，對于內容組織和平面要求較高。
▲ 在UI設計中，大字體的設計也很常見，蘋果商店，蘋果官方應用都是大字體的推崇者，隨便5G的來臨，對于內容的追求也會越來越高，那么除了大字體，視覺元素減少，內容本身質量要求也越來越高。
▲ 粗的字體常用語大標題，或者頁面導航性指引作業(yè)，幫助用戶更好去理解功能本身，上面這個頁面粗的字體就是導航，告訴用戶這一頁，你需要去完成什么動作指引。
▲ 掃碼加入知識星球，了解更多
最后
設計趨勢必然與技術發(fā)展緊密結合，作為設計師我們需要了解，以及平時和我們設計進行結合，下期將帶來，2020的UI設計趨勢下部分，看看還有哪些需要我們去關注的。
轉自：ui中國-skys
XSS
跨站腳本攻擊（Cross Site Script）,本來縮寫是 CSS, 但是為了和層疊樣式表（Cascading Style Sheet, CSS）有所區(qū)分，所以安全領域叫做 “XSS”；
XSS攻擊，通常是指攻擊者通過 “HTML注入”篡改了網頁，插入了惡意的腳本，從而在用戶瀏覽網頁時，對用戶的瀏覽器進行控制或者獲取用戶的敏感信息（Cookie, SessionID等）的一種攻擊方式。
頁面被注入了惡意JavaScript腳本，瀏覽器無法判斷區(qū)分這些腳本是被惡意注入的，還是正常的頁面內容，所以惡意注入Javascript腳本也擁有了所有的腳本權限。如果頁面被注入了惡意 JavaScript腳本，它可以做哪些事情呢？
可以竊取 cookie信息。惡意 JavaScript可以通過 ”doccument.cookie“獲取cookie信息，然后通過 XMLHttpRequest或者Fetch加上CORS功能將數據發(fā)送給惡意服務器；惡意服務器拿到用戶的cookie信息之后，就可以在其他電腦上模擬用戶的登陸，然后進行轉賬操作。
可以監(jiān)聽用戶行為。惡意JavaScript可以使用 "addEventListener"接口來監(jiān)聽鍵盤事件，比如可以獲取用戶輸入的銀行卡等信息，又可以做很多違法的事情。
可以修改DOM 偽造假的登陸窗口，用來欺騙用戶輸入用戶名和密碼等信息。
還可以在頁面內生成浮窗廣告，這些廣告會嚴重影響用戶體驗。
XSS攻擊可以分為三類：反射型，存儲型，基于DOM型(DOM based XSS)
反射型
惡意腳本作為網絡請求的一部分。
const Koa = require("koa");
const app = new Koa();
app.use(async ctx => {
// ctx.body 即服務端響應的數據
ctx.body = '<script>alert("反射型 XSS 攻擊")</script>';
})
app.listen(3000, () => {
console.log('啟動成功');
});
訪問 http://127.0.0.1:3000/ 可以看到 alert執(zhí)行
反射型XSS1
舉一個常見的場景，我們通過頁面的url的一個參數來控制頁面的展示內容，比如我們把上面的一部分代碼改成下面這樣
app.use(async ctx => {
// ctx.body 即服務端響應的數據
ctx.body = ctx.query.userName;
})
此時訪問 http://127.0.0.1:3000?userName=xiaoming 可以看到頁面上展示了xiaoming，此時我們訪問 http://127.0.0.1:3000?userName=<script>alert("反射型 XSS 攻擊")</script>, 可以看到頁面彈出 alert。
反射型XSS2
通過這個操作，我們會發(fā)現用戶將一段含有惡意代碼的請求提交給服務器，服務器在接收到請求時，又將惡意代碼反射給瀏覽器端，這就是反射型XSS攻擊。另外一點需要注意的是，Web 服務器不會存儲反射型 XSS 攻擊的惡意腳本，這是和存儲型 XSS 攻擊不同的地方。
在實際的開發(fā)過程中，我們會碰到這樣的場景，在頁面A中點擊某個操作，這個按鈕操作是需要登錄權限的，所以需要跳轉到登錄頁面，登錄完成之后再跳轉會A頁面，我們是這么處理的，跳轉登錄頁面的時候，會加一個參數 returnUrl，表示登錄完成之后需要跳轉到哪個頁面，即這個地址是這樣的 http://xxx.com/login?returnUrl=http://xxx.com/A，假如這個時候把returnUrl改成一個script腳本，而你在登錄完成之后，如果沒有對returnUrl進行合法性判斷，而直接通過window.location.href=returnUrl，這個時候這個惡意腳本就會執(zhí)行。
存儲型
存儲型會把用戶輸入的數據“存儲”在服務器。
比較常見的一個場景就是，攻擊者在社區(qū)或論壇寫下一篇包含惡意 JavaScript代碼的博客文章或評論，文章或評論發(fā)表后，所有訪問該博客文章或評論的用戶，都會在他們的瀏覽器中執(zhí)行這段惡意的JavaScript代碼。
存儲型攻擊大致需要經歷以下幾個步驟
首先攻擊者利用站點漏洞將一段惡意JavaScript代碼提交到網站數據庫中
然后用戶向網站請求包含了惡意 JavaScript腳本的頁面
當用戶瀏覽該頁面的時候，惡意腳本就會將用戶的cookie信息等數據上傳到服務器
存儲型XSS
舉一個簡單的例子，一個登陸頁面，點擊登陸的時候，把數據存儲在后端，登陸完成之后跳轉到首頁，首頁請求一個接口將當前的用戶名顯示到頁面
客戶端代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>XSS-demo</title>
<style>
.login-wrap {
height: 180px;
width: 300px;
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
input {
width: 300px;
}
</style>
</head>
<body>
<div class="login-wrap">
<input type="text" placeholder="用戶名" class="userName">
<br>
<input type="password" placeholder="密碼" class="password">
<br>
<br>
<button class="btn">登陸</button>
</div>
</body>
<script>
var btn = document.querySelector('.btn');
btn.onclick = function () {
var userName = document.querySelector('.userName').value;
var password = document.querySelector('.password').value;
fetch('http://localhost:3200/login', {
method: 'POST',
body: JSON.stringify({
userName,
password
}),
headers:{
'Content-Type': 'application/json'
},
mode: 'cors'
})
.then(function (response) {
return response.json();
})
.then(function (res) {
alert(res.msg);
window.location.href= "http://localhost:3200/home";
})
.catch(err => {
message.error(`本地測試錯誤 ${err.message}`);
console.error('本地測試錯誤', err);
});
}
</script>
</html>
服務端代碼
const Koa = require("koa");
const app = new Koa();
const route = require('koa-route');
var bodyParser = require('koa-bodyparser');
const cors = require('@koa/cors');
// 臨時用一個變量來存儲，實際應該存在數據庫中
let currentUserName = '';
app.use(bodyParser()); // 處理post請求的參數
const login = ctx => {
const req = ctx.request.body;
const userName = req.userName;
currentUserName = userName;
ctx.response.body = {
msg: '登陸成功'
};
}
const home = ctx => {
ctx.body = currentUserName;
}
app.use(cors());
app.use(route.post('/login', login));
app.use(route.get('/home', home));
app.listen(3200, () => {
console.log('啟動成功');
});
點擊登陸將輸入信息提交大服務端，服務端使用變量 currentUserName來存儲當前的輸入內容，登陸成功后，跳轉到 首頁， 服務端會返回當前的用戶名。如果用戶輸入了惡意腳本內容，則惡意腳本就會在瀏覽器端執(zhí)行。
在用戶名的輸入框輸入 <script>alert('存儲型 XSS 攻擊')</script>，執(zhí)行結果如下
存儲型XSS
基于DOM(DOM based XSS)
通過惡意腳本修改頁面的DOM節(jié)點，是發(fā)生在前端的攻擊
基于DOM攻擊大致需要經歷以下幾個步驟
攻擊者構造出特殊的URL，其中包含惡意代碼
用戶打開帶有惡意代碼的URL
用戶瀏覽器接受到響應后執(zhí)行解析，前端JavaScript取出URL中的惡意代碼并執(zhí)行
惡意代碼竊取用戶數據并發(fā)送到攻擊者的網站，冒充用戶行為，調用目標網站接口執(zhí)行攻擊者指定的操作。
舉個例子：
<body>
<div class="login-wrap">
<input type="text" placeholder="輸入url" class="url">
<br>
<br>
<button class="btn">提交</button>
<div class="content"></div>
</div>
</body>
<script>
var btn = document.querySelector('.btn');
var content = document.querySelector('.content');
btn.onclick = function () {
var url = document.querySelector('.url').value;
content.innerHTML = `<a href=${url}>跳轉到輸入的url</a>`
}
</script>
點擊提交按鈕，會在當前頁面插入一個超鏈接，其地址為文本框的內容。
在輸入框輸入 如下內容
'' onclick=alert('哈哈，你被攻擊了')
執(zhí)行結果如下
基于DOM型XSS
首先用兩個單引號閉合調 href屬性，然后插入一個onclick事件。點擊這個新生成的鏈接，腳本將被執(zhí)行。
上面的代碼是通過執(zhí)行 執(zhí)行 alert來演示的攻擊類型，同樣你可以把上面的腳本代碼修改為任何你想執(zhí)行的代碼，比如獲取 用戶的 cookie等信息，<script>alert(document.cookie)</script>，同樣也是可以的.
防御XSS
HttpOnly
由于很多XSS攻擊都是來盜用Cookie的，因此可以通過 使用HttpOnly屬性來防止直接通過 document.cookie 來獲取 cookie。
一個Cookie的使用過程如下
瀏覽器向服務器發(fā)起請求，這時候沒有 Cookie
服務器返回時設置 Set-Cookie 頭，向客戶端瀏覽器寫入Cookie
在該 Cookie 到期前，瀏覽器訪問該域下的所有頁面，都將發(fā)送該Cookie
HttpOnly是在 Set-Cookie時標記的：
通常服務器可以將某些 Cookie 設置為 HttpOnly 標志，HttpOnly 是服務器通過 HTTP 響應頭來設置的。
const login = ctx => {
// 簡單設置一個cookie
ctx.cookies.set(
'cid',
'hello world',
{
domain: 'localhost', // 寫cookie所在的域名
path: '/home', // 寫cookie所在的路徑
maxAge: 10 * 60 * 1000, // cookie有效時長
expires: new Date('2021-02-15'), // cookie失效時間
httpOnly: true, // 是否只用于http請求中獲取
overwrite: false // 是否允許重寫
}
)
}
HttpOnly
需要注意的一點是：HttpOnly 并非阻止 XSS 攻擊，而是能阻止 XSS 攻擊后的 Cookie 劫持攻擊。
輸入和輸出的檢查
永遠不要相信用戶的輸入。
輸入檢查一般是檢查用戶輸入的數據是都包含一些特殊字符，如 <、>, '及"等。如果發(fā)現特殊字符，則將這些字符過濾或編碼。這種可以稱為 “XSS Filter”。
安全的編碼函數
針對HTML代碼的編碼方式是 HtmlEncode（是一種函數實現，將字符串轉成 HTMLEntrities）
& --> &
< --> <
> --> >
" --> "
相應的， JavaScript的編碼方式可以使用 JavascriptEncode。
假如說用戶輸入了 <script>alert("你被攻擊了")</script>，我們要對用戶輸入的內容進行過濾（如果包含了 <script> 等敏感字符，就過濾掉）或者對其編碼，如果是惡意的腳本，則會變成下面這樣
<script>alert("你被攻擊了");</script>
經過轉碼之后的內容，如 <script>標簽被轉換為 <script>，即使這段腳本返回給頁面，頁面也不會指向這段代碼。
防御 DOM Based XSS
我們可以回看一下上面的例子
btn.onclick = function () {
var url = document.querySelector('.url').value;
content.innerHTML = `<a href=${url}>跳轉到輸入的url</a>`
}
事實上，DOM Based XSS 是從 JavaScript中輸出數據到HTML頁面里。
用戶輸入 '' onclick=alert('哈哈，你被攻擊了')，然后通過 innerHTML 修改DOM的內容，就變成了 <a href='' onclick=alert('哈哈，你被攻擊了')>跳轉到輸入的url</a>, XSS因此產生。
那么正確的防御方法是什么呢？
從JavaScript輸出到HTML頁面，相當于一次 XSS輸出的過程，需要根據不同場景進行不同的編碼處理
變量輸出到 <script>，執(zhí)行一次 JavascriptEncode
通過JS輸出到HTML頁面
輸出事件或者腳本，做 JavascriptEncode 處理
輸出 HTML內容或者屬性，做 HtmlEncode 處理
會觸發(fā) DOM Based XSS的地方有很多，比如
xxx.interHTML
xxx.outerHTML
document.write
頁面中所有的inputs框
XMLHttpRequest返回的數據
...
項目中如果用到，一定要避免在字符串中拼接不可信的數據。
利用CSP
CSP (Content Security Policy) 即內容安全策略，是一種可信白名單機制，可以在服務端配置瀏覽器哪些外部資源可以加載和執(zhí)行。我們只需要配置規(guī)則，如何攔截是由瀏覽器自己實現的。我們可以通過這種方式來盡量減少 XSS 攻擊。
通?？梢酝ㄟ^兩種方式來開啟 CSP：
設置 HTTP Header 的 Content-Security-Policy
Content-Security-Policy: default-src 'self'; // 只允許加載本站資源
Content-Security-Policy: img-src https://* // 只允許加載 HTTPS 協(xié)議圖片
Content-Security-Policy: child-src 'none' // 允許加載任何來源框架
設置 meta 標簽的方式
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
這周我們進行下一步討論：如何對分析結果進行選擇。
首先我們需要了解互聯網產品研發(fā)團隊的各個角色分工。
對于初期的產品研發(fā)，可能公司沒有團隊概念，所以從想法到設計到開發(fā)，都由一個人搞定；
等到公司發(fā)展差不多，自己成了領導，就可以對各個角色和分工有所分組，也就是大多數初創(chuàng)公司的分配情況：
隨著公司業(yè)務的發(fā)展，產品經理需要處理越來越多的業(yè)務規(guī)劃任務，所以從業(yè)務視角和用戶視角將之前的產品經理崗位職責進行劃分：
所以最終的角色分配是：
再大一點的公司，會增加項目經理崗，把之前產品經理負責的職責拆出一部分，這部分職責就是項目管理。所以角色分配最終是：
了解了團隊角色分工，只是讓產品得到了更專業(yè)的技術支持，接下來我們需要切入正題：對交互方案進行評價篩選，篩選的標準可以圍繞：有用性、易用性和吸引力展開。
1. 有用性：
方案是否同時滿足業(yè)務目標與用戶體驗目標，為了更好理解，大家可以看下如下事例：
如果所有的線上商品都發(fā)順豐快遞，對于用戶來講，用戶體驗當然很好：夠快。但是從業(yè)務目標來講，這是不可取的，畢竟快遞不能獨順豐一攬。所以這個想法沒有顧及到業(yè)務目標，是不可行的；
很早之前，有過 Open ID 的概念：用一個 ID 就可以登錄多個網站。但是接入了 Open ID 的網站，對于自身產品的登錄注冊就會有一定影響，所以這個想法不了了之。
后來 Facebook 和 Twitter 開放了自己 ID，可用這兩個賬號進行其他網站登錄。于是國內很多網站也開始支持微博、微信、QQ 賬號登錄。
這樣降低了用戶注冊成本，而且也獲得了一定收益。所以這是個不錯的想法，但是對于一些需要獲得用戶信息的產品可能不太適合，所以視情況而定。
總結來說，有用性就是要滿足產品利益與用戶利益。畢竟如果只是很好看，最多也就只能被稱作一個藝術品。
2. 可用性
所謂可用性就是用戶容易理解，使用起來沒有障礙，并且感受良好。
關于產品可用性，大家可以去了解下鼎鼎有名的尼爾森十大可用性原則。
3. 吸引力
所謂吸引力就是產品有打動人、超越用戶期望值的細節(jié)。
關于吸引力設計，大家可以了解一下 KANO 模型，KANO 模型定義了三個層次用戶需求：
基本型的需求：用戶認為產品必須有的功能屬性，如果沒有，用戶會不滿意；如果有，用戶會覺得理所當然。這個層次的需求，還談不上用戶滿意與否；
期望型的需求：不是產品必須的功能屬性，可能用戶自己也不清楚一些功能，但是又恰恰是用戶希望看到的。如果這種需求實現得越多，用戶會越滿意；如果沒有滿足用戶這種期望值，用戶會不滿意；
興奮型的需求：對于一些無關緊要的功能需求，如果產品滿足了這些需求，用戶會非常滿意，從而提高用戶忠誠度，最后把它推薦給好友。
通過以上標準對方案進行分析，最后涉及到決策，不管哪種類型的角色分配，都需要進行決策，這里可分為以下兩種：
個人決策：對于最后的方案選擇，由一個人進行「拍板」，這種決策方式速度快，容易抓到事情本質；但是缺點是缺少了團隊氛圍，不太建議這種一人說了算的決策方式；
群體決策：這種決策方式團隊氛圍會好很多，通過發(fā)表每個人的看法，最后得到合理的、正確的、富有創(chuàng)造力的解決方案；但是缺點就是因為參與者多，需要比較長的時間進行決策，即使這樣，也建議使用這種決策方式，不過前提是需要事先確定一個明確的負責人，這樣可以對決策后果進行負責。
從小的方面來講，決策也可分為：
內部 review：設計的作品先在團隊內部進行過稿，然后修改，切忌全部做完才進行 review，需要做完一步就進行內部討論；
外部評審：以會議的形式展開，召集大家對作品進行講解。
確定了最終方案后，我們需要把它推銷出去，具體有以下幾種方法：
將思考過程可視化：可以采取上一篇文章的表格分析方式，讓設計更有說服力；
自己人效應：對自己人說的一些建議方法更加信賴；
準備一份PPT：展示設計思路；
講一個故事：以用戶的某個使用場景開頭，一步步講解用戶的使用情況，慢慢過渡到產品功能設計；
掌握必要的演講技巧和表達能力：包括口頭和文字表達能力，通過這兩種表達理清思路，也更好讓別人進行反饋。
最后想說的一些話：
作為交互（設計）專業(yè)人士，我們需要把握好一個尺度：什么該堅持，什么不該堅持，對于一些專業(yè)方面的東西，我們需要團隊內部人員都堅持，這樣目標會更清晰；但是對于一些比較小的設計細節(jié)，有時候可以適當妥協(xié)。
如何對設計需求分析結果進行選擇：
文章來源：優(yōu)設 作者：Pony歐尼的日常
以下是百度網盤UE團隊近期對會員中心體驗進行優(yōu)化，希望對大家做商業(yè)化產品有所幫助。
會員中心是承載著產品增值權益展示、購買、管理的「集合地」。自2016年起推出會員和超級會員兩項增值服務至今已有4年時間，隨著時間推移，用戶對網盤會員的訴求越來越多樣，會員中心也不僅僅承載著支付能力，更多地是獲取福利信息和情感上的尊享感知，同時在產品框架上的拓展性和效率也有待提升，因此有了本次會員中心改版項目。
對于設計師而言，我們發(fā)起這個項目所面臨的挑戰(zhàn)，不僅停留在用戶體驗的優(yōu)化還需要兼顧商業(yè)轉化。接下來將從確定目標、會員中心框架重構、視覺語言升級、沉淀通用組件等方面，跟大家分享下改版背后的設計思考。
在著手推進項目設計前，我們通過定性和定量的分析，并組織多角色對本次升級的目標進行確認，本次升級的目標是：提升用戶決策效率；提升用戶尊享感；沉淀設計組件庫。
1. 為什么要提升用戶決策效率？
會員中心是價值與信息的洼地，用戶需要在眾多特權、優(yōu)惠信息中做出決策。整個框架清晰、直觀、易懂，是提升用戶決策效率及滿意度的關鍵所在。
我們通過支付轉化漏斗分析并結合用戶反饋發(fā)現，改版前，會員中心信息架構比較扁平和單一，缺乏關鍵性信息的直觀展示，比如：優(yōu)惠信息、會員服務信息，導致部分用戶無法在付費過程中更好地做決策。
此外，在支付流程上，操作鏈條較長，容易引起用戶厭倦，導致用戶流失。基于這些考慮，我們將對現有框架進行升級，以提升用戶的決策效率。
2. 為什么要提升用戶尊享感？
會員中心也是用戶感知身份變化、感知會員尊享的第一步。改版前，不同身份用戶（未開通/會員/超級會員）看到的會員頁面卻是相同的，無法直觀感受到不同身份的差異。
通過UER的用戶訪談我們也發(fā)現，很多用戶出現以下場景：
購買會員后用戶，產生疑惑「是否購買成功了嗎？」；身為超級會員用戶，「感受不到任何尊享感受」；快過期的會員用戶，「對會員/超級會員快過期的也感知不到，導致特權中斷，影響使用體驗」…
因此，我們需要對整體身份的感知進行升級，讓用戶更清晰地感知到自己身份的層級。
3. 為什么要沉淀設計組件庫？
對于產品而言，會員中心也是會員類活動的主要運營渠道。
在日?！感〔娇炫堋沟枨笾校瑸榱颂嵘椖拷M的開發(fā)效率以及更好地實現產品側多場景模塊靈活調用的訴求，需要對復用率較高且靈活多變的模塊（尤其是支付模塊、特權模塊）進行組件化。因此我們也對多個模塊進行組件沉淀，提升產品迭代效率。不僅于此，組件化也能給用戶提供更加統(tǒng)一的認知，做到產品體驗上的統(tǒng)一和規(guī)范化。
明確了目標后，我們從以下維度進行設計升級，解決現存問題：懂你所想，會員中心框架重構；凸顯尊享感知，視覺語言升級；提升迭代效率，通用組件沉淀。
我們本次框架重構的關鍵詞就是「懂你所想」，只有更了解用戶，才能提供更符合用戶的選擇，從而提升用戶決策效率。因此，我們在交互框架層面上，做了以下幾件事：打造分層布局；強化關鍵信息；縮短支付步長；智能化推薦。
打造分層布局
進入會員中心的用戶，根據會員成長周期可被劃分為：歷史未付費用戶、會員開通中用戶、會員即將過期用戶、會員已過期用戶。
因此，在這次框架設計中，我們根據身份、動機、行為的差異進行分層布局。改變以往的「多人一面」的布局架構，打造出新的「多人多面」的靈活分層頁面布局。
當用戶是歷史未付費用戶時，我們更加突出用戶的特權介紹和商品支付，便于用戶了解會員服務和商品信息；當用戶是開通中的用戶，我們更加突出用戶可尊享的福利信息，突出尊享感；當用戶為即將過期用戶或已過期用戶時，我們展示用戶常用特權信息，喚醒用戶付費意愿，并為用戶提供便捷的續(xù)費能力。
下面是改版前后效果對比，從單一身份感知到多元分層處理。
強化關鍵信息
關鍵信息也是用戶更為「關心」的信息，通過調研發(fā)現，網盤用戶更加關注會員優(yōu)惠活動信息、服務到期提醒以及會員之間的差異性，因此在本次升級中，我們對用戶所關心的決策信息進行強化，恰如其分地展示便于用戶決策，同時提升用戶的付費意愿。
新增運營渠道
通過用戶訪談，了解到很多用戶總是錯過網盤的福利活動，不知道在哪里能接受到一手信息。
因此，本次升級我們在會員中心中新增了運營位，增加用戶關注的優(yōu)惠活動的曝光。
服務到期提醒
針對即將過期或已過期的用戶，我們會展示用戶常用特權功能的即將到期的信息，避免用戶特權功能到期后，給用戶日常使用帶來困擾，比如使用視頻原畫備份等功能，我們也會提前告知給用戶：「3天后即將到期，將不再享有視頻原畫備份和在線解壓等11項特權」，讓用戶提前做決策。
強化特權的差異對比
此外，我們還強化了特權對比的差異，分別展示了普通用戶、會員用戶、超級會員用戶擁有特權功能的差異性，便于用戶根據自身需求選擇對應更為合適的會員服務，避免買錯等一系列不便或者多花冤枉錢的行為。
縮短支付步長
為了更方便用戶進行支付，讓用戶付費行為更加順暢絲滑，我們摒棄以往全頁面跳轉形式，采用了浮層收銀臺的方式，減少用戶在頁面間的跳轉而帶來的迷失感，達到簡化支付路徑的目的。
也在用戶即將過期等狀態(tài)，保留了原有前置展示商品和支付操作的方式，讓用戶一鍵完成續(xù)費，方便又快捷。同時，也會在用戶選擇商品支付時，展示用戶帳號信息，避免用戶買錯的問題。
智能化推薦
與以往不同，我們不局限于通過理性的信息展示，讓用戶自己搜尋信息、被動匹配，同時我們也在不斷嘗試采用更加擬人化、對話感的方式觸達用戶，推送給用戶更為關注的信息，更加精細化地探索多樣的運營場景。
比如：針對已付費用戶，結合用戶的使用場景，更多展示特權信息，如：「周末看視頻，2倍速、2K、極速加載缺一不可」；
當我們上了會員新特權的時候，也會及時告知用戶，讓他們享受更加豐富的權益。
本次對會員中心的視覺呈現也做了全新升級，不僅凸顯會員的尊享感、情感化，同時兼顧用戶的識別效率及后續(xù)拓展性，針對這一目標，我們做了以下優(yōu)化：卡面升級，提升身份感；品牌色優(yōu)化，確保拓展性；icon重塑，強化識別性；驚喜彩蛋，提升情感化。
卡片升級，提升身份感
會員身份卡片是用戶直觀感受身份變化的第一步。本次卡片設計中，在卡片比例上，盡可能接近于實物卡片，并在卡面肌理表達上，采用磨砂質地，更貼合用戶自然認知，卡片顏色結合會員品牌色進行設計。同時結合網盤品牌基因中的logo的「云」，提升品牌差異化。
當用戶進入會員中心時，采用光影動效，同時描繪「云」型，提升視覺層次感，同時加深用戶認知。
品牌色優(yōu)化，確保拓展性
我們還重新定義了會員體系的品牌色，超級會員選用黑金配色來突顯最高級別身份。
主題色延續(xù)了網盤會員色系，超級會員為金色，會員為紅色，在此基礎上調整色彩明度。新配色在產品界面和運營活動上，能給用戶帶來更加直觀的身份感知。
輔助色為黑白，因為它是色彩世界中的 「 經典 」 ，給人以簡潔、純粹的審美感受和視覺享受。以黑白色作為會員體系的輔助色，可以襯托出黑金配色的尊享感。
icon重塑，強化識別性
在特權icon設計中，強化識別性是本次優(yōu)化的重點，因為圖標的目的是用來輔助用戶識別，幫助用戶做決策的。
我們在icon表現手法上，從「線性」改成「面性」，增強視覺比重；去除底部圓形襯底，采用異型圖標，強化icon之前的差異化，同時異型的icon在占比較小的區(qū)域里使用更加節(jié)省空間，提升拓展性。
比如，當用戶是未付費時，特權icon僅作為輔助圖形，因為在這種場景下，icon遠沒有文案更能幫助用戶清晰理解，避免用戶買錯。
因此異型、面性、無襯底的icon處理手法，也是在拓展方面較優(yōu)選擇。
以下是icon優(yōu)化后的整體效果。
驚喜彩蛋，提升情感化
尊享感，不僅體現在功能、視覺層面，還體現在情感化關懷，因此我們通過彩蛋式翻卡的觸發(fā)形式，采用對話的方式，展示互動文案。
當用戶首次進行翻卡時，它會貼心問候：「很高興你與你相遇，愿美好時光與你相伴。」；當用戶日常互動時，它風趣幽默：「據說超級會員，法力無邊！」「你喜歡的樣子超級會員都有~」；當有用戶關注的重要消息時，它會及時預告式通知：「4.11日即將有一大波優(yōu)惠福利襲來，超級會員最高5折哦」，從而營造一個風趣又貼心的小管家，也讓我們的網盤會員服務變得更加貼心。
會員中心包括個人信息展示、身份卡片、商品和支付、尊享特權、尊享福利、成長體系、專屬內容、積分兌換等模塊。
其中有多種模塊會在多場景中進行復用，為了節(jié)省開發(fā)及設計成本，同時保證體驗一致性，我們本次也沉淀出能夠靈活調整各個模塊的位置的組件，來提升產品及運營效率。
比如：支付模塊；特權展示模塊。
支付模塊
支付模塊承載了會員類商品信息的展示，會在多個場景出現，比如：浮層收銀臺、會員中心頁面、全端收銀臺，以及會員類運營活動。為了保證支付體驗的一致性，我們優(yōu)先對支付模塊進行統(tǒng)一和規(guī)范，包括其中的商品展示、優(yōu)惠展示、以及支付按鈕的規(guī)范化。
為了便于用戶感知到會員與超級會員之間的差異，避免錯誤購買帶來的困擾，我們通過品牌色（超級會員的金色，會員的紅色）進行區(qū)分。
支付模塊的統(tǒng)一和差異，既能保持支付體驗的一致性，也能避免用戶對會員權益產生誤解，為用戶帶來了更規(guī)范的支付體驗。
特權展示模塊
對于特權展示模塊進行特權展示的優(yōu)化，針對以往特權數量多占用空間大，以及特權展示信息過少用戶看不懂的問題，不再采用平鋪的方式，而是采用利用橫向空間的側滑方式展示，節(jié)省更多空間；不再采用原有的特權圖標+特權名稱的方式，而是同時展示輔助特權信息，便于用戶更加了解特權內容。
并將特權展示方式進行組件化，當有新特權上線時，可直接通過后臺配置進行上線，無需進行開發(fā)，提升效率。
同時，我們還完成了運營位、專享內容、專屬推薦等多個模塊的組件化，也根據會員商業(yè)化的設計規(guī)范，形成會員中心的組件庫，提升合作效率及用戶統(tǒng)一的認知體驗。
以上就是本次會員中心改版項目的全過程，從前期用戶調研、目標確定（1.提升用戶決策效率；2.提升用戶尊享感；3.提升迭代效率），到通過多維度地將目標落地（1.懂你所想，會員中心框架重構；2.凸顯尊享感知，視覺語言升級；3.提升迭代效率，通用組件沉淀），不僅優(yōu)化了體驗、提高了效率，也對付費轉化率有所提升。
本次會員中心改版，是網盤所有同學的共同努力，同時也是會員中心提供給用戶更多選擇、更率、更多服務的第一步，它不再是機械的信息展示和冰冷的支付平臺，而是更懂用戶、提供給用戶更多元服務的聚集地。
目前還有很多不足和待完善的地方，我們也在盡最大努力為用戶提供更好更有價值的服務，感謝大家一致以來的支持與陪伴 。
文章來源：優(yōu)設 作者：百度UE團隊
我最近一直在想自己要寫什么，不如這次就來說說我最近在項目中遇到的問題吧~
再給大家看看我的解決方案，如果大家有更好的方案歡迎留言，我們一起探討啊~
最近一兩年我所涉及的項目都是有關于將網頁的功能系統(tǒng)改成APP，而針對的用戶就是公司的業(yè)務經理，是金融公司的業(yè)務經理們，我們的甲方爸爸！
當然這就意味著網頁的產品，會有大量的數據，而且由于網頁產品的信息處理還沒有太與時俱進，所以大量的數據都是文字和數字的組合，因此要將這些數據改成APP時，就覺得好難啊。
其實表單在APP上并不好放，最好的解決方法就是設計成圖表，而現在市面上圖標樣式不管是網頁的還是APP一搜一大把，Ant Design有專門的數據網站，如下圖所示：
什么樣的都能找到，那么我為什么會覺得好難呢？因為數據超多der~考慮的內容又有很多，難免憂愁。
一、為什么要設計圖表？
因為數據表單在手機上并不好展示，同時從用戶體驗的角度上來考慮，數據本身都是數據組成，可讀性就不太好，因此如果把這些“數字”從商業(yè)目的、用戶動機進行有機組合、關聯或定義就使得數據變得有意義（價值），圖表只是最終的表現形式。
二、圖表由哪些元素構成？
一張標準樣式的圖表基本上是如下圖所標示的幾種元素組成，如下圖所示：
當然這只是最基礎的一種圖標形式，對于別的形式就不多介紹了，大家都有基礎知識，本文將嘗試從圖表設計動機的角度和大家一起探討如何更好的進行圖表設計。
三、圖表設計？
1、明確數據指標
首先，我們得先搞明白這些數據是怎么來的、干嘛的，盡可能要求他們給到你的是盡可能精準的數據，否則會導致接下來的工作前功盡棄。就舉我前幾天的例子來說吧，產品給了我這樣一張圖，如下圖所示：
我沒有仔細的去問一些具體的信息，比如數據最多的時候會是什么樣、業(yè)務想在這個表里看到什么信息、想要解決的問題什么？這些我都沒有問！
上來就是一頓設計操作，把表單設計成了這樣，如下圖所示：
結果在走查的時候，業(yè)務很明確的指出數據信息不夠多，他們想要在頁面上將所有的數據信息都能看到，而數據最多的情況，數據表單是長這樣的，如下圖所示：
就是因為一開始在拿到表單的時候沒有仔細去分析，才會導致這種情況的發(fā)生，因此要如何改進呢？
2、明確設計目的
其實圖表設計跟產品設計的思路有點類似，一開始要先明確的就是設計目標，但這個很容易被設計師所忽略，因此前期在缺少設計目標支撐的情況下，設計師就會像一個沒有指揮的小樂手，閉著眼睛亂彈，沒有方向感。
就像我之前設計方案被推翻，就是因為思考不明確導致的，定義設計目標的過程需要站在業(yè)務的角度和數據的角度進行綜合分析從而進行構建，一方面需要考慮業(yè)務如何更簡單的分析、理解數據從而提高決策效率；一方面又需要考慮數據本身如何更加精準、一目了然的傳達給用戶。
3、規(guī)劃設計方案
我在寫這篇文章的時候，看了很多相關的圖表文章，很多都是分析哪些不同類型的圖表，配色上要怎么處理，或者哪些圖標是用在什么地方的，對我都沒有太大幫助，因為圖表設計并不是普通的只是要好看的圖表而已。
4、解決問題
重新設計之前，我去找業(yè)務很詳細的了解了他們對于數據的需求，想要一目了然的看到所有的數據對比信息，數據在表單中要全部展示出來，數據后臺每天都會刷新，針對的場景是來自在去拜訪客戶路途中查看客戶目前的信息，我就將圖表改成了下圖所示：
由于面對的數據信息比較多，條紋圖比較符合多數據的信息，當然這是數據最多的時候出現的情況，每家公司出現的數據是根據業(yè)務所提交的信息展現的。
在功能確定了之后，就是我們的細節(jié)問題，不是說我們在750*1624的畫布上設計好了圖表就行了，我們還要考慮到適配的問題，如下圖所示：
屏幕較窄的時候，將X軸的標簽文字打斜，保證數據正常閱讀的同時也不影響美觀度。還有一種解決方案就是有連續(xù)的數字時，可以有簡寫。
四、如何選深色底和淺色底
我們可以先來一個對比圖，同樣的數據在深色背景和淺色背景下的圖表可讀性做對比，如下圖所示：
很顯然淺色背景下的圖表閱讀效率更高，那么面對復雜數據的時候，情況是否一致呢？如下圖所示：
很顯然，深色更適合展示信息比較多的，突出重點信息的頁面，因此我們在找數據頁面參考，在選擇深色和淺色背景里猶豫的，可以參考一下。
五、劃重點
這里討論的只是我在公司項目中的其中一個圖表設計，不能說做的很多，只是分享一下自己在試錯的過程中的成長，從web端改到APP，都會說減少一些功能，讓產品更好用，但是總有不想砍功能的需求方，如何滿足這些需求，是需要我們一直都在思考的事情。
轉自：ui中國-潘團子
分享火爆Dribbble和Ins的設計趨勢
相信最近很多小伙伴在逛Dribbble時候，發(fā)現最近流行一波新的設計風格，和以往不同的是，這次趨勢又回到之前擬物化了，但它與純擬物化還是有區(qū)別的，現在它有一個流行詞語叫“新擬態(tài)”，今天就和大家分享下國外一位設計師對這個趨勢的看法！
雖然UI以各種擬態(tài)化的形式存在（例如，您的桌面OS垃圾桶），現在這種風格的趨勢更加明顯。正如卡米爾·法拉納（Kamil Falana）指出的那樣，從無生命的“表達”到現實主義的過渡開始出現。
不久前，我們還觀察到，這種變化開始在我們身邊發(fā)生，蘋果（IOS13系統(tǒng)）就是一個很好的例子。向最小化設計和輕擬物化發(fā)展，最終帶來了無紋理3d視覺感官。受到了大家的喜歡，來看一張高清圖。
如下圖設計風格，在dribbble上獲得認可度比較高！
Dribbble用戶alexplyuto的作品獲得了四千多次贊，并帶動了這一趨勢。
備注：可看出目前扁平化設計過于雷同，用戶審美疲勞。偶爾出現新設計趨勢風格，反而更個給各位設計師們帶來新鮮感！
新風格的特征點
-
由于按鈕的視覺表現看著變化不大（因為小了一些，不直觀），因此我們將重點放在實際的卡片概念上，以使這種視覺表現更能直觀感受出來
-
這種風格的主要好處是“新鮮”（至少持續(xù)很長時間）。它為界面帶來了“新感覺”，并使其脫穎而出。它也可以與其他樣式混合使用，這樣就避免很呆板整個畫面變成這種柔軟凸起的效果。
到目前為止，有一些問題需要解決。我們發(fā)現了兩個主要問題：
1. 可見性
2. 易用性
- 可見性
圖形與背景對比度的主要問題是，當它們都是相同的顏色時，就沒有可測量的對比度；客觀上存在陰影，因此我們可以近似并嘗試測量其外部的第一個像素。在上面的示例中，我們得出了這些對比度值。
而且由于幾乎沒有人會嘗試使用如此強烈的陰影，這意味著其余UI元素必須可訪問。這種假設得出的結論是，如果我們通過版式，相近度和與重要元素的對比來進行正確的層次劃分，那么這些卡片/凸起的塑料卡片并不那么重要。
尚未對此進行測試（我將嘗試找到時間做這件事），但現在我們假設下面元素的兩個“版本”均為“確定”。即使有些人看不到陰影，也有足夠的對比度讓他們看到圖標并“使用它”。
- 易用性
僅僅是卡片嗎？
但是，如果我們決定將組件用作按鈕而不是卡片，則會出現可訪問性的主要問題。
我們可以像下面的示例一樣輕松創(chuàng)建帶有內部陰影的按下狀態(tài)。
對比度測試
此按下狀態(tài)的對比度太小，不足以表示差異。是否可以通過改變的其余部分來表達按鈕的狀態(tài)，這里有一些想法，例如使用輪廓和填充圖標，下劃線或甚至用顏色填充按下狀態(tài)。
開發(fā)實現其實它比我們認為的在CSS中實現“軟陰影”外觀要容易。我們尚未研究Swift和Kotlin，但我認為這不應該成為問題。
https://neumorphism.io/#55b9f3（實現新擬態(tài)效果CSS代碼）
您可以輕松地將可開發(fā)的設計與這些卡片形狀組合在一起（新擬態(tài)卡片），從而獲得很好的效果。
-
盡管這一新趨勢影響了許多設計師，但對比以前使用的卡片組件可訪問性問題相比，它的問題并不那么嚴重。
所以去瘋狂的順應這一趨勢，并對其進行調整以使其成為您的趨勢。UI設計師的工作就是需要不斷來回挑戰(zhàn)自我，探索潮流，以符合產品審美。如果沒有這種不斷的探索的精神，所有產品將再次看起來相同，同質化嚴重。
-
本篇文章，作者通過對新擬態(tài)設計趨勢分析，在文中提及“新擬態(tài)”和以前材料卡片的區(qū)別，同時證實了新擬態(tài)風格優(yōu)勢！但也存在一定的弊端！如何去權衡與設計的把控，需要設計師們多去研究探索！
如今新擬態(tài)才初出茅廬，還未被廣泛使用，需要有先驅者引領。畢竟國內的環(huán)境大家都不敢冒險去嘗試運用到線上！
css 偽類是用于向某些選擇器添加特殊的效果，是動態(tài)的，指當前元素所處的狀態(tài)或者特性。只有一個元素達到一個特定狀態(tài)時，它可能得到一個偽類的樣式；當狀態(tài)改變時，它又會失去這個樣式。
這篇文章在一定程度上鼓勵你在構建UI時使用更簡單的CSS和更少的 JS。熟悉 CSS 所提供的一切是實現這一目標的一種方法，另一種方法是實現最佳實踐并盡可能多地重用代碼。
接下介紹一些大家可能還不熟悉的一些偽類及其用例，希望對大家日后有所幫助。
::first-line | 選擇文本的第一行
::first-line 偽元素在某塊級元素的第一行應用樣式。第一行的長度取決于很多因素，包括元素寬度，文檔寬度和文本的文字大小。
::first-line 偽元素只能在塊容器中,所以,::first-line偽元素只能在一個display值為block, inline-block, table-cell 或者 table-caption中有用。在其他的類型中，::first-line 是不起作用的。
用法如下：
p:first-line {
color: lightcoral;
}
::first-letter | 選擇這一行的第一字
CSS 偽元素 ::first-letter會選中某塊級元素第一行的第一個字母。用法如下：
<style>
p::first-letter{
color: red;
font-size: 2em;
}
</style>
<p>前端小智，不斷努，終身學習者！</p>
clipboard.png
::selection| 被用戶高亮的部分
::selection 偽元素應用于文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。
div::selection {
color: #409EFF;
}
clipboard.png
:root | 根元素
:root 偽類匹配文檔樹的根元素。對于 HTML 來說，:root 表示 <html> 元素，除了優(yōu)先級更高之外，與 html 選擇器相同。
在聲明全局 CSS 變量時 :root 會很有用：
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
:empty | 僅當子項為空時才有作用
:empty 偽類代表沒有子元素的元素。子元素只可以是元素節(jié)點或文本（包括空格）,注釋或處理指令都不會產生影響。
div:empty {
border: 2px solid orange;
margin-bottom: 10px;
}
<div></div>
<div></div>
<div>
</div>
clipboard.png
只有第一個和第二個div有作用，因為它們確實是空的，第三個 div 沒有作用，因為它有一個換行。
:only-child | 只有一個子元素才有作用
:only-child 匹配沒有任何兄弟元素的元素.等效的選擇器還可以寫成 :first-child:last-child或者:nth-child(1):nth-last-child(1),當然,前者的權重會低一點。
p:only-child{
background: #409EFF;
}
<div>
<p>第一個沒有任何兄弟元素的元素</p>
</div>
<div>
<p>第二個</p>
<p>第二個</p>
</div>
clipboard.png
:first-of-type | 選擇指定類型的第一個子元素
:first-of-type表示一組兄弟元素中其類型的第一個元素。
.innerDiv p:first-of-type {
color: orangered;
}
上面表示將 .innerDiv 內的第一個元素為 p 的顏色設置為橘色。
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
clipboard.png
:last-of-type | 選擇指定類型的最后一個子元素
:last-of-type CSS 偽類 表示了在（它父元素的）子元素列表中，最后一個給定類型的元素。當代碼類似Parent tagName:last-of-type的作用區(qū)域包含父元素的所有子元素中的最后一個選定元素，也包括子元素的最后一個子元素并以此類推。
.innerDiv p:last-of-type {
color: orangered;
}
上面表示將 .innerDiv 內的的最后一個元素為 p 的顏色設置為橘色。
clipboard.png
nth-of-type() | 選擇指定類型的子元素
:nth-of-type() 這個 CSS 偽類是針對具有一組兄弟節(jié)點的標簽, 用 n 來篩選出在一組兄弟節(jié)點的位置。
.innerDiv p:nth-of-type(1) {
color: orangered;
}
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
clipboard.png
:nth-last-of-type() | 在列表末尾選擇類型的子元素
:nth-last-of-type(an+b) 這個 CSS 偽類 匹配那些在它之后有 an+b-1 個相同類型兄弟節(jié)點的元素，其中 n 為正值或零值。它基本上和 :nth-of-type 一樣，只是它從結尾處反序計數，而不是從開頭處。
.innerDiv p:nth-last-of-type(1) {
color: orangered;
}
這會選擇innerDiv元素中包含的類型為p元素的列表中的最后一個子元素。
<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>
clipboard.png
:link | 選擇一個未訪問的超鏈接
:link偽類選擇器是用來選中元素當中的鏈接。它將會選中所有尚未訪問的鏈接，包括那些已經給定了其他偽類選擇器的鏈接（例如:hover選擇器，:active選擇器，:visited選擇器）。
為了可以正確地渲染鏈接元素的樣式，:link偽類選擇器應當放在其他偽類選擇器的前面，并且遵循LVHA的先后順序，即：:link — :visited — :hover — :active。:focus偽類選擇器常伴隨在:hover偽類選擇器左右，需要根據你想要實現的效果確定它們的順序。
a:link {
color: orangered;
}
<a href="/login">Login<a>
clipboard.png
:checked | 選擇一個選中的復選框
:checked CSS 偽類選擇器表示任何處于選中狀態(tài)的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")。
input:checked {
box-shadow: 0 0 0 3px hotpink;
}
<input type="checkbox" />
clipboard.png
大家都說簡歷沒項目寫，我就幫大家找了一個項目，還附贈【搭建教程】。
:valid | 選擇一個有效的元素
:valid CSS 偽類表示內容驗證正確的<input> 或其他 <form> 元素。這能簡單地將校驗字段展示為一種能讓用戶辨別出其輸入數據的正確性的樣式。
input:valid {
box-shadow: 0 0 0 3px hotpink;
}
clipboard.png
:invalid | 選擇一個無效的元素
:invalid CSS 偽類 表示任意內容未通過驗證的 <input> 或其他 <form> 元素。
input[type="text"]:invalid {
border-color: red;
}
:lang() | 通過指定的lang值選擇一個元素
:lang() CSS 偽類基于元素語言來匹配頁面元素。
/* 選取任意的英文（en)段落 */
p:lang(en) {
quotes: '\201C' '\201D' '\2018' '\2019';
}
:not() | 用來匹配不符合一組選擇器的元素
CSS 偽類 :not() 用來匹配不符合一組選擇器的元素。由于它的作用是防止特定的元素被選中，它也被稱為反選偽類（negation pseudo-class）。
來看一個例子：
.innerDiv :not(p) {
color: lightcoral;
}
<div class="innerDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<p>Paragraph 3</p>
<div>Div 2</div>
</div>
clipboard.png
Div 1 和 Div 2會被選中，p 不會被選 中。
原文：https://blog.bitsrc.io/css-ps...
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行l(wèi)og 調試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。
今年已經是 2020 了，各位作為時代的弄潮兒，上網沖浪是生活中的不可或缺，豐富的沖浪生活中必不可少的當然是買買買，面對琳瑯滿目的商品圖與文案，用戶怎樣才能快速抓到重點？或者說，怎么樣才能讓信息出現在合適的位置？
首先我們要了解瀏覽信息這個動作的本質和特征，瀏覽的本質就是大腦通過眼睛去提取信息，是一個傳達→解碼的過程，在這個過程中又存在一些特性，我們可以利用這些特性去進行一些更的信息傳達。
受閱讀習慣影響，人們閱讀的起始端都是在左側，結合依據尼爾森等老前輩發(fā)布的眼球軌跡研究報告可知，視覺瀏覽習慣呈「F」型且是不受控的潛意識習慣；同時可以延伸出例如「E」、「Z」等瀏覽模型，我們可以根據這些視覺模型的特性，結合產品的戰(zhàn)略層目標，將信息放置在合適的位置，已達到信息傳達率的最大化。
了解了基本的視覺瀏覽模型，那我們的地基就已經搭建好了，接下來我們來看看地基搞定之后的結構要怎么去布局。
首先我們需要清晰產品的屬性，電商平臺的本質是物品的交易，因為線上的特殊性，產品中圖片與文案對于平臺的 GMV 就存在最直接的關系。這個時候，單元布局的輪廓就出來了，就是「商品圖+關鍵詞文案」。
同時，不同平臺戰(zhàn)略方向、發(fā)展階段、團隊規(guī)模等因素的不同，所針對的用戶群體、消費階層、心智、審美等各個因素都會大不相同，有時候甚至在同一平臺中針對不同的活動、不同的品類進行細致的場景劃分，產生不同的單元結構以滿足商業(yè)目的上的需要。
720° 全方位了解平臺的屬性特征后，我們就可以開始利用這么信息來搭建基本的單元結構了。
例如平臺主攻下沉市場，用戶群體多為三四線，這個時候用戶吸引點在于商品的價格與賣點關鍵詞，這時候我們就可以拉大關鍵詞文案的占比，縮小圖片的占比，讓他們關注的內容盡可能多的進入他們的眼睛，吸引購買意向模糊的用戶點擊，增加購買意向明確的用戶匹配商品的速度，已達到 GMV 的提升。
簡單來說，過程中需要考慮到平臺因素所產出的圖片尺寸/比例/精致度/是否統(tǒng)一等，與文案搭配所呈現的是否適用當前消費場景及用戶心智，是否可以提升用戶的轉化率，是否可以提升平臺的下單率。
單元的架構是多樣且復雜的，就像一塊七巧板。重點就在于對于產品屬性和用戶行為、場景、心理等特征的分析，需要權衡各個關鍵點的重要性，把用戶需要看到的信息、我們想讓用戶看到的信息、用戶希望看到的信息以合適的結構狀態(tài)呈現給他。
我們將大體架構搭建好之后，剩下的就是要把細節(jié)元素給點亮，讓他們起到一個點睛的效果。
細分一下，其中涉及到的細節(jié)元素大致為活動標簽、折扣標簽、跳轉按鈕等常規(guī)的分子部件，在結構中，圖片、商品名稱、價格是用戶關注的重點，其他的部件則起到輔助刺激的作用。圖片和商品名稱的大體結構我們在上一步已搭建了，剩下來我們看看這些小部件該如何合理歸置。
先從標簽說起。整體框架出來了，用戶所需要了解的商品信息就已經基本呈現了，這個時候用戶心智上更多的主觀意向，尋找合適的商品，而標簽的出現，更像是一劑興奮劑，強烈告訴用戶：「這個品熱度第一！」、「這個品是款！」等我們刺激用戶的聲音，增強用戶查看的欲望。
這個時候疑問來了，那放哪里合適呢？
活動標簽，多為顯示該商品的熱度、促銷主題、排名等一些大的狀態(tài)性的信息，為的是在用戶心理層面給這個商品帶來更多的好感度，放置的位置可以結合具體場景去分析，可以考慮與商品圖進行結合放置。
遵循由上而下滑動的交互原理，我們可知在每個單元的頂部會是滑動瀏覽時第一被眼睛識別的信息，而且可以利用這個心理去給還沒看到具體商品的用戶進行一個心理鋪墊，比如商品的品質、權威性等，先入為主的進行心理建設，再結合視覺瀏覽模型，合適的位置就出來了。
次要信息比如倒計時、商品折扣、商品特點等輔助信息，結合布局場景考慮，有的可與圖片一起放置增強品質感，有的可與文案一起放置增加決策信息，有的可與價格一起放置，刺激用戶進行決策，是很有靈性的一個點睛之筆。
最后是按鈕，在這里的按鈕可以理解為瀏覽過程的一個閉環(huán)節(jié)點，也是一個操作的終結點，是最后的臨門一腳。位置當然是在右側最為合適，降低操作難度，同時也是整個單元的一個視覺終結點，瀏覽完流程之后決定是否點擊跳轉。當然，你可以利用你的方式去引導或刺激用戶點擊，你可以的。
文章來源：優(yōu)設 作者：阿類雜碎面
藍藍設計的小編 http://www.yvirxh.cn