在日常的設(shè)計工作中，我們也許會遇到這樣的情況：作品缺少變化導(dǎo)致枯燥乏味；而變化太多又會顯得雜亂、沒有章法；這就對應(yīng)了設(shè)計中統(tǒng)一和打破的關(guān)系，那么為什么統(tǒng)一和打破這兩種看似矛盾的關(guān)系，卻總是能同時出現(xiàn)在我們的設(shè)計作品中？如何更好的理解二者之間的關(guān)系并運用到日常的工作中去？希望本期內(nèi)容能對大家有所幫助。

在設(shè)計中統(tǒng)一并不是所有元素1:1的一模一樣，它可以體現(xiàn)在：板式、配色、元素屬性、處理手法等等，那么為什么要統(tǒng)一？統(tǒng)一的目的是什么？下面我們具體來說：

統(tǒng)一：讓作品更整體

作品不夠整體，會給人一種信息散亂、沒有視覺焦點的感受；而將視覺元素進(jìn)行“統(tǒng)一”，就能很好的解決這一現(xiàn)象，這無關(guān)乎技法的熟練與否，在我們的日常生活中就隨處可見：比如：我們的書本排版，會有統(tǒng)一的頁眉、頁腳、段落留白、文字間距等等，其目的就有讓文本內(nèi)容在視覺感受上更像一個整體；下面我們看個設(shè)計中的案例：

如圖所示，上側(cè)案例給人的感覺比較雜亂，不夠整體，原因在于：元素與元素之間的關(guān)聯(lián)性不強，且視覺形態(tài)及色彩屬性各不相同，導(dǎo)致整體各元素之間的呼應(yīng)不夠明顯，所以會給人一種不夠整體甚至雜亂的感覺。而下側(cè)案例通過在形態(tài)、色彩、屬性等方面的統(tǒng)一化處理，加強了每個單獨視覺元素之間的呼應(yīng)，使得畫面更整體！

統(tǒng)一：讓作品更整潔

不管是在設(shè)計工作還是日常生活中，干凈整潔的東西都是更易于大眾接受的，在設(shè)計工作中，做好統(tǒng)一是最重要的一環(huán)，在此前提下，才能做好另一環(huán)“打破”！所以當(dāng)設(shè)計作品出現(xiàn)亂的現(xiàn)象時，我們需要對其視覺元素進(jìn)行規(guī)整及相應(yīng)的處理，比如：

通過左右對比我們發(fā)現(xiàn)，很明顯右側(cè)給人的感覺雜亂無章，而左側(cè)干凈整潔、有條理，原因在于：

①、元素與元素之間并不是相互孤立的，而是在視覺上存在著一定的呼應(yīng)關(guān)系，相互關(guān)聯(lián)，這樣畫面整體性也會更強。

②、視覺上將原本各不相同的形態(tài)以及色彩重新進(jìn)行了統(tǒng)一處理，目的是通過減少視覺元素形態(tài)及色彩變化而進(jìn)一步提升畫面的整潔。

③、視覺元素在物理關(guān)系以及屬性上也做到了統(tǒng)一，即統(tǒng)一元素與元素之間的間隔、形態(tài)、顏色等等。

下面我們再看組案例：

上圖中，相比而言案例二比案例一給人的感覺更整潔、干凈、也更像一個整體，原因在于：案例二中配圖的屬性做到了視覺上的統(tǒng)一，具體體現(xiàn)在：①、圖片的顏色屬性：統(tǒng)一藍(lán)色色相屬性；②、圖片的內(nèi)容屬性：統(tǒng)一高端、仰視角度建筑屬性；③、圖片的留白屬性：每一幅配圖在視覺上都會有一些留白性質(zhì)的屬性，給人的感覺很舒服。

所以：出于讓整體更整潔的統(tǒng)一，大多是在做減法或者合并的過程，目的是減少一些造成視覺整體雜亂的因素，比如：色彩雜亂、圖形雜亂、文字形式雜亂、視角角度雜亂、以及過多無關(guān)聯(lián)的視覺元素等等，統(tǒng)一的過程也是整合視覺元素的過程。

注意：設(shè)計中的統(tǒng)一并不是絕對的，而是相對的，如果所有的視覺元素、屬性都嚴(yán)格按照統(tǒng)一化去處理，那么就會滋生另一個問題：整體視覺太過平滑、缺少變化甚至?xí)o人一種單調(diào)、枯燥的感受。那么在強調(diào)統(tǒng)一的同時，“打破”就是為了解決這難題的。

在日常設(shè)計工作中，打破是建立在統(tǒng)一基礎(chǔ)之上的操作，那么既然已經(jīng)做好了統(tǒng)一，為什么還要打破呢？打破能為作品帶來什么？下面我們具體分析：

打破：提升作品視覺層次感

當(dāng)作品過于統(tǒng)一時，很容易會給人一種單調(diào)、乏味、缺少層次變化的視覺感受，而在統(tǒng)一的基礎(chǔ)上做一定的打破操作，就能起到很好的解決這一現(xiàn)象的作用，那么什么是打破？舉幾個簡單的例子：

如上圖所示，圖①就屬于過于統(tǒng)一的表現(xiàn)形式，很明顯整體平淡、乏味，缺少視覺變化；而其他都是在統(tǒng)一的基礎(chǔ)上做了一些“打破”的處理，只不過各自切入點不同，下面我們逐一分析：

圖②：切入點是打破了一成不變的排列形式。

圖③：切入點是打破了一成不變的配色形式。

圖④：切入點是打破了完全統(tǒng)一的配色形式以及形態(tài)。

圖⑤：切入點是打破了統(tǒng)一的元素屬性值。

圖⑥：切入點是打破了統(tǒng)一的元素屬性。

以上這些雖然切入點都各不相同，但是目的都是通過打破過于統(tǒng)一的視覺現(xiàn)象，增加整體視覺變化程度，從而提升整體視覺層次感，也打破了呆板、乏味，增添了一些視覺上的跳躍性。

下面我們再看個設(shè)計中的例子：

如圖所示，上側(cè)案例屬于很好的貫徹整體統(tǒng)一的理念，而下側(cè)案例則是打破了固有的統(tǒng)一、卻也保留了大部分統(tǒng)一的屬性，通過兩者對比我們發(fā)現(xiàn)，其實單只看這一組案例：兩種表現(xiàn)形式都是可取的，只不過相比而言下側(cè)案例給人的視覺感受變化更多、層次感更強，所以相比而言給人留下的視覺印象更深刻。

上面說兩種表現(xiàn)形式都可取的前提是：單單只看這組案例，但是很顯然這組案例只是頁面的局部，如果整體頁面都如上側(cè)案例那樣嚴(yán)格的按照統(tǒng)一進(jìn)行，那么頁面整體就會過于平淡、缺少視覺層次感、甚至主次不分明。

打破：劃分視覺主次

在現(xiàn)實生活中，具有差異化的人或?qū)嵨飼苋菀滓鹬車说淖⒁?，甚至印象深刻、難以忘懷。在設(shè)計中亦是如此！其具體表現(xiàn)形式參考上圖①-⑥，因為打破過于統(tǒng)一就是在營造具有差異化的視覺元素，從而會很容易在視覺上形成先后、主次之分，所以就起到了一定的劃分視覺主次的作用。

注意：打破也不可盲目的進(jìn)行，過于統(tǒng)一會單調(diào)、乏味、重復(fù)感強；而過于追求差異化也會出現(xiàn)雜亂、沒有章法的視覺現(xiàn)象。所以一定要結(jié)合實際情況靈活運用。一幅作品中大多情況下：打破的次數(shù)要少于統(tǒng)一，即作品整體絕大不多保留整體統(tǒng)一的屬性，通過局部打破處理提升整體出彩度，這樣容易給人一種干凈、整潔且不失視覺變化、層次感的感受！

不妨找一些優(yōu)秀的網(wǎng)頁分析一下，是否很多優(yōu)秀的設(shè)計作品都符合這一規(guī)律？

綜上所述，統(tǒng)一是為了讓作品有視覺條理性、更整體，而打破則是增加視覺層次變化，讓作品更出彩！統(tǒng)一和打破看似是兩個矛盾的名詞，實則在設(shè)計中是相輔相成的作用！不管是統(tǒng)一還是打破，兩者的切入點都是相似的，一般體現(xiàn)在：形態(tài)、屬性、色彩、大小、位置關(guān)系、留白等等。但是無論如何統(tǒng)一都是打破的前提，如果作品整體性都不夠，再一味的追求打破關(guān)系，只會讓作品越做越亂。所以一定要先做好統(tǒng)一，其次才是進(jìn)行打破、改變。當(dāng)然文中提到的只是一部分，希望大家能活學(xué)活用、舉一反三！

文章來源：站酷

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

電視 UI 算得上是一個偏冷門的界面設(shè)計，因為它的交互比較特殊，同時有一些限制，比如交互限制，焦點原則等等。以下就自己的項目經(jīng)驗為電視 UI 設(shè)計原則做一個總結(jié)。

智能電視的特性

對于現(xiàn)在家庭智能電視而言，技術(shù)在不斷的進(jìn)步，但是其飽和度和對比度有的還是很強，還會遇到大紅碰到大紫的色塊對比。但是信息變得簡約了，都是以 tab 導(dǎo)航為主，下面是幾個卡片信息瀑布流顯示。語音提示很重要，會隨著焦點的移動發(fā)出提示聲響，提示用戶電視焦點的移動狀態(tài)。

小米電視商城全新改版，在接到需求后，一定要模擬用戶來體驗一下購物流程還有用電視購物的環(huán)境，環(huán)境應(yīng)該是固定的，那就是在家里。電視和手機(jī)購物體驗是不一樣的，電視是要用遙控器來控制，所以每一步的操作流程都很珍貴，如果界面跳轉(zhuǎn)太多，會給用戶一種煩躁的感覺，所以盡量同一層級的信息要在同一界面填寫完畢，避免二次跳轉(zhuǎn)。

第二點說的就是焦點問題，焦點不能層次不齊，跳動太大會引起視覺不適。以小米電視商城詳情為例，焦點盡量在同一水平線上，同行的焦點移動，視覺感受上會舒服很多。

設(shè)計尺寸

智能電視的分辨率和大家平常在 app 看電影的時候差不多，如上圖所示，目前 1080p 最常見，2k 和 4k 基本都是資源類節(jié)目。設(shè)計尺寸以小米電視為例，通常做 1920*1080 的視覺稿就可以了，開發(fā)會適配比 1920*1080 小的電視屏幕，這樣下來，如果小分辨率的電視沒問題了，大的分辨率也就沒問題了。

我們知道在設(shè)計 app 的時候，都有左右間距的控制，移動端一般常見的控制在 28px 或者 32px，電視端因為是大屏設(shè)計，所以預(yù)留的空間也要大一些，基本左右留出 120px，上面留出 90px 就可以了。一般我設(shè)計的時候左右是固定的 120px，上面可以隨設(shè)計內(nèi)容來自定義，90px 或者 100px，都是可以的，只要視覺舒服即可。

焦點在電視端 UI 設(shè)計里顯得尤為重要，因為它就是你的視覺焦點，焦點會隨著遙控器上下左右確認(rèn)而改變。焦點的設(shè)計不能是扁平的，因為那樣不能夠提醒用戶焦點狀態(tài)的位置，焦點的設(shè)計應(yīng)該是放大的、夸張的、可以帶邊框，也可以使用投影外發(fā)光的方式來設(shè)計，確保能夠給用戶足夠的清晰位置。

焦點放大我這里建議放大 1.1 倍或者 1.2 倍就可以了，再大就顯得過于大了。

交互設(shè)計

如上圖所示，我在設(shè)計焦點的時候，就用了放大+外邊框的形式，這樣焦點移動起來可以讓用戶足夠看到位置所在。電視端的交互也是很簡單的，基本屬于十字交互，即自上而下，從左到右的交互方式。紅色剪頭屬于禁區(qū)，所有的電視交互，沒有斜 45 度的交互，這樣是錯誤的。

大家可以看到，在 app 里，常見的彈窗和浮窗可以壓蓋在可點擊功能上，比如美團(tuán)的紅包，愛奇藝的一鍵關(guān)注，即使是這樣，也不會影響功能的正常使用。但是電視端的設(shè)計，如果兩個可點擊功能壓蓋在一起，焦點是無法獲取的，因為它沒法判斷你想要選的那個功能，所以在電視上，一定要將兩個功能分開來布局最為合適。

露出屏外的內(nèi)容，和移動端設(shè)計是一樣的。如果有多個卡片內(nèi)容，我們需要將露出屏外的那張卡片做一些邊界化處理，控制好間距，也就是說我們要將一個完整的卡片漏出來一些，讓用戶知道，后面還有內(nèi)容；反之，用戶可能不知道后面還有內(nèi)容，就不會按遙控器右鍵查看了。

電視端 UI 設(shè)計忌諱控件隱藏，比如上圖，如果有很多文字的時候，左邊的設(shè)計是錯誤的，因為隱藏了 button 按鈕。改為右邊的設(shè)計是比較好的，我們可以選擇焦點選中文字給一個彈窗狀態(tài)或者其它，將 button 功能位露出來，如果一個界面可選功能位較少，我們設(shè)計的時候盡量在第一屏展示。如果實在不行，可以選擇吸底吸邊來設(shè)計。

視覺設(shè)計

顏色的選擇運用是重中之重，因為這個會直接影響到用戶的視覺體驗。因為用戶環(huán)境大多數(shù)是晚上的時候回去看電視，分開燈和關(guān)燈的情況，開燈的情況其實還好。如果關(guān)燈，顏色太刺眼的話，飽和度較高的顏色會直接影響到眼睛，這個危害是很大的，而且不一樣顏色的色塊，會增加用戶的視覺負(fù)擔(dān)，這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。

電視 UI 設(shè)計中，白色謹(jǐn)慎使用。因為白色過多實在是太刺眼了，我們可以選中較為灰一些的接近白色的顏色來代替。

背景的運用這里也建議使用深色的背景，原因和上述講的一樣，還有一個就是深色背景可以更好地襯托出界面的主要內(nèi)容。反之如果用淺色的背景，有的卡片如果需求方要求設(shè)計成淺色，那么這樣淺色的背景+淺色的卡片疊在一起，主要內(nèi)容就特別難區(qū)分了。

我們在設(shè)計電視端 UI 的時候，要真實的先去體驗一下特殊的場景，電視端每個 tab 是一個頻道，每個頻道的設(shè)計風(fēng)格也是不同的，比如少兒頻道，購物頻道和電影電視劇頻道，設(shè)計風(fēng)格肯定不同，體驗?zāi)M流程可以讓我們更快地了解電視特性。

字體的選擇默認(rèn)思源黑體，因為這個字體是開源字體，可以免費使用，沒有版權(quán)之分，以上列入的字體是小米電視商城改版的字號，具體的字體和間距可以根據(jù)自己的設(shè)計需求變化。

關(guān)于字體的選擇，當(dāng)然你也可以選用其它字體，或者一些特殊字體，好看的字體，但是這樣的話，字體包應(yīng)該會很大，會影響一些加載速度。

字體顏色的選擇盡量用白色或者亮色，深色背景上選用白色是最好的，這樣更易于閱讀。

字體的粗細(xì)大小，這里標(biāo)題建議加粗選擇，其余選擇常規(guī)字體就好，避免太粗或者太細(xì)的字體。

更好的智能家居體驗

電視的設(shè)計只是其中的一部分，未來我們的電視可能比現(xiàn)在的體驗更加好，比如會出現(xiàn)實景商城，單一的圖片形式已經(jīng)不能滿足我們對購物的需求，一些視頻類，動效類的體驗會更加合適。想讓電視擁有好的體驗并不是一件簡單的事情，想必大家已經(jīng)從諸多「電視盒子」上體驗到了這一點。我們曾經(jīng)熟悉的電視已經(jīng)發(fā)生改變，而我們適應(yīng)的手機(jī)、平板和電腦和新的電視還有著巨大的差別，我們需要忘掉之前熟悉的模式，未來五年、十年、甚至更久。電視、電燈、冰箱洗衣機(jī)等智能家具的體驗，正是我們設(shè)計師需要在未來幾年所做的事情，這很重要。

小米電視商城全新改版是我接觸的第一個電視端 UI 設(shè)計項目，第一期的優(yōu)化還有很多不足，根據(jù)項目經(jīng)驗總結(jié)了上面的規(guī)范。以上的基本設(shè)計規(guī)范掌握后，那么做電視 UI 基本問題不大，大的錯誤肯定不會有了，但是每個公司的設(shè)計規(guī)范肯定也有所差別。電視端的設(shè)計是個偏冷門的 UI 設(shè)計，多掌握一些另類項目經(jīng)驗也是設(shè)計師必備的技能。

文章來源：優(yōu)設(shè)網(wǎng)

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

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

小小開關(guān)中的大學(xué)問

一.生活中的反面案例

故事要從我搬到新出租屋開始講起。半年前搬到新的出租屋后，房間里配置的洗衣機(jī)也比之前的大了一倍，而且操作區(qū)上分布著的密密麻麻的文字和按鈕讓洗衣機(jī)看起來更高級了，然而這種對它的好感并沒有持續(xù)多久。在我第一次使用它時，我將衣物放進(jìn)洗衣機(jī)后，選擇好時間和洗滌方式，按下了啟動按鈕（如下圖右側(cè)白色按鈕）。

按下后洗衣機(jī)發(fā)出了“滴”的一聲，在我的認(rèn)知里它應(yīng)該是開始工作了，但是10秒過后沒有任何抽水聲和洗衣服的聲音。我疑惑地想：“是不是剛才并沒有成功啟動？”，于是再次按下了啟動按鈕，又是“滴”的一聲，但是這次我等了 1 分鐘沒有任何反應(yīng)。之后的十分鐘里，我與這臺匪夷所思的機(jī)器“交涉”多次才理解了它的運行方式。這臺洗衣機(jī)啟動后需要等待大概十幾秒才開始運行，但是在我按下啟動按鈕后我得不到任何反饋或者提示來告訴我洗衣機(jī)已經(jīng)開始工作了，所以疑惑的我又按下了一次啟動按鈕，然而令人崩潰的是這臺洗衣機(jī)的啟動和暫停按鈕是一體的，我第二次按下實際是進(jìn)行了暫停操作，從而導(dǎo)致我第二次的困惑。

如果你是這臺洗衣機(jī)的設(shè)計師，你會怎么解決上述的問題呢？

可能你的心中已經(jīng)有了答案，在回答之前我們先試著探究問題的本質(zhì)。

人們不管是使用日常物品還是與機(jī)器進(jìn)行交互，都會面對兩個階段的問題。一個是「執(zhí)行」，一個是「評估」。執(zhí)行時用戶需要理解如何操作，操作后可能會有什么結(jié)果。評估時用戶需要知道具體發(fā)生了什么。作為設(shè)計師我們要通過合理的手段幫助用戶解決這些問題，保證交互的可用性和流暢性。

通常我們會使用「意符」在用戶執(zhí)行前告知用戶如何理解、如何操作、操作后會有什么結(jié)果。在評估前通過「反饋」告知用戶結(jié)果是什么。

對于意符的定義，在《設(shè)計心理學(xué) 1-日常的設(shè)計》一書中，作者唐納德·諾曼做出了這樣的解釋：

人們需要某種方式了解他們將要使用的產(chǎn)品或服務(wù)，某些標(biāo)識表明的用途，會發(fā)生什么，有什么樣的替代方案。人們尋找蛛絲馬跡，尋找任何可以幫助他們應(yīng)對和理解的符號。任何可能標(biāo)識出有意義的信息的符號非常重要。設(shè)計師需要提供這些線索。人們所需要的和設(shè)計師必須提供的，就是意符。除此之外，優(yōu)良的設(shè)計要求對產(chǎn)品的目的、結(jié)構(gòu)和設(shè)備的操作與使用者進(jìn)行良好的交代。那就是意符的作用。

簡而言之，意符就是在用戶使用前，機(jī)器為了讓用戶更好地理解和使用它而做出的提示。而反饋就更好理解了，機(jī)器在我們操作后做出的反應(yīng)就是反饋，沒有反應(yīng)同樣也是一種反饋。

下圖展示了機(jī)器與用戶如何進(jìn)行交互。一個合理的設(shè)計可以讓用戶快速順暢地進(jìn)行 1234 四個步驟進(jìn)而完成任務(wù)，而糟糕的設(shè)計會讓用戶不斷重復(fù)這個流程。之所以會出現(xiàn)糟糕的設(shè)計，就是因為在步驟 1 和 3 沒有進(jìn)行合理的意符提示和反饋提示讓用戶摸不著頭腦，進(jìn)而導(dǎo)致用戶根據(jù)自己的猜測和過往經(jīng)驗來進(jìn)行操作，最后得到非預(yù)期的結(jié)果。

回到文章開始時的洗衣機(jī)開關(guān)問題，因為開始和暫停按鈕是一體的，在沒有任何意符和反饋的情況下我按下這個按鈕時我并不知道我啟動的是開始操作還是暫停操作。

我們可以就這個問題列出以下解決方案：

    1.增加文字提示，如啟動時在顯示屏上顯示“已啟動”，暫停時顯示“已暫?！?；

    2.增加語音提示，啟動開關(guān)后使用語音告知用戶“已啟動”或“已暫?！?。

當(dāng)然解決方案有很多，每個人都可以根據(jù)場景想出不同的解決方案。

與現(xiàn)實機(jī)器的開關(guān)類似，在 UI 設(shè)計中我們?nèi)绻M(jìn)行開關(guān)設(shè)計也需要遵循相應(yīng)的設(shè)計原則。

一個合理的開關(guān)設(shè)計主體包含的意符分別有兩種：

    1.表示當(dāng)前狀態(tài)；

    2.表示操作后的狀態(tài)。

主體之外我們還可以添加輔助提示更加清晰地傳達(dá)意符和反饋。

接下來將介紹一些常見的開關(guān)類型和輔助提示類型，最后總結(jié)出體驗優(yōu)質(zhì)的開關(guān)設(shè)計方法。

二.開關(guān)類型

1.icon

在 UI 設(shè)計中最常見的開關(guān)可能就是 icon 了，即由單一的 icon 通過顏色或圖形的變化來表示開或關(guān)的狀態(tài)。因為交互設(shè)計從古到今并沒有統(tǒng)一的嚴(yán)格標(biāo)準(zhǔn)，所以到底是將開關(guān) icon 的樣式設(shè)計為「當(dāng)前狀態(tài)樣式」還是設(shè)計為「按下之后的狀態(tài)樣式」并沒有一個約定俗成的規(guī)則。然而，對比而言如今各類 App 設(shè)計中常見的且體驗比較好的方案還是將開關(guān)樣式設(shè)計為當(dāng)前狀態(tài)樣式。如下圖iPhone自帶相機(jī)的實況照片開關(guān)icon就是顯示當(dāng)前狀態(tài)。

然而，并不是說將開關(guān)樣式設(shè)計為當(dāng)前狀態(tài)樣式做法普遍且體驗更好就可以這樣做了，有些開關(guān)的設(shè)計因為使用廣泛，已經(jīng)在用戶的心智中扎根，我們?nèi)绻麖娦懈淖兎炊m得其反導(dǎo)致體驗變差。最典型的就是視頻和音樂的播放暫停開關(guān)，他們表示的就是操作后的狀態(tài)而不是當(dāng)前狀態(tài)，如下圖。

因此，大部分應(yīng)用的開關(guān)類 icon 都是混用當(dāng)前狀態(tài)和操作后狀態(tài)的，如下圖嗶哩嗶哩的視頻播放界面，播放暫停開關(guān) icon 表示的是操作后狀態(tài)，彈幕開關(guān)表示的是當(dāng)前狀態(tài)，而視頻鎖開關(guān) icon 又變成了表示操作后狀態(tài)了。

是否統(tǒng)一倒不是關(guān)鍵，關(guān)鍵是我們是否能夠讓用戶理解相應(yīng)的意符和反饋，目標(biāo)是讓用戶在操作開關(guān)前能夠知道當(dāng)前狀態(tài)是什么，操作開關(guān)后當(dāng)前狀態(tài)是什么。

舉一個反例，下圖中的美顏相機(jī)的夜拍模式開關(guān)就沒有直觀表現(xiàn)出當(dāng)前是開還是關(guān)，這種有歧義的設(shè)計可能讓新手用戶手足無措，可能本來未開啟的功能讓用戶誤以為已開啟，導(dǎo)致拍出來的照片不符合用戶預(yù)期。

由此我們可以看出，單一的 icon 開關(guān)如果沒有其他的輔助提示會造成意符和反饋的缺失，進(jìn)而形成較大的歧義性，用戶會在疑惑中按照自己固有的心理模型和過往經(jīng)驗進(jìn)行判斷，體驗因此降低。

2.主體與開關(guān)分離（分離式）

上一部分舉了美顏相機(jī)的反例，其意符和反饋不明產(chǎn)生的歧義問題導(dǎo)致了用戶的困惑，但使用「主體與開關(guān)分離」（后文一致簡稱為“分離式”）的開關(guān)設(shè)計可以解決這個問題，它在意符和反饋層面都給予了用戶提示，可視性很強，完全解決了開關(guān)狀態(tài)無法被用戶感知的問題。分離式開關(guān)指的是，主體不再充當(dāng)開關(guān)，只當(dāng)做開關(guān)的名稱或icon，另外制作一個開關(guān)傳達(dá)意符和反饋，解決了當(dāng)前狀態(tài)與操作后狀態(tài)混淆的問題，其通常的樣式如下圖。

如下圖，F(xiàn)aceu激萌不同于美顏相機(jī)設(shè)計方式就是將主體與開關(guān)分離，很清晰地傳達(dá)了當(dāng)前開關(guān)狀態(tài)。

大部分App的設(shè)置頁面使用的開關(guān)都是主體與開關(guān)分離的方式，如下圖。

顯而易見，分離式開關(guān)直觀展示了當(dāng)前狀態(tài)，在消除歧義方面優(yōu)于 icon 開關(guān)，但同時缺點也很明顯，它占用了過多頁面空間并美感欠佳。

3.名稱變化

名稱變化指的是開關(guān)依賴于其名稱的變化告知用戶開關(guān)的當(dāng)前狀態(tài)和操作，常見的類型如下：

部分 App 會將開關(guān)的名稱變化的方式統(tǒng)一，但也有部分 App 會將這兩類進(jìn)行混用，即一個是表示當(dāng)前狀態(tài)，一個是表示操作。

下圖為部分 App 的名稱開關(guān)，我們可以將上圖的開關(guān)名稱類型的序號對號入座。

表示操作的按鈕文字具有一定引導(dǎo)性，用戶容易感知和觸發(fā)，反之，表示狀態(tài)的按鈕文字由于不具有引導(dǎo)性，如果用戶沒有對這類按鈕形成使用習(xí)慣甚至難以意識到它是可點擊的，因此我們可以利用其特性進(jìn)行逆向應(yīng)用引導(dǎo)用戶的行為。比如在直播App中，我們希望引導(dǎo)用戶關(guān)注主播，又試圖避免用戶關(guān)注后又取關(guān)主播。我們就可以將“關(guān)注”制作為表示操作，文案寫為“關(guān)注主播”（屬于1.開啟...）。將“取消關(guān)注”制作為表示當(dāng)前狀態(tài)，文案寫為“已關(guān)注”（屬于7.已開啟...）。前后的顏色進(jìn)行區(qū)分，“關(guān)注主播”的按鈕制作得對比度強，吸引力大，“已關(guān)注”做得弱一些，讓用戶誤以為不可點擊，如下圖的斗魚直播。

然而，名稱變化的開關(guān)由于語言的模糊性，仍然造成了部分歧義。我們可以發(fā)現(xiàn)很多App的名稱變化開關(guān)設(shè)計中，都會在操作后加入其它提示來消除歧義（如：toast 提示），有些App則并未加入，因此在后文中會著重介紹輔助提示的優(yōu)點和使用方法。

小結(jié)

icon、分離式、名稱變化，如果按照消除歧義的優(yōu)劣排列的話，大概是 分離式>名稱變化>icon。

那這樣的話是不是應(yīng)該把開關(guān)都換成分離式呢？當(dāng)然不是，分離式雖然在意符和反饋的層面很充分地消除了歧義，但是其也有明顯的缺點，分離出的開關(guān)會占用部分空間，可能會影響美觀，因此我們需要根據(jù)需求和頁面結(jié)構(gòu)選擇最適合的開關(guān)類型。

那名稱變化和 icon 類的開關(guān)如何消除歧義呢，我們可以通過添加下面介紹的輔助提示來解決。

三.輔助提示

1.環(huán)境暗示

環(huán)境暗示指的是用戶在操作開關(guān)前，開關(guān)以外的區(qū)域給予用戶的提示，這些提示本身存在于交互流程中并不是我們刻意加入的，用戶根據(jù)這些提示可以判斷當(dāng)前狀態(tài)以及按下開關(guān)后的狀態(tài)。

例如在觀看視頻時，當(dāng)用戶去按下視頻播放按鈕前，用戶會通過當(dāng)前圖像靜止與無聲音這個環(huán)境暗示明白當(dāng)前狀態(tài)是可能是視頻未播放，所以應(yīng)該按下播放按鈕讓視頻播放。

再比如得到 App 的夜間模式，用戶可以通過當(dāng)前界面的樣式判斷當(dāng)前是否已經(jīng)開啟了夜間模式，如下圖。

看下圖，如果沒有環(huán)境暗示，你能分清得到的夜間模式的開關(guān)哪個當(dāng)前狀態(tài)是夜間哪個當(dāng)前狀態(tài)是日間嗎？

因此，環(huán)境暗示的優(yōu)勢是我們不需要進(jìn)行另外設(shè)計其他的意符和反饋告知用戶當(dāng)前狀態(tài)，環(huán)境給予的暗示已經(jīng)足夠直觀。

2.模態(tài)/非模態(tài)提示

當(dāng)用戶按下開關(guān)后模態(tài)和非模態(tài)提示可以在反饋層面告知用戶，讓用戶知道自己是觸發(fā)了開啟還是關(guān)閉。

常見的模態(tài)提示控件是「警告框（Alerts）」，非模態(tài)提示控件是「提示框（Toast）」，前者提示強度大，使用在一些危險、重要的反饋中，后者則使用在一些輕量的提示中。

介紹 icon 開關(guān)的部分我們提到了美顏相機(jī)的夜拍模式的 icon 開關(guān)狀態(tài)難以區(qū)分，但美圖秀秀在這里使用了頂部的非模態(tài)提示在反饋層面告知用戶當(dāng)前狀態(tài)，很好地解決了這個問題，如下圖。

拉勾網(wǎng)的設(shè)置中，隱藏簡歷為危險操作，用戶極有可能由于開關(guān)名稱的歧義或由于疏忽觸發(fā)開關(guān)導(dǎo)致簡歷被隱藏從而錯過工作機(jī)會，因此此處設(shè)計了一個形式為警告框的模態(tài)提示來告知用戶當(dāng)前狀態(tài)以及潛在風(fēng)險。

3.輔助文案

輔助文案指的是在主體（主體可能是開關(guān)名稱、icon 或二者皆有之）之外另外放置一些文案信息來充當(dāng)意符和反饋。下圖案例就是高德地圖的下車提示的開關(guān)，開關(guān)的主體是名稱，但是下面的一行輔助文案很清晰地傳達(dá)了當(dāng)前的開關(guān)是什么狀態(tài)。

4.其他輔助提示

并不是所有提示都需要讓用戶看見，我們可以給予用戶其他感官的信號告知用戶當(dāng)前開關(guān)的狀態(tài)。

在現(xiàn)實生活中，我們會通過鑰匙在鎖中扭動發(fā)出的聲音判斷鎖是否被打開，通過觸摸感受摩托車是否繼續(xù)震動判斷其是否已經(jīng)熄火。

同樣，在 UI 設(shè)計中，我們也仍然可以使用聽覺和觸覺來消除開關(guān)的歧義。一個比較優(yōu)秀的案例是高德地圖，當(dāng)用戶打開下車提示之后，會出現(xiàn)語音提示“已開啟下車提醒”，它充分考慮到身處戶外的用戶可能并不能很方便地獲取屏幕上的視覺信息，因此使用語音的形式提示用戶。

小結(jié)

輔助提示很好地補充了開關(guān)在消除歧義上的不足，但我們需要合理使用否則就會產(chǎn)生不必要的視覺噪聲。如下圖，試想音樂的暫停播放開關(guān)如果加入的 toast 提示會怎么樣呢？由于我們已經(jīng)可以通過“手機(jī)是否發(fā)出聲音”這個環(huán)境暗示獲知當(dāng)前的開關(guān)狀態(tài)，如果再加入 toast 提示必然會出現(xiàn)不必要的視覺噪聲。

4.總結(jié)

介紹完開關(guān)類型和輔助提示后，我們?nèi)绾螌⑵鋺?yīng)用到我們的產(chǎn)品中，設(shè)計出無歧義或低歧義的開關(guān)呢？

如果我們選擇的開關(guān)類型已經(jīng)足夠的消除歧義，如分離式，我們就不太需要額外地增加輔助提示了。但是如果使用容易造成歧義的開關(guān)，我們可以按照（開關(guān)類型+輔助提示 1 +輔助提示 2 +......）的公式進(jìn)行設(shè)計，即一種輔助提示不足夠消除歧義，可以使用多種一起。

舉個上文的例子，高德地圖的下車提醒開關(guān)的設(shè)計就是「名稱變化開關(guān)+輔助文案+語音提示」 的組合。

然而，任何設(shè)計都不是完美的，很多地方都需要我們做出妥協(xié)，雖然我們可以選擇合適的開關(guān)類型和輔助提示解決歧義問題，但隨之而來就可能出現(xiàn)其他問題。如分離式開關(guān)消除歧義效果很好，但是占用空間且不美觀，模態(tài)和非模態(tài)提示給予用戶的反饋比較強，但是可能打擾到用戶。

綜合上文提到的三款相機(jī)軟件作為案例，如下圖，我們可以發(fā)現(xiàn)在消除歧義的過程中避免不了對用戶造成的干擾或頁面美觀度的降低。我們很難去評判Faceu激萌、美顏相機(jī)和美圖秀秀哪個設(shè)計得更好，它們只是在易用性和美觀性之間找到了它們所認(rèn)為的平衡點。具體如何設(shè)計，還是要具體問題具體分析。

那么我們應(yīng)該如何進(jìn)行取舍呢，在這里我們要考慮另外的因素。我們可以從以下角度分析，使用頻率、用戶人群、潛在風(fēng)險等。

使用頻率：使用頻率越高，用戶對操作的熟悉度越高，歧義對用戶造成的理解與記憶成本就降低了，設(shè)計可以偏向低干擾和美觀度，反之使用頻率越低，歧義對用戶造成的理解與記憶成本升高，設(shè)計就應(yīng)該偏向于易理解。

用戶人群：不同的用戶人群的風(fēng)格偏好、認(rèn)知能力是不一樣的。例如，我們要設(shè)計一款目標(biāo)用戶為年輕人的相機(jī)產(chǎn)品，設(shè)計風(fēng)格簡約，此時我們比較偏向的設(shè)計方案可能就類似美顏相機(jī)。反之，如果我們的目標(biāo)用戶是中老年人，就要偏向于易用而犧牲美觀度，方案轉(zhuǎn)而偏向美圖秀秀或 Faceu 激萌。

潛在風(fēng)險：開關(guān)的切換如果會導(dǎo)致潛在風(fēng)險，設(shè)計就應(yīng)該偏向于易理解，且需要使用模態(tài)提示告知用戶風(fēng)險。例如用戶如果關(guān)閉了推送通知開關(guān)，會導(dǎo)致接收不到實時重要的信息通知，此時不僅要使用易識別的開關(guān)類型，還需要添加模態(tài)提示告知用戶風(fēng)險。

我們可以將這些考慮角度放到雷達(dá)圖，如下圖所示，最終形成的面積越大我們越應(yīng)該將按鈕制作得易理解、易使用，反之我們可以偏向于將開關(guān)制作得更美觀犧牲一些易用性?？紤]到一些特殊產(chǎn)品的特殊用戶屬性，我們可以在下圖中增加其他考慮角度，其并不是一成不變的。

以上是本次對開關(guān)設(shè)計的思考，看似小小的一個開關(guān)，包含的學(xué)問卻不勝枚舉。作為一個互聯(lián)網(wǎng)產(chǎn)品設(shè)計從業(yè)者，一定要善于感受生活，用設(shè)計師細(xì)膩的內(nèi)心去打量、洞察身邊的一切事物，發(fā)現(xiàn)美與不足，思考改進(jìn)方法，并在這個過程中逐漸提升自我的價值。

轉(zhuǎn)自：站酷-Ballen貝林 

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(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è)計里經(jīng)常會犯的錯誤~

在我們開發(fā)的過程中，應(yīng)該始終考慮性能。而本文列舉了有效提高系統(tǒng)性能的12個方法，如果朋友們有更多的技巧請在吳小迪的博客下方評論，謝謝。



性能是創(chuàng)建網(wǎng)頁或應(yīng)用程序時最重要的一個方面。沒有人想要應(yīng)用程序崩潰或者網(wǎng)頁無法加載，或者用戶的等待時間很長。根據(jù)Kissmetrics，47%的訪問者希望網(wǎng)站在不到2秒的時間內(nèi)加載，如果加載過程需要3秒以上，則在40%的訪問者會離開網(wǎng)站。



考慮到以上這些數(shù)字，你在創(chuàng)建Web應(yīng)用程序時應(yīng)始終考慮性能。為了幫助你開始，以下提供了有效提高應(yīng)用程序性能的12種方法：



一：在瀏覽器中緩存

要這樣做有倆種選擇。第一種是使用JavaScript Cache API，我們可以安裝service worker來使用它。第二種是使用HTTP協(xié)議緩存。



訪問某個對象通常要用腳本。通過把重復(fù)訪問的對象存儲在用戶定義的變量中，以及在后續(xù)對該對象的引用中使用變量，可以立即實現(xiàn)性能的提升。



二：定義執(zhí)行的上下文

為了有效地衡量你在程序中加入的任何改進(jìn)，你必須創(chuàng)建一組定義良好的環(huán)境，以便測試代碼性能。



對所有JavaScript引擎的所有版本進(jìn)行性能測試和優(yōu)化實際上是不可行的。但是，在單一的環(huán)境中進(jìn)行測試并非一個好習(xí)慣，因為你可能會得到片面的結(jié)果。因此，建立多個定義良好的環(huán)境并測試代碼是否有效非常重要。



三：刪除未使用的JavaScript

此步驟不僅會縮短傳輸時間，還會縮短瀏覽器分析和編譯代碼所需的時間。為此，你必須考慮以下幾點：



如果你檢測到一個用戶未使用的功能，最好刪除所有與之相關(guān)的JavaScript代碼，這樣網(wǎng)站的加載速度會更快，用戶也有更好的體驗。

還有可能，你錯誤地加入了一個并不需要的庫，或者你有依賴項，這些依賴項提供的功能在所有瀏覽器中原本就有，那么你無需再增加多余的代碼。

四：避免使用太多內(nèi)存

你應(yīng)該始終給內(nèi)存加一條限制，那就是只有絕對必須的內(nèi)容才能使用內(nèi)存，因為你無法知道運行應(yīng)用程序的設(shè)備到底需要多少內(nèi)存。只要你的代碼要求瀏覽器保留新的內(nèi)存，瀏覽器的垃圾收集器就會被執(zhí)行，并停止JavaScript的運行。如果經(jīng)常發(fā)生這種情況，頁面將變慢。



五：推遲不必要的JS加載

用戶希望頁面快速加載，但并非所有函數(shù)都需要在頁面的初始加載時就可用。如果用戶必須執(zhí)行某個操作才能執(zhí)行某個函數(shù)（例如，通過單擊某個元素或更改選項卡），那么你可以將該函數(shù)的加載推遲到初始頁面加載之后。



通過這種方式，你可以避免加載和編譯那些會延遲頁面初始顯示的 JavaScript 代碼。頁面完全加載后，我們可以再開始加載這些功能，以便它們在用戶開始交互時立即可用。在 RAIL 模型中，Google 建議將此延遲加載以 50 毫秒為單位進(jìn)行，這樣就不會影響用戶與頁面的交互。



六：避免內(nèi)存泄漏

如果內(nèi)存正在泄漏，則加載的頁面將保留越來越多的內(nèi)存，并最終占用設(shè)備的所有可用內(nèi)存并嚴(yán)重影響性能。你可能見過此類故障（并且可能對此類故障感到懊惱），例如在帶有輪播或圖像滑動條的頁面上。



在 Chrome 開發(fā)者工具中，你可以通過在“性能”標(biāo)簽中記錄時間線來分析你的網(wǎng)站是否存在內(nèi)存泄漏。通常，內(nèi)存泄漏的原因是，你從頁面中刪除了 DOM，但有一些變量還在引用這些 DOM，因此，垃圾收集器無法消除它們。



七：適當(dāng)?shù)氖褂肳eb worker

當(dāng)你執(zhí)行耗時很長的代碼時，請使用 Web worker。根據(jù) Mozilla 開發(fā)人員網(wǎng)絡(luò) (MDN) 文檔：“Web Worker 可以在與 Web 應(yīng)用程序的主執(zhí)行線程分開的后臺線程中運行腳本操作。這樣做的好處是你可以在一個單獨的線程中執(zhí)行耗時又費力的的處理，同時讓主（通常為 UI）線程運行而不被阻塞或減慢?！?br />


Web worker 允許代碼執(zhí)行處理器密集型計算，而不阻塞用戶界面線程。Web Worker 允許你生成新線程并將工作委托給這些線程以獲得的性能。這樣，通常會阻礙其他任務(wù)且需要長時間運行的任務(wù)將被傳遞給 worker，從而讓主線程可以在無阻礙的情況下運行。



八：適當(dāng)將DOM元素保存在局部變量中

訪問 DOM 會很慢。如果要多次讀取某元素的內(nèi)容，最好將其保存在局部變量中。但記住重要的是，如果稍后你會刪除 DOM 的值，則應(yīng)將變量設(shè)置為“null”，不然會導(dǎo)致內(nèi)存泄漏。



九：優(yōu)先訪問局部變量

JavaScript 首先搜索以查看變量是否存在于本地，然后才在更高級別的作用域內(nèi)逐步搜索到全局變量為止。將變量保存在本地作用域內(nèi)能讓 JavaScript 更快地訪問它們。



局部變量是基于最具體的作用域的，并且可能會穿過多個級別的作用域，因此查找這一動作可能導(dǎo)致出現(xiàn)通用的查詢。在一個它前面沒有變量聲明的局部變量中定義函數(shù)作用域時，需要在每個變量之前加上 let 或 const，以便定義當(dāng)前作用域，防止查找并加速代碼執(zhí)行。



十：避免使用全局變量

因為腳本引擎在從函數(shù)或其他作用域內(nèi)引用全局變量時需要逐一查看作用域，所以當(dāng)本地作用域丟失時，該變量將被銷毀。如果全局作用域中的變量無法在腳本的生命周期內(nèi)持續(xù)存在，則性能將得到改善。



十一：實施一些優(yōu)化方案

始終使用計算復(fù)雜度的算法和最佳的數(shù)據(jù)結(jié)構(gòu)來解決任務(wù)。



重寫算法以獲得相同的結(jié)果和更少的計算。



避免遞歸調(diào)用。



給重復(fù)的函數(shù)加入變量、計算和調(diào)用。



分解和簡化數(shù)學(xué)公式。



使用搜索數(shù)組：用它們來獲取基于另一個的值，而不是使用 switch/case 語句。



使條件總是更有可能為真，以更好地利用處理器的推測執(zhí)行。



如果可以，請使用位級運算符替換某些操作，因為這些運算符的處理周期較短。



十二：使用工具檢測問題

Lighthouse 是一個很好的網(wǎng)頁性能工具，它可以幫助你審核性能、可訪問性、最佳實踐和 SEO。谷歌 PageSpeed 旨在幫助開發(fā)人員了解網(wǎng)站的性能優(yōu)化和潛在可改進(jìn)的方面。這些組件旨在識別網(wǎng)站是否符合 Google Web 性能最佳實踐，以及將調(diào)整過程自動化。



在 Chrome 中，你還可以使用主菜單中的“更多工具”選項來查看每個選項卡使用的內(nèi)存和 CPU。對于更高級的分析，你可以使用 Firefox 或 Chrome 中的開發(fā)人員工具“性能”視圖來分析不同的指標(biāo)，例如：





devtools 的性能分析允許你在加載頁面時模擬 CPU 消耗、網(wǎng)絡(luò)和其他指標(biāo)，以便識別和修復(fù)問題。





為了更深入地了解，建議你使用 JavaScript Navigation Timing API，它允許你詳細(xì)測量代碼的每個部分從編程本身中獲取的內(nèi)容。



對于基于 Node.js 構(gòu)建的應(yīng)用程序，NodeSource Platform 也是一種非常好、影響低的方式，它可以在非常精細(xì)的級別上探索應(yīng)用程序性能。



全面的 Node.js 指標(biāo)可幫助你識別內(nèi)存泄漏源或其他性能問題，并更快地解決這些問題。



最后的說明在代碼的可讀性和優(yōu)化之間保持平衡很重要。代碼由計算機(jī)解釋，但我們需要確保代碼將來可以由我們自己或其他人維護(hù)，因此它們需要易于理解。



請記?。簯?yīng)始終考慮性能，但不應(yīng)將性能凌駕于錯誤檢測和功能添加之上。

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

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

最近一個全新的名詞頻繁出現(xiàn)在我們的視野里，它和去年的“增長黑客”一樣，在互聯(lián)網(wǎng)圈子里被炒的火熱，它伴隨著微商和社交電商而出現(xiàn)，它已經(jīng)悄悄改變著整個互聯(lián)網(wǎng)營銷格局，它就是“私域流量”。

恰好上周我在團(tuán)隊內(nèi)部也分享了關(guān)于“私域流量”的話題，這期間還糾結(jié)要不要整理到公眾號里。然鵝，樂于分享的精神將我腐蝕~，今天就不聊設(shè)計、不聊產(chǎn)品，來談一談我眼中的“私域流量”，拓展一丟丟互聯(lián)網(wǎng)的思維邊界。

一、什么是私域流量？

要讀懂私域流量，首先要了解流量池的概念，流量池是流量的蓄積的容器，主要是為了防止有效流量流走而設(shè)置的數(shù)據(jù)庫，比如：淘寶、百度、微博等。只要有足夠的預(yù)算，可以持續(xù)不斷的獲客（獲取新用戶的渠道），被稱為流量池。

而私域流量指的是品牌或個人自主擁有的、無需付費的、可反復(fù)利用的、能隨時觸達(dá)用戶的流量。它并不是一個新生事物，只是與我們曾經(jīng)接觸的流量相比，更加便于商戶或個人使用的流量。

比如：之前社交媒體還沒普及的時候，私域流量就是客戶的聯(lián)系方式（手機(jī)號、郵箱、住址等），想要聯(lián)系他們時，可以打電話、發(fā)短信、發(fā)郵件、甚至往他們家寄樣品體驗。當(dāng)時這些客戶信息甚至都是公司的商業(yè)機(jī)密。

隨著時代的進(jìn)步，如今的私域流量是一個完全屬于“你”自己的私人地盤，大到年入上億的商家，小到個人經(jīng)營者。這些流量存在于公眾號、微信好友、微博、社群、朋友圈、頭條號、抖音等社交媒體里，它是一切你可以隨時掌控的私人流量池（既私域流量），這個流量池里聚集的是你的粉絲、客戶和潛在客戶。

而產(chǎn)品則是承載用戶流量的工具，即使用戶分布在不同的產(chǎn)品里，但只要是在個人賬號的，就是你的私域流量。顧名思義，私域流量就是屬于自己的流量，相對公域流量而言，主要指個人或品牌自主擁有的自由流量，它需要通過沉淀和積累來獲取的更精準(zhǔn)、轉(zhuǎn)化率更高的垂直領(lǐng)域流量。

二、公域流量與私域流量

任何一家互聯(lián)網(wǎng)公司，都離不開一個核心問題——流量。得流量者得天下，有了流量才能進(jìn)行下一步轉(zhuǎn)化，“流量”既代表大眾的關(guān)注點。

對互聯(lián)網(wǎng)公司來說，流量就是市場，流量就是用戶，流量就是商機(jī)。我們講的私域流量就是這部分流量屬于商家或個人的“私有資產(chǎn)”。既然有私有，那必然有公有。與私域流量對應(yīng)的是公域流量，比如淘寶、京東這些大的流量平臺，所有的流量都要花錢買，而且越來越貴，這里的“花錢買”指的是廣告推廣、排名推廣等。有了曝光率，用戶的關(guān)注點（瀏覽行為）自然就來了。

這兩類流量有什么本質(zhì)上的區(qū)別呢？

公域流量和私域流量并不是絕對概念，而是相對概念。比如一家商場開在步行街上，商場里的流量相對于步行街就是私域流量，因為店鋪基于步行街內(nèi)。而步行街的流量相對于商場就是公域流量，因為其他店鋪也可以享用。再比如，從淘寶里打開一個網(wǎng)店，網(wǎng)店里的流量相對于淘寶就是私域流量，而淘寶的流量相對于網(wǎng)店又成了公域流量。同樣，公眾號的流量相對于微信就是私域流量，微信的流量相對于公眾號就是公域流量。

所以說，公域流量就像大海，剛開始魚多，捕魚的人少，即便我們捕魚的技術(shù)一般，也能有所收獲。隨著捕魚的人越來越多，捕到魚的成本越來越高，魚的質(zhì)量卻越來越低，于是很多人就開始自建魚塘養(yǎng)魚，這樣捕魚的成本低了，也更容易捕到魚了，還能租出去讓別人釣魚，自建魚塘就是私域流量。伴隨著流量紅利的減緩，公域流量逐漸飽和，商家很難再以較低的成本來獲客了，為什么是較低的成本？請往下看案例。

公域流量：

公域流量也叫平臺流量，它不屬于單一個體，而是被集體所共有的流量。來看看我們常見的的平臺流量五大板塊：

電商平臺（淘寶，京東，網(wǎng)易考拉等）；

內(nèi)容聚合型平臺（騰訊新聞、網(wǎng)易新聞、今日頭條等）；

社區(qū)平臺（百度貼吧、微博、知乎、簡書等）；

視頻內(nèi)容型平臺（騰訊視頻、愛奇藝、抖音等）；

搜索平臺（百度搜索、谷歌搜索、360搜索等）。

對于平臺中的個體來講，他們只能以付費或活動等方式，在滿足平臺規(guī)則的原則下獲取流量，留存率較差，因為個人沒有支配權(quán)，只能跟隨平臺的發(fā)展規(guī)律順勢而為，且流量始終屬于平臺，個體稍有過分的營銷嫌疑就會被封號。很顯然，他們都依靠于平臺獲取流量，并且不能完全掌控自己的流量分發(fā)。

這種形式所帶來的弊端便是每次流量的使用需支付高昂的費用。當(dāng)然，優(yōu)點僅為流量獲取方式相對簡單，花錢購買，付費即可，平臺會根據(jù)你付費的級別來定制推送計劃。但這種推廣方式，相當(dāng)于大海撈針，比如我們在百度上做推廣，想利用百度的流量來曝光我們的UI設(shè)計網(wǎng)課，但是每天使用百度的用戶來自于各個階層、各個崗位，需求五花八門，可能100個訪問用戶中，只有1個是具備目標(biāo)用戶條件的，所以平臺流量不能精準(zhǔn)的曝光到目標(biāo)用戶所在的群體。

私域流量：

接下來，我們對比一下私域流量，它屬于單一個體的流量。比如某個公號的關(guān)注用戶都是UI設(shè)計師，那這個公號的私域流量就是推廣UI設(shè)計網(wǎng)課的首選目標(biāo)，因為大家都有這個需求、都來自這個領(lǐng)域，只不過需求的渴望程度不一樣而已。在100個閱讀用戶中，可能有10個會仔細(xì)了解。所以這種推廣方式的精準(zhǔn)度要比平臺流量更高，關(guān)鍵是推廣費用極低。弊端是曝光率、影響面積、用戶熱度是臨時性的，但在短時間之內(nèi)是有明顯的用戶增長，這就是所謂的“極速獲客”、“熱點獲客”。

所以我們常見的私域流量都存在于個人號中，他們可以完全掌控自己的流量分發(fā)。比如在微信中，好友也是我們的私域流量，我們可以選擇不同的好友分組推送消息，所以私域流量最大的特點是直接觸達(dá)用戶。

同時，私域流量可以反復(fù)利用，更適用于復(fù)購屬性強的產(chǎn)品，利于增加復(fù)購率，比如我們生活中一些小超市的營銷手段就是利用私域流量增加顧客的粘性和復(fù)購率的：在超市購買商品支付時，收銀員要求你添加他們店長的微信號，添加成功可以送多少積分，打多少折扣，這就是獲客的第一步，然后店長會把這些顧客拉入到一個微信社群里，每天定時推送一些打折商品、優(yōu)惠新品等，有些用心運營的還在社群里做“搶紅包”的活動，搶到最多的前三名當(dāng)日到店購買商品送500積分等。

我們可以看出，比起公域流量，私域流量更注重引導(dǎo)和運營。如果用一句話概括私域流量和公域流量的區(qū)別，就是：私域流量的用戶屬于個體，公域流量的用戶屬于平臺。

三、私域流量的特點與價值

1、更可控

假設(shè)某平臺有一百萬用戶，然而這一百萬用戶跟我們沒有任何關(guān)系，我們只有把里面的用戶導(dǎo)入到自己的平臺，才算自己的用戶，后續(xù)對這些用戶的針對性服務(wù)才有可能發(fā)生。

就拿“抖癮”來說，用戶喜歡的短視頻很多，當(dāng)對其中一個視頻感興趣時，可以選擇關(guān)注號主，關(guān)注后可以第一時間享受到號主提供的視頻服務(wù)，而對號主來說，關(guān)注者就是從平臺引入的私域流量。當(dāng)關(guān)注號主的用戶越來越多時，這個號主就成了所謂的網(wǎng)紅，并在特定領(lǐng)域有一定的影響力，因為后面有一大群“私域流量”在支持他，基于此，一些其他的業(yè)務(wù)和廣告就隨之而來，這伴隨的也就是收入。號主也可以選擇性服務(wù)，將關(guān)注用戶人群細(xì)分，從而合作不同的品牌。

2、更省錢

產(chǎn)品在平臺流量獲得曝光需要支付高昂的費用，比如：關(guān)鍵詞競價、關(guān)鍵詞推廣等，如果你想通過平臺獲得不花錢的曝光...還是別想了，不可能的，人家的流量也是花錢砸出來的。

私域流量幾乎是免費的，一旦把用戶從平臺流量引入到私域流量，比如：微信社群，那真是我的地盤我做主，怎么玩都是我的權(quán)利，當(dāng)然也不能太放肆而喪失了所謂的本質(zhì)，如果用戶體驗不好，分分鐘會被別的“私域流量”引導(dǎo)走，畢竟選擇也是用戶的權(quán)利。再就是前面舉的UI設(shè)計師網(wǎng)課和超市的例子，直接跟“熟客”建立聯(lián)系，省下了渠道推廣費不說，熟客們還愿意為你安利更多用戶，這相當(dāng)于幫你免費做了宣傳推廣，無形中產(chǎn)生了裂變。所以產(chǎn)品在私域曝光的成本要比平臺曝光低得多，甚至幾百塊就可以搞定一個精準(zhǔn)推廣，而這個精準(zhǔn)推廣還會產(chǎn)生二次流量。

3、更豐富的營銷玩法

私域的運營能讓商家與消費者建立更親密的連接，那商家就可以基于產(chǎn)品做延展，不管是二次營銷還是多元化營銷，只要你輸出的內(nèi)容不讓用戶失望、討厭，就有助于銷售。

我們身邊最常見的就是分享文章到朋友圈進(jìn)交流群、參與文章中的紅包抽獎、評論區(qū)積攢送書、公眾號文章互推等活動。這無形中就是為商家的私域流量進(jìn)行了裂變和促活。

當(dāng)然這些只是很小一部分的玩法，也不違背互利的原則：我分享你的文章進(jìn)了我想進(jìn)的交流群、我?guī)湍愕奈恼聨硪淮伍喿x，但我可能獲得抽獎紅包、我發(fā)動身邊朋友幫我積攢，對你的產(chǎn)品進(jìn)行了裂變式曝光，但我得到了想要的書籍...

寫到這里讓我想起之前在網(wǎng)上看到的段子“我把你當(dāng)朋友，你卻把我當(dāng)你的私域流量”。然而，不管是現(xiàn)實還是網(wǎng)絡(luò)，不可能有人在商業(yè)環(huán)境里無私的付出，雖然說的很透，但我們還是需要正確認(rèn)識現(xiàn)實，畢竟這是個資源互換、資源共享的互聯(lián)網(wǎng)時代。

4、更高的客戶穩(wěn)定性

私域流量可以有效防止用戶流失，尤其是你經(jīng)常交互的用戶。通過運營私域流量，與用戶建立起情感互動（交互），你推薦的產(chǎn)品他們也不會條件反射般地當(dāng)作廣告去屏蔽掉，同時你的誠懇推薦也會讓用戶穩(wěn)定性越來越好，不容易流失。

現(xiàn)在很多商戶都會主動以個人號去添加一些顧客，通過私人關(guān)系為他們提供訂座、專屬折扣和所謂的VIP服務(wù)，平時有事沒事嘮嘮嗑、相互點個贊、時不時來一句贊美的評論啥的。所以，商戶在用戶面前曝光多了，也能起到喚醒用戶記憶的作用，久而久之復(fù)購率也就提升了。

5、更利于塑造品牌和個人IP

好品牌反映了好口碑，在某種程度上會幫助用戶消除掉選擇困難癥，比如我們買鞋子，品牌這么多，我肯定首選我心目中排在第一的，這個“第一”就是用戶對商戶精神層面的認(rèn)知和信任，品牌塑造的過程就是用戶忠誠度建立的過程。

私域流量的交互，可以拉近品牌和用戶之間的距離，通過產(chǎn)品提供的服務(wù)把同類人群聚集在一起，這些人累計起來的影響力不可小瞧。不管商戶大小，掌握私域思維，都能有效的促進(jìn)與用戶的溝通，增加用戶粘性和忠誠度。

在運營私域流量時，最常見的錯誤是沿用以前的思維。比如很多公司讓客服團(tuán)隊搞大量微信個人號做朋友圈運營，但其實沒有任何一個微信用戶希望自己的朋友圈里多了一個廣告客服。私域流量轉(zhuǎn)化的核心是信任，是基于人與人之間的信任。這里有一個非常重要的環(huán)節(jié)，就是個人IP化打造，打造一個行業(yè)KOL或?qū)＜业纳矸荩热缒阍谀硞€領(lǐng)域有豐富的行業(yè)經(jīng)驗，通過某些途徑將你的經(jīng)驗分享給有需要的人，這就從中產(chǎn)生了濃厚的信任，因為在用戶眼里，你就是行業(yè)的專家（你說啥都對~），完成這步之后，私域流量才可能提高轉(zhuǎn)化。說白了就是你（商戶）能為用戶提供什么樣的服務(wù)，這些服務(wù)被多少人所認(rèn)可。

四、身邊常見的導(dǎo)流方式

1、靠利益誘導(dǎo)

比如關(guān)注公眾號領(lǐng)紅包、下載APP送現(xiàn)金、注冊領(lǐng)優(yōu)惠券等。在流量池獲得曝光后，用戶看到進(jìn)入私域流量有好處時，一般都會形成轉(zhuǎn)化。雖然數(shù)據(jù)在短時間內(nèi)很美麗，但留存率和活躍度不敢保證，這需要產(chǎn)品內(nèi)的引導(dǎo)和體驗來支撐。

2、解決內(nèi)容訴求

做優(yōu)質(zhì)的內(nèi)容輸出，解決用戶的內(nèi)容訴求，靠內(nèi)容本身打動用戶形成轉(zhuǎn)化。比如你正在看這篇文章，你覺得有點收貨，就產(chǎn)生了關(guān)注我公眾號的想法，并做出了關(guān)注的行為，這個“行為”就是一次轉(zhuǎn)化。所以做內(nèi)容私域的本質(zhì)在于產(chǎn)出有價值、有思考、有幫助的干貨。當(dāng)別人發(fā)現(xiàn)你產(chǎn)出的東西，對自己有幫助時，會主動前來，這是長久的打法。

五、寫在最后

私域流量的拉新和運營，就是與人打交道、與一群人打交道，和做產(chǎn)品一樣，滿足他們的核心需求，以及一些增值需求?，F(xiàn)在關(guān)于私域流量運營還沒有太多成熟的玩法，商家多半還在摸索和嘗試中。我們也不要只盯著微信平臺，用戶在哪里流量就在哪里，私域流量池就在哪里，就像有些朋友從公眾號轉(zhuǎn)戰(zhàn)到“抖癮”一樣。

掏心窩子：當(dāng)然我個人并沒有太在乎私域流量給自己帶來的利益，因為我始終把在UI中國寫文章當(dāng)做一種學(xué)習(xí)成長的方式而已，通過輸出一些復(fù)盤和有挑戰(zhàn)的知識點，幫助自己突破思維邊界，同時還能結(jié)交各位同行，簡直兩全其美。

??希望對你有所幫助~

是的，我們距離目標(biāo)又近了一步，標(biāo)紅的你都看了嗎？

文章來源：ui中國

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

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

標(biāo)簽是用來告訴用戶這個列表項是什么；輸入框是供用戶完成信息錄入的；按鈕是供用戶完成信息錄入后點擊進(jìn)入下一個流程的。

標(biāo)簽

根據(jù)標(biāo)簽所處的位置，可以將其分為左標(biāo)簽、頂部標(biāo)簽和行內(nèi)標(biāo)簽。

1. 左標(biāo)簽

左標(biāo)簽在目前來說是最常見的一種標(biāo)簽樣式，但是這并不意味著我們可以無所顧慮地使用它。以手機(jī)端為例，手機(jī)端的屏幕尺寸（寬度）有限，左標(biāo)簽會占據(jù)屏幕較大的空間，此時右邊的輸入框就可能無法展示完整的信息。

例如，如果用戶輸入的地址過長，就會造成信息的展示不完全，這對用戶體驗來說是致命的。因為用戶在進(jìn)行下一步操作之前都會對輸入的內(nèi)容進(jìn)行審核確認(rèn)，如果連完整的內(nèi)容都無法獲知或者獲知的難度較大，則用戶根本不會進(jìn)行下一步操作，這就造成了操作流程的中斷。所以，我們在使用左標(biāo)簽的時候，一定要考慮對多行文本的展示。

2. 頂部標(biāo)簽

頂部標(biāo)簽是指位于輸入框上方的標(biāo)簽，這樣輸入框就可以獨占整個頁面，信息可以得到更完全的展示。

與左標(biāo)簽相比，頂部標(biāo)簽可以給輸入框的內(nèi)容騰出足夠的空間。在界面設(shè)計中，更多的空間還意味著具有更高的信息層級。同一個表單中會有很多的輸入項，有些輸入項的優(yōu)先級很高，我們可以考慮使用頂部標(biāo)簽的樣式來進(jìn)行凸顯。

但是這種布局方式也有缺點：會占據(jù)更多的縱向空間，之前一屏就可以展示的內(nèi)容，現(xiàn)在用戶需要滑動頁面才可以看完。

3. 行內(nèi)標(biāo)簽

行內(nèi)標(biāo)簽又可以被看成是輸入提示，其樣式看起來很適合手機(jī)端的表單設(shè)計，因為它可以極大地節(jié)省頁面空間。但是一旦用戶點擊切換到輸入狀態(tài)以后，就看不到這些標(biāo)簽了。如果操作提示字?jǐn)?shù)很多，例如密碼規(guī)范，那么用戶記憶會很吃力。我們可以在調(diào)起的鍵盤頂部加上提示，減少用戶的記憶成本。

但是，如果表單項目過多，則用戶在填寫的時候很容易串行，可能會出現(xiàn)把家庭住址填到畢業(yè)院校一欄中的情況。更嚴(yán)重的是，用戶因為無法看到標(biāo)簽，這類錯誤是無法被檢查出來的。為了解決這個問題，我們可以在行內(nèi)標(biāo)簽前加一個圖標(biāo)來標(biāo)識這個列表項，圖標(biāo)所占據(jù)的空間不會太大，而且會提高頁面的美觀性。

當(dāng)表單項目過多時，我們要對其進(jìn)行整合分組來提升內(nèi)容的可讀性。如下圖所示，這里將 15 個字段分成 3 組。同樣的內(nèi)容，但給用戶的印象卻大不相同。

輸入框

輸入框的作用是供用戶完成信息錄入，這里我們的設(shè)計思路是如何提升信息的錄入效率。我見過很多設(shè)計師偷懶，把所有的輸入框都做成文本框樣式，用戶必須調(diào)起鍵盤一個字一個字地輸入，這種體驗是非常不友好的。如果我們想讓用戶錄入個人信息，其中的生日和城市就應(yīng)該使用日期和城市組件，而不是讓用戶手動輸入。

即使非要讓用戶手動輸入，我們同樣可以根據(jù)不同的場景給用戶提供更友好的體驗。如果要輸入的是數(shù)字，那么應(yīng)該給用戶調(diào)起數(shù)字鍵盤；如果要輸入文本，那么應(yīng)該給用戶調(diào)起全鍵盤，避免用戶手動切換鍵盤。

即使用戶輸入符號，我們也要考慮如何減少用戶的操作步驟。例如，我們發(fā)現(xiàn)當(dāng)光標(biāo)位于周星星三個字右邊的時候，點擊「“」鍵，會出現(xiàn)左右雙引號；當(dāng)光標(biāo)位于周星星三個字中間的時候，點擊「“」鍵，只會出現(xiàn)左雙引號。這是因為光標(biāo)在文本右邊，用戶只要輸入「“」，那么就必然需要「”」來結(jié)尾，這里直接提供左右雙引號更合適。如果光標(biāo)是文本中間，無法確定「”」需要在哪里出現(xiàn)，所以只展示「“」。

容錯性設(shè)計

在理想狀態(tài)下，用戶填寫完表單信息，然后點擊「提交」按鈕，系統(tǒng)顯示提交成功。但是，現(xiàn)實情況卻是用戶在填寫過程中經(jīng)常會發(fā)生錯誤，那么如何將容錯性原則融入表單設(shè)計中呢？

首先我們需要給予用戶足夠的操作提示，日期錄入就是最典型的例子。不同的地區(qū)對于日期錄入的格式也不一樣，「02/12/2019」到底是2019年2月12日還是2019年12月2日？如果我們不提示用戶，用戶就不知道應(yīng)該怎么輸入。

為了避免用戶犯錯和提升用戶的信息錄入效率，我們可以提供自動完成錄入功能，當(dāng)用戶在文本框里輸入時，系統(tǒng)可以猜測可能的答案，顯示可選列表，避免了用戶手動輸入造成的錯誤。

如果你確定對用戶足夠了解，在用戶進(jìn)行信息錄入時，可以提供合理的默認(rèn)值。因為對用戶來說，填寫信息永遠(yuǎn)都不是一件有趣的事情，設(shè)置合理的默認(rèn)值可以節(jié)省用戶的操作時間。

能讓系統(tǒng)完成的任務(wù)，就盡量不要讓用戶來操作。用戶會犯錯，而系統(tǒng)不會。表單容錯性設(shè)計的另一個方向就是梳理表單中的雞肋項目。

現(xiàn)在很多的購票類 APP 都提供送票上門的功能，這就需要用戶填寫收貨地址。以交通出行類 APP 飛豬、途牛和去哪兒為例，其中，上圖中左側(cè)的兩張圖，飛豬和途牛都需要用戶填寫郵政編碼，而在去哪兒中則是選填的。其實根據(jù)用戶填寫的地址，我們已經(jīng)可以獲取到郵政編碼，郵政編碼完全可以自動回顯，不需要用戶手動輸入。

而在小米有品 APP 中就可以根據(jù)用戶填寫的地址回顯郵政編碼，這看起來很方便。這只是看起來很方便，我們可以繼續(xù)思考一下：如果系統(tǒng)完全可以根據(jù)用戶填寫的地址獲取到郵政編碼，那么郵政編碼這一項完全可以不在界面中露出。其實很多產(chǎn)品在用戶填寫收貨地址的時候已經(jīng)不需要用戶填寫郵政編碼了。

對于容錯性原則，我們還要考慮如何給用戶展示合理的報錯提示。目前來說，我們經(jīng)常看到的一個報錯提示樣式是對話框。在我看來，對話框并不是一個好的選擇。因為用戶如果要進(jìn)行修改，就必須要關(guān)閉對話框，那么用戶就看不到錯誤信息了。如果錯誤原因和解決方案的字?jǐn)?shù)較多，那么用戶就需要花一定的時間記住這些信息，然后再來修改，這會增加用戶的記憶負(fù)擔(dān)。如何才能設(shè)計好表單的報錯提示呢？表單中的報錯提示可以分為兩種：單行表單報錯提示和多行表單報錯提示。

單行表單中意味著在當(dāng)前界面中表單只有一行輸入框，其一般用于手機(jī)號、銀行卡號、身份證號和金額的錄入。對于此類場景，建議使用輸入框底部的文字報錯提示樣式，并且要對錄入的信息進(jìn)行實時校驗，不要等到用戶進(jìn)入下一個界面才告知用戶在上一個界面中手機(jī)號輸錯了。

給多行表單進(jìn)行報錯提示時，除告知傳統(tǒng)的錯誤原因和解決方案外，還應(yīng)該告知用戶錯誤的位置。因為在一個界面中，有很多的輸入項，用戶在短時間內(nèi)無法把報錯提示和錯誤項聯(lián)系起來，因此，為了提升用戶對于錯誤場景的感知效率，對錯誤項進(jìn)行標(biāo)記是非常有必要的。具體的實現(xiàn)方式有改變文字顏色、輸入框背景色和設(shè)置提示文案抖動。

以上圖為例，這里通過改變文字顏色或輸入框背景色來標(biāo)記錯誤位置，用 Toast 告知用戶錯誤原因和解決方法。我們也可以不改變配色，讓該輸入框左右抖動也能起到快速標(biāo)識的作用。

按鈕

表單中的提交類按鈕按照位置可以分為以下三種。

其中位置 A 是最常見的布局樣式，這樣的布局符合用戶的視覺習(xí)慣和操作流程：用戶由上而下完成表單信息的填寫，最后點擊「提交」按鈕進(jìn)入下一個頁面。但是這種布局有一個問題：如果表單項目過多，則用戶必須滑動頁面才能完成提交操作。

位置 B 跟位置 A 很相似，唯一的區(qū)別在于位置 B 是固定在頁面底部的。那么位置 B 跟位置 A 的適用場景有什么不同呢？位置 B 意味著用戶在不用滑到頁面底部的情況下就可以點擊「提交」按鈕，那么在什么樣的場景下用戶不用滑到頁面底部就可以提交呢？

其實在很多表單中，不是所有的信息都需要用戶手動錄入的。以前面提到的郵政編碼為例，只要用戶輸入了地址，系統(tǒng)就能獲取郵政編碼，相關(guān)信息是可以直接回顯的，用戶沒有看到此類信息的必要性。所以，對于一些重要性不是很高、不強制用戶看完的表單項目，很適合使用這類底部懸浮按鈕。最常見的就是各種協(xié)議頁。

位置 C 出現(xiàn)的原因在于，對于前兩種方案，當(dāng)調(diào)起鍵盤時就會遮住「提交」按鈕，用戶必須先關(guān)閉鍵盤才可以點擊「提交」按鈕，多了一步操作。而位置 C 可以完美解決鍵盤遮擋的問題，但是其不符合用戶的視覺習(xí)慣和操作流程。而且手機(jī)大屏化是一個不可逆的趨勢，用戶在單手握持手機(jī)的情況下很難直接點擊到界面右上角的「提交」按鈕，增加了操作難度。

其實位置 C 完全可以被忽視，因為現(xiàn)在很多產(chǎn)品已經(jīng)支持在調(diào)起鍵盤時滑動頁面，所以位置 C 最大的優(yōu)勢已經(jīng)不復(fù)存在。這里還介紹位置 C 的原因是希望讀者知道交互規(guī)則是會隨著技術(shù)的發(fā)展而不斷改變的，可能在這本書里提到的一些技法過一段時間就會落伍了。要成為一名優(yōu)秀的設(shè)計師，必須具備持續(xù)學(xué)習(xí)的能力。

文章來源：優(yōu)設(shè)

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

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

日本的雜志同樣如此。一本雜志應(yīng)該針對什么樣的群體，帶有什么樣的特征，傳達(dá)什么樣的情緒，都會有非常清晰的「屬性標(biāo)簽」。

20世紀(jì)80年代是日本時尚雜志百花齊放的年代，眾多現(xiàn)有知名日本雜志誕生，例如《ViVi》、《CanCam》、《JJ》、《mina》、《sweet》、《SPRING》等等。不同的雜志風(fēng)格不同，面向的群體也不同，上面所帶的標(biāo)簽也不同。

比如時尚雜志《PopEye》是針對「City Boy」的男性，「美式復(fù)古」和「學(xué)院派風(fēng)格」是這本雜志最典型的標(biāo)簽。

而女性向時尚雜志《mina》的標(biāo)簽則是「清新少女」、「獨立」、「青文字系」?！盖辔淖窒怠故且粋€非常日本的標(biāo)簽，簡單來說，帶有「青文字系」標(biāo)簽的雜志在精神內(nèi)核上強調(diào)女性要瀟灑獨立，不應(yīng)該對男性諂媚，帶有同樣標(biāo)簽的雜志還有《sweet》、《steady》、《mini》、《SPRING》、《InRed》。與之相反的標(biāo)簽則是「赤文字系」，帶有這一標(biāo)簽的雜志特別強調(diào)女子力，會教讀者如何穿搭、如何做才能討男生歡心，帶有這一類標(biāo)簽的雜志有《JJ》、《ViVi》、《Ray》、《CanCam》。當(dāng)然，近年來還出現(xiàn)了「黑文字系」，其實指的是喜歡穿一身黑的姑娘……

不過言歸正傳，今天我們要聊的主要是《mina》這本雜志?！秏ina》其實在新世紀(jì)之初進(jìn)入過中國大陸，當(dāng)時中文名稱為《米娜》，巴拉排行榜曾將其列為全球十大時尚雜志之一，是日本少女清新風(fēng)格的雜志。

《mina》能獲得這樣的贊譽，和它本身極高的內(nèi)容素質(zhì)是分不開的。包括尾身沙紀(jì)在內(nèi)的許多著名的攝影師，會給《mina》拍攝圖片，而模特更是有村架純、竹內(nèi)涼真這樣的一線明星。

清新秀麗的妝容，凸顯少女氣質(zhì)的整體設(shè)計，真實而細(xì)膩的場景，《mina》借助精心打磨的視覺排版，將女性最真實可愛、貼合年紀(jì)的美麗以及元氣滿滿的少女感，都呈現(xiàn)出來了。

如果你是一名熱愛視覺和排版設(shè)計的設(shè)計師或者愛好者，《mina》簡直就是為你量身定制的排版素材庫。稍加拆解，你會發(fā)現(xiàn)這個雜志中到處都是可供學(xué)習(xí)的排版知識。

版心：創(chuàng)造不同的視覺感知

《mina》雜志因為其少女特性，多樣活潑的使用不同的區(qū)域放置元素，同一本雜志會給你帶來不同的視覺效果。下面左圖四周無間距的設(shè)置，會使你的視線更加開闊，無論看向版面的哪一部分，都可以傳遞信息給你，吸引你打開這本雜志。右圖的框線設(shè)置，限制了閱讀的區(qū)域，讓你的視線聚焦在框線內(nèi)，閱讀精心為你準(zhǔn)備的內(nèi)容。

下面左圖三張圖片和兩段文字的排列，使整個版面顯的更加充實和生活化，而右圖單張圖片和零星的文字使得整個版面顯的更加高級，這不僅僅是圖片和顏色選擇的影響，更多的還有元素的排列給你帶來的視覺感受。

分組：使版面信息清晰且富有條理

為了讓讀者更加易于閱讀，在該版面上停留更長的時間，分組的設(shè)計在雜志中較為常見。圖文元素整齊的搭配，是不是給你一種畫面美觀，信息可信賴的感覺呢？這樣的設(shè)計也更加的吸引讀者進(jìn)行閱讀。

反復(fù)和對齊：使版面富有韻律感而不失規(guī)整

同一排版樣式的反復(fù)使用，會給你舒適的閱讀體驗，整個版面會更加的有節(jié)奏感，不會讓你覺得某一元素特別跳脫。同樣，為了美觀和便于閱讀，無論是圖片還是文字，都遵循著一定的對齊原則，常見的有左對齊、上對齊和居中對齊。

對比：通過視覺差異突出重點

活躍于廣告界的白承坤先生說，無論使用怎樣的圖片，目的都是為了讓眼睛停留兩秒鐘。同理，各類元素或色彩之間的對比是雜志常用的讓你停留「兩秒鐘」的方式。由于視覺心理的作用，相對來說，大的元素、鮮艷的元素會更加的吸引人眼球，引人注意。

出血位：打破規(guī)整，活潑版面

對于少女雜志而言，如何體現(xiàn)少女心和元氣滿滿的感覺是一個需要解決的難題，而出血的設(shè)置為這個難題提供了一把鑰匙，讓整個畫面活潑生動起來，右圖奶茶開放式對話框的加入，有一種奶茶說「快來喝我！」的活潑感，使得整個版面頓時可愛起來。

留白和透氣：創(chuàng)造呼吸與韻律感

《mina》很少在版面的四角放置滿滿當(dāng)當(dāng)?shù)脑?，是因為適當(dāng)?shù)牧舭卓梢宰屓嗽诒姸嗟脑貨_擊中舒緩下來，給你清新舒適的觀感。讓你在開闊的視野中，使雜志想展現(xiàn)出來的重點，成為你的焦點。這樣好用的突出重點的方式，快快學(xué)起來吧。

摳圖和四方版：控制元素與環(huán)境的關(guān)系

摳出來的人物沒有其固有的背景，會讓你聚焦于少女的動作和輪廓，隔著屏幕都能感受到少女滿滿的活力。而四方版更加強調(diào)人與環(huán)境的關(guān)系，讓你得以獲得更多的信息。兩種方式如何恰當(dāng)?shù)氖褂?，就看你想用來傳遞什么樣的信息啦！

傳遞信息是最重要的，其余的套路就快去打開《mina》找尋吧！

文章來源：優(yōu)設(shè)

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

本文主要記錄幾種提升基于深度學(xué)習(xí)的圖像語義分割精度的方法，以防忘記！

                                        By zhengzibing2011, 2017年10月21日-星期六

1

1.圖像語義分割面臨的挑戰(zhàn)

(1).特征分辨率減小：主要是由神經(jīng)網(wǎng)絡(luò)中的重復(fù)最大池化和降采樣（stride跨越）操作造成的，而采用此種操作的原因是 

A.降維，以免參數(shù)過多難以優(yōu)化； 

B.基于DL的語義分割是從用于分類任務(wù)的CNN轉(zhuǎn)化而來，而在分類任務(wù)中，分類器要求對輸入的空間變換具有不變性，池化恰能滿足這樣的要求。



(2).不同scale下的目標(biāo)存在的狀況：主要是目標(biāo)在multi-scale圖像中的狀態(tài)造成的，因為在同一種尺度下，不同目標(biāo)的特征往往響應(yīng)并不相同。如需要在較大的尺度下才能較好地提取圖像中比較小的目標(biāo)，而較大的目標(biāo)為了獲取全局性信息也必須在較小的尺度下才能實現(xiàn)。



(3). CNN的空間不變性造成定位精度的下降：對于分割任務(wù)而言，由于pooling操作引起的分類器對輸入的空間變換具有不變性丟失空間信息，內(nèi)在的限制了分割的空間精度。



2.潛在的解決方法

FCN作為將CNN應(yīng)用于semantic segmentation的forerunner，貢獻(xiàn)巨大。但不可回避，其提出的方法具有一些不足。為保證卻終的feature map不至于過小，F(xiàn)CN的conv1引入pad=100，引入了較大的噪聲； 

32倍upsample(deconvolution)非常粗糙，而且deconvolution的filter不可學(xué)習(xí)； skip architecture雖能有效提高精度，但需要3次訓(xùn)練即FCN-32s->FCN-16s->FCN-8s。除skip architecture外。隨著研究的深入，針對以上挑戰(zhàn)，有以下幾種方法解決：



(1). Encoder-Decoder結(jié)構(gòu)

采用此種思想的代表為DeconvNet，SegNet，其基本思想是采用一種對稱結(jié)構(gòu)將由于pooling操作而減小的feature map通過逐步的upsample逐漸恢復(fù)到原圖像大小，同時在upsample階段，融合了subsample中pooling index，具體細(xì)節(jié)可參見原文。 





(2). Atrous convolution

feature map的減小是由于pooling造成的，為確保一定精度的feature map，能否不使用或減少使用pooling呢？理論上是可行的，但如果這樣做會使得需要優(yōu)化的參數(shù)過多，重要的是難以基于以前的model進(jìn)行fine-tuning，atrous convolution解決了這個問題。 

在DeepLab中令pool4,pool5的stride=1，再加上1 padding，這樣經(jīng)過pooling后feature map大小不變，但后層的感受野發(fā)生了變化，為使感受野不變，后面的卷積層使用atrous convolution，其作用是在不增加參數(shù)的前提下，增加感受野。因此，解決了feature map空間分辨率下降的問題。







(3). ASPP

針對不同scale下的目標(biāo)存在的狀況問題，可通過兩種方法解決： 

A.標(biāo)準(zhǔn)的多尺度處理方法，用共享相同參數(shù)的并行CNN的分支，從不同尺度的Input image中提取score map，然后進(jìn)行雙線性差值，最終對它們進(jìn)行融合，在不同尺度上獲得每個位置的最大響應(yīng)。訓(xùn)練和測試時均這樣處理，比較繁瑣的是需要計算輸入圖像的每個尺度在各layer上的特征響應(yīng)。 





B.基于任意尺度上的區(qū)域都可以用在這個單一尺度上重采樣卷積特征進(jìn)行有效地分類的思想，使用多個不同采樣率上的多個并行多空卷積，每個采樣率上提取的特征再用單獨的分支處理，融合生成最后的結(jié)果。











(4). FC-CRF

CRF幾乎可以用于所有的分割任務(wù)中圖像精度的提高。CNN可用于對圖像中的目標(biāo)進(jìn)行分類并預(yù)測出目標(biāo)的大致位置，但并不能真正描繪他們的邊界。因此，將DCNN的識別能力和全連接CRF優(yōu)化定位精度耦合在一起，能成功的處理定位挑戰(zhàn)問題，生成了的語義分割結(jié)果。全連接CRF理論較為復(fù)雜，在此不作闡述。類似的概率圖模型(PGM)還有MRF，G-CRF(高斯-條件隨機(jī)場)。







3.總結(jié)

目前，暫且先記錄以上4種提高分割精度的方法。后續(xù)若有新的方法，予以追加！

————————————————

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