在日常的設計工作中，我們也許會遇到這樣的情況：作品缺少變化導致枯燥乏味；而變化太多又會顯得雜亂、沒有章法；這就對應了設計中統一和打破的關系，那么為什么統一和打破這兩種看似矛盾的關系，卻總是能同時出現在我們的設計作品中？如何更好的理解二者之間的關系并運用到日常的工作中去？希望本期內容能對大家有所幫助。
在設計中統一并不是所有元素1:1的一模一樣，它可以體現在：板式、配色、元素屬性、處理手法等等，那么為什么要統一？統一的目的是什么？下面我們具體來說：
統一：讓作品更整體
作品不夠整體，會給人一種信息散亂、沒有視覺焦點的感受；而將視覺元素進行“統一”，就能很好的解決這一現象，這無關乎技法的熟練與否，在我們的日常生活中就隨處可見：比如：我們的書本排版，會有統一的頁眉、頁腳、段落留白、文字間距等等，其目的就有讓文本內容在視覺感受上更像一個整體；下面我們看個設計中的案例：
如圖所示，上側案例給人的感覺比較雜亂，不夠整體，原因在于：元素與元素之間的關聯性不強，且視覺形態及色彩屬性各不相同，導致整體各元素之間的呼應不夠明顯，所以會給人一種不夠整體甚至雜亂的感覺。而下側案例通過在形態、色彩、屬性等方面的統一化處理，加強了每個單獨視覺元素之間的呼應，使得畫面更整體！
統一：讓作品更整潔
不管是在設計工作還是日常生活中，干凈整潔的東西都是更易于大眾接受的，在設計工作中，做好統一是最重要的一環，在此前提下，才能做好另一環“打破”！所以當設計作品出現亂的現象時，我們需要對其視覺元素進行規整及相應的處理，比如：
通過左右對比我們發現，很明顯右側給人的感覺雜亂無章，而左側干凈整潔、有條理，原因在于：
①、元素與元素之間并不是相互孤立的，而是在視覺上存在著一定的呼應關系，相互關聯，這樣畫面整體性也會更強。
②、視覺上將原本各不相同的形態以及色彩重新進行了統一處理，目的是通過減少視覺元素形態及色彩變化而進一步提升畫面的整潔。
③、視覺元素在物理關系以及屬性上也做到了統一，即統一元素與元素之間的間隔、形態、顏色等等。
下面我們再看組案例：
上圖中，相比而言案例二比案例一給人的感覺更整潔、干凈、也更像一個整體，原因在于：案例二中配圖的屬性做到了視覺上的統一，具體體現在：①、圖片的顏色屬性：統一藍色色相屬性；②、圖片的內容屬性：統一高端、仰視角度建筑屬性；③、圖片的留白屬性：每一幅配圖在視覺上都會有一些留白性質的屬性，給人的感覺很舒服。
所以：出于讓整體更整潔的統一，大多是在做減法或者合并的過程，目的是減少一些造成視覺整體雜亂的因素，比如：色彩雜亂、圖形雜亂、文字形式雜亂、視角角度雜亂、以及過多無關聯的視覺元素等等，統一的過程也是整合視覺元素的過程。
注意：設計中的統一并不是絕對的，而是相對的，如果所有的視覺元素、屬性都嚴格按照統一化去處理，那么就會滋生另一個問題：整體視覺太過平滑、缺少變化甚至會給人一種單調、枯燥的感受。那么在強調統一的同時，“打破”就是為了解決這難題的。
在日常設計工作中，打破是建立在統一基礎之上的操作，那么既然已經做好了統一，為什么還要打破呢？打破能為作品帶來什么？下面我們具體分析：
打破：提升作品視覺層次感
當作品過于統一時，很容易會給人一種單調、乏味、缺少層次變化的視覺感受，而在統一的基礎上做一定的打破操作，就能起到很好的解決這一現象的作用，那么什么是打破？舉幾個簡單的例子：
如上圖所示，圖①就屬于過于統一的表現形式，很明顯整體平淡、乏味，缺少視覺變化；而其他都是在統一的基礎上做了一些“打破”的處理，只不過各自切入點不同，下面我們逐一分析：
圖②：切入點是打破了一成不變的排列形式。
圖③：切入點是打破了一成不變的配色形式。
圖④：切入點是打破了完全統一的配色形式以及形態。
圖⑤：切入點是打破了統一的元素屬性值。
圖⑥：切入點是打破了統一的元素屬性。
以上這些雖然切入點都各不相同，但是目的都是通過打破過于統一的視覺現象，增加整體視覺變化程度，從而提升整體視覺層次感，也打破了呆板、乏味，增添了一些視覺上的跳躍性。
下面我們再看個設計中的例子：
如圖所示，上側案例屬于很好的貫徹整體統一的理念，而下側案例則是打破了固有的統一、卻也保留了大部分統一的屬性，通過兩者對比我們發現，其實單只看這一組案例：兩種表現形式都是可取的，只不過相比而言下側案例給人的視覺感受變化更多、層次感更強，所以相比而言給人留下的視覺印象更深刻。
上面說兩種表現形式都可取的前提是：單單只看這組案例，但是很顯然這組案例只是頁面的局部，如果整體頁面都如上側案例那樣嚴格的按照統一進行，那么頁面整體就會過于平淡、缺少視覺層次感、甚至主次不分明。
打破：劃分視覺主次
在現實生活中，具有差異化的人或實物會很容易引起周圍人的注意，甚至印象深刻、難以忘懷。在設計中亦是如此！其具體表現形式參考上圖①-⑥，因為打破過于統一就是在營造具有差異化的視覺元素，從而會很容易在視覺上形成先后、主次之分，所以就起到了一定的劃分視覺主次的作用。
注意：打破也不可盲目的進行，過于統一會單調、乏味、重復感強；而過于追求差異化也會出現雜亂、沒有章法的視覺現象。所以一定要結合實際情況靈活運用。一幅作品中大多情況下：打破的次數要少于統一，即作品整體絕大不多保留整體統一的屬性，通過局部打破處理提升整體出彩度，這樣容易給人一種干凈、整潔且不失視覺變化、層次感的感受！
不妨找一些優秀的網頁分析一下，是否很多優秀的設計作品都符合這一規律？
綜上所述，統一是為了讓作品有視覺條理性、更整體，而打破則是增加視覺層次變化，讓作品更出彩！統一和打破看似是兩個矛盾的名詞，實則在設計中是相輔相成的作用！不管是統一還是打破，兩者的切入點都是相似的，一般體現在：形態、屬性、色彩、大小、位置關系、留白等等。但是無論如何統一都是打破的前提，如果作品整體性都不夠，再一味的追求打破關系，只會讓作品越做越亂。所以一定要先做好統一，其次才是進行打破、改變。當然文中提到的只是一部分，希望大家能活學活用、舉一反三！
文章來源：站酷
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
之前一直在做移動端的 UI 設計，在進入小米后，開始接觸電視端的 UI 設計，目前在負責小米電視商城。經過一個電視端項目后，自己做了一些關于電視 UI 的總結以及設計方法原則。電視 UI 算得上是一個偏冷門的界面設計，因為它的交互比較特殊，同時有一些限制，比如交互限制，焦點原則等等。以下就自己的項目經驗為電視 UI 設計原則做一個總結。
對于現在家庭智能電視而言，技術在不斷的進步，但是其飽和度和對比度有的還是很強，還會遇到大紅碰到大紫的色塊對比。但是信息變得簡約了，都是以 tab 導航為主，下面是幾個卡片信息瀑布流顯示。語音提示很重要，會隨著焦點的移動發出提示聲響，提示用戶電視焦點的移動狀態。
小米電視商城全新改版，在接到需求后，一定要模擬用戶來體驗一下購物流程還有用電視購物的環境，環境應該是固定的，那就是在家里。電視和手機購物體驗是不一樣的，電視是要用遙控器來控制，所以每一步的操作流程都很珍貴，如果界面跳轉太多，會給用戶一種煩躁的感覺，所以盡量同一層級的信息要在同一界面填寫完畢，避免二次跳轉。
第二點說的就是焦點問題，焦點不能層次不齊，跳動太大會引起視覺不適。以小米電視商城詳情為例，焦點盡量在同一水平線上，同行的焦點移動，視覺感受上會舒服很多。
智能電視的分辨率和大家平常在 app 看電影的時候差不多，如上圖所示，目前 1080p 最常見，2k 和 4k 基本都是資源類節目。設計尺寸以小米電視為例，通常做 1920*1080 的視覺稿就可以了，開發會適配比 1920*1080 小的電視屏幕，這樣下來，如果小分辨率的電視沒問題了，大的分辨率也就沒問題了。
我們知道在設計 app 的時候，都有左右間距的控制，移動端一般常見的控制在 28px 或者 32px，電視端因為是大屏設計，所以預留的空間也要大一些，基本左右留出 120px，上面留出 90px 就可以了。一般我設計的時候左右是固定的 120px，上面可以隨設計內容來自定義，90px 或者 100px，都是可以的，只要視覺舒服即可。
焦點在電視端 UI 設計里顯得尤為重要，因為它就是你的視覺焦點，焦點會隨著遙控器上下左右確認而改變。焦點的設計不能是扁平的，因為那樣不能夠提醒用戶焦點狀態的位置，焦點的設計應該是放大的、夸張的、可以帶邊框，也可以使用投影外發光的方式來設計，確保能夠給用戶足夠的清晰位置。
焦點放大我這里建議放大 1.1 倍或者 1.2 倍就可以了，再大就顯得過于大了。
如上圖所示，我在設計焦點的時候，就用了放大+外邊框的形式，這樣焦點移動起來可以讓用戶足夠看到位置所在。電視端的交互也是很簡單的，基本屬于十字交互，即自上而下，從左到右的交互方式。紅色剪頭屬于禁區，所有的電視交互，沒有斜 45 度的交互，這樣是錯誤的。
大家可以看到，在 app 里，常見的彈窗和浮窗可以壓蓋在可點擊功能上，比如美團的紅包，愛奇藝的一鍵關注，即使是這樣，也不會影響功能的正常使用。但是電視端的設計，如果兩個可點擊功能壓蓋在一起，焦點是無法獲取的，因為它沒法判斷你想要選的那個功能，所以在電視上，一定要將兩個功能分開來布局最為合適。
露出屏外的內容，和移動端設計是一樣的。如果有多個卡片內容，我們需要將露出屏外的那張卡片做一些邊界化處理，控制好間距，也就是說我們要將一個完整的卡片漏出來一些，讓用戶知道，后面還有內容；反之，用戶可能不知道后面還有內容，就不會按遙控器右鍵查看了。
電視端 UI 設計忌諱控件隱藏，比如上圖，如果有很多文字的時候，左邊的設計是錯誤的，因為隱藏了 button 按鈕。改為右邊的設計是比較好的，我們可以選擇焦點選中文字給一個彈窗狀態或者其它，將 button 功能位露出來，如果一個界面可選功能位較少，我們設計的時候盡量在第一屏展示。如果實在不行，可以選擇吸底吸邊來設計。
顏色的選擇運用是重中之重，因為這個會直接影響到用戶的視覺體驗。因為用戶環境大多數是晚上的時候回去看電視，分開燈和關燈的情況，開燈的情況其實還好。如果關燈，顏色太刺眼的話，飽和度較高的顏色會直接影響到眼睛，這個危害是很大的，而且不一樣顏色的色塊，會增加用戶的視覺負擔，這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。
電視 UI 設計中，白色謹慎使用。因為白色過多實在是太刺眼了，我們可以選中較為灰一些的接近白色的顏色來代替。
背景的運用這里也建議使用深色的背景，原因和上述講的一樣，還有一個就是深色背景可以更好地襯托出界面的主要內容。反之如果用淺色的背景，有的卡片如果需求方要求設計成淺色，那么這樣淺色的背景+淺色的卡片疊在一起，主要內容就特別難區分了。
我們在設計電視端 UI 的時候，要真實的先去體驗一下特殊的場景，電視端每個 tab 是一個頻道，每個頻道的設計風格也是不同的，比如少兒頻道，購物頻道和電影電視劇頻道，設計風格肯定不同，體驗模擬流程可以讓我們更快地了解電視特性。
字體的選擇默認思源黑體，因為這個字體是開源字體，可以免費使用，沒有版權之分，以上列入的字體是小米電視商城改版的字號，具體的字體和間距可以根據自己的設計需求變化。
關于字體的選擇，當然你也可以選用其它字體，或者一些特殊字體，好看的字體，但是這樣的話，字體包應該會很大，會影響一些加載速度。
字體顏色的選擇盡量用白色或者亮色，深色背景上選用白色是最好的，這樣更易于閱讀。
字體的粗細大小，這里標題建議加粗選擇，其余選擇常規字體就好，避免太粗或者太細的字體。
電視的設計只是其中的一部分，未來我們的電視可能比現在的體驗更加好，比如會出現實景商城，單一的圖片形式已經不能滿足我們對購物的需求，一些視頻類，動效類的體驗會更加合適。想讓電視擁有好的體驗并不是一件簡單的事情，想必大家已經從諸多「電視盒子」上體驗到了這一點。我們曾經熟悉的電視已經發生改變，而我們適應的手機、平板和電腦和新的電視還有著巨大的差別，我們需要忘掉之前熟悉的模式，未來五年、十年、甚至更久。電視、電燈、冰箱洗衣機等智能家具的體驗，正是我們設計師需要在未來幾年所做的事情，這很重要。
小米電視商城全新改版是我接觸的第一個電視端 UI 設計項目，第一期的優化還有很多不足，根據項目經驗總結了上面的規范。以上的基本設計規范掌握后，那么做電視 UI 基本問題不大，大的錯誤肯定不會有了，但是每個公司的設計規范肯定也有所差別。電視端的設計是個偏冷門的 UI 設計，多掌握一些另類項目經驗也是設計師必備的技能。
文章來源：優設網
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
小小開關中的大學問
故事要從我搬到新出租屋開始講起。半年前搬到新的出租屋后，房間里配置的洗衣機也比之前的大了一倍，而且操作區上分布著的密密麻麻的文字和按鈕讓洗衣機看起來更高級了，然而這種對它的好感并沒有持續多久。在我第一次使用它時，我將衣物放進洗衣機后，選擇好時間和洗滌方式，按下了啟動按鈕（如下圖右側白色按鈕）。
按下后洗衣機發出了“滴”的一聲，在我的認知里它應該是開始工作了，但是10秒過后沒有任何抽水聲和洗衣服的聲音。我疑惑地想：“是不是剛才并沒有成功啟動？”，于是再次按下了啟動按鈕，又是“滴”的一聲，但是這次我等了 1 分鐘沒有任何反應。之后的十分鐘里，我與這臺匪夷所思的機器“交涉”多次才理解了它的運行方式。這臺洗衣機啟動后需要等待大概十幾秒才開始運行，但是在我按下啟動按鈕后我得不到任何反饋或者提示來告訴我洗衣機已經開始工作了，所以疑惑的我又按下了一次啟動按鈕，然而令人崩潰的是這臺洗衣機的啟動和暫停按鈕是一體的，我第二次按下實際是進行了暫停操作，從而導致我第二次的困惑。
如果你是這臺洗衣機的設計師，你會怎么解決上述的問題呢？
可能你的心中已經有了答案，在回答之前我們先試著探究問題的本質。
人們不管是使用日常物品還是與機器進行交互，都會面對兩個階段的問題。一個是「執行」，一個是「評估」。執行時用戶需要理解如何操作，操作后可能會有什么結果。評估時用戶需要知道具體發生了什么。作為設計師我們要通過合理的手段幫助用戶解決這些問題，保證交互的可用性和流暢性。
通常我們會使用「意符」在用戶執行前告知用戶如何理解、如何操作、操作后會有什么結果。在評估前通過「反饋」告知用戶結果是什么。
對于意符的定義，在《設計心理學 1-日常的設計》一書中，作者唐納德·諾曼做出了這樣的解釋：
人們需要某種方式了解他們將要使用的產品或服務，某些標識表明的用途，會發生什么，有什么樣的替代方案。人們尋找蛛絲馬跡，尋找任何可以幫助他們應對和理解的符號。任何可能標識出有意義的信息的符號非常重要。設計師需要提供這些線索。人們所需要的和設計師必須提供的，就是意符。除此之外，優良的設計要求對產品的目的、結構和設備的操作與使用者進行良好的交代。那就是意符的作用。
簡而言之，意符就是在用戶使用前，機器為了讓用戶更好地理解和使用它而做出的提示。而反饋就更好理解了，機器在我們操作后做出的反應就是反饋，沒有反應同樣也是一種反饋。
下圖展示了機器與用戶如何進行交互。一個合理的設計可以讓用戶快速順暢地進行 1234 四個步驟進而完成任務，而糟糕的設計會讓用戶不斷重復這個流程。之所以會出現糟糕的設計，就是因為在步驟 1 和 3 沒有進行合理的意符提示和反饋提示讓用戶摸不著頭腦，進而導致用戶根據自己的猜測和過往經驗來進行操作，最后得到非預期的結果。
回到文章開始時的洗衣機開關問題，因為開始和暫停按鈕是一體的，在沒有任何意符和反饋的情況下我按下這個按鈕時我并不知道我啟動的是開始操作還是暫停操作。
我們可以就這個問題列出以下解決方案：
1.增加文字提示，如啟動時在顯示屏上顯示“已啟動”，暫停時顯示“已暫?！保?/span>
2.增加語音提示，啟動開關后使用語音告知用戶“已啟動”或“已暫停”。
當然解決方案有很多，每個人都可以根據場景想出不同的解決方案。
與現實機器的開關類似，在 UI 設計中我們如果進行開關設計也需要遵循相應的設計原則。
一個合理的開關設計主體包含的意符分別有兩種：
1.表示當前狀態；
2.表示操作后的狀態。
主體之外我們還可以添加輔助提示更加清晰地傳達意符和反饋。
接下來將介紹一些常見的開關類型和輔助提示類型，最后總結出體驗優質的開關設計方法。
二.開關類型
1.icon
在 UI 設計中最常見的開關可能就是 icon 了，即由單一的 icon 通過顏色或圖形的變化來表示開或關的狀態。因為交互設計從古到今并沒有統一的嚴格標準，所以到底是將開關 icon 的樣式設計為「當前狀態樣式」還是設計為「按下之后的狀態樣式」并沒有一個約定俗成的規則。然而，對比而言如今各類 App 設計中常見的且體驗比較好的方案還是將開關樣式設計為當前狀態樣式。如下圖iPhone自帶相機的實況照片開關icon就是顯示當前狀態。
然而，并不是說將開關樣式設計為當前狀態樣式做法普遍且體驗更好就可以這樣做了，有些開關的設計因為使用廣泛，已經在用戶的心智中扎根，我們如果強行改變反而適得其反導致體驗變差。最典型的就是視頻和音樂的播放暫停開關，他們表示的就是操作后的狀態而不是當前狀態，如下圖。
因此，大部分應用的開關類 icon 都是混用當前狀態和操作后狀態的，如下圖嗶哩嗶哩的視頻播放界面，播放暫停開關 icon 表示的是操作后狀態，彈幕開關表示的是當前狀態，而視頻鎖開關 icon 又變成了表示操作后狀態了。
是否統一倒不是關鍵，關鍵是我們是否能夠讓用戶理解相應的意符和反饋，目標是讓用戶在操作開關前能夠知道當前狀態是什么，操作開關后當前狀態是什么。
舉一個反例，下圖中的美顏相機的夜拍模式開關就沒有直觀表現出當前是開還是關，這種有歧義的設計可能讓新手用戶手足無措，可能本來未開啟的功能讓用戶誤以為已開啟，導致拍出來的照片不符合用戶預期。
由此我們可以看出，單一的 icon 開關如果沒有其他的輔助提示會造成意符和反饋的缺失，進而形成較大的歧義性，用戶會在疑惑中按照自己固有的心理模型和過往經驗進行判斷，體驗因此降低。
2.主體與開關分離（分離式）
上一部分舉了美顏相機的反例，其意符和反饋不明產生的歧義問題導致了用戶的困惑，但使用「主體與開關分離」（后文一致簡稱為“分離式”）的開關設計可以解決這個問題，它在意符和反饋層面都給予了用戶提示，可視性很強，完全解決了開關狀態無法被用戶感知的問題。分離式開關指的是，主體不再充當開關，只當做開關的名稱或icon，另外制作一個開關傳達意符和反饋，解決了當前狀態與操作后狀態混淆的問題，其通常的樣式如下圖。
如下圖，Faceu激萌不同于美顏相機設計方式就是將主體與開關分離，很清晰地傳達了當前開關狀態。
大部分App的設置頁面使用的開關都是主體與開關分離的方式，如下圖。
顯而易見，分離式開關直觀展示了當前狀態，在消除歧義方面優于 icon 開關，但同時缺點也很明顯，它占用了過多頁面空間并美感欠佳。
3.名稱變化
名稱變化指的是開關依賴于其名稱的變化告知用戶開關的當前狀態和操作，常見的類型如下：
部分 App 會將開關的名稱變化的方式統一，但也有部分 App 會將這兩類進行混用，即一個是表示當前狀態，一個是表示操作。
下圖為部分 App 的名稱開關，我們可以將上圖的開關名稱類型的序號對號入座。
表示操作的按鈕文字具有一定引導性，用戶容易感知和觸發，反之，表示狀態的按鈕文字由于不具有引導性，如果用戶沒有對這類按鈕形成使用習慣甚至難以意識到它是可點擊的，因此我們可以利用其特性進行逆向應用引導用戶的行為。比如在直播App中，我們希望引導用戶關注主播，又試圖避免用戶關注后又取關主播。我們就可以將“關注”制作為表示操作，文案寫為“關注主播”（屬于1.開啟...）。將“取消關注”制作為表示當前狀態，文案寫為“已關注”（屬于7.已開啟...）。前后的顏色進行區分，“關注主播”的按鈕制作得對比度強，吸引力大，“已關注”做得弱一些，讓用戶誤以為不可點擊，如下圖的斗魚直播。
然而，名稱變化的開關由于語言的模糊性，仍然造成了部分歧義。我們可以發現很多App的名稱變化開關設計中，都會在操作后加入其它提示來消除歧義（如：toast 提示），有些App則并未加入，因此在后文中會著重介紹輔助提示的優點和使用方法。
小結
icon、分離式、名稱變化，如果按照消除歧義的優劣排列的話，大概是 分離式>名稱變化>icon。
那這樣的話是不是應該把開關都換成分離式呢？當然不是，分離式雖然在意符和反饋的層面很充分地消除了歧義，但是其也有明顯的缺點，分離出的開關會占用部分空間，可能會影響美觀，因此我們需要根據需求和頁面結構選擇最適合的開關類型。
那名稱變化和 icon 類的開關如何消除歧義呢，我們可以通過添加下面介紹的輔助提示來解決。
三.輔助提示
1.環境暗示
環境暗示指的是用戶在操作開關前，開關以外的區域給予用戶的提示，這些提示本身存在于交互流程中并不是我們刻意加入的，用戶根據這些提示可以判斷當前狀態以及按下開關后的狀態。
例如在觀看視頻時，當用戶去按下視頻播放按鈕前，用戶會通過當前圖像靜止與無聲音這個環境暗示明白當前狀態是可能是視頻未播放，所以應該按下播放按鈕讓視頻播放。
再比如得到 App 的夜間模式，用戶可以通過當前界面的樣式判斷當前是否已經開啟了夜間模式，如下圖。
看下圖，如果沒有環境暗示，你能分清得到的夜間模式的開關哪個當前狀態是夜間哪個當前狀態是日間嗎？
因此，環境暗示的優勢是我們不需要進行另外設計其他的意符和反饋告知用戶當前狀態，環境給予的暗示已經足夠直觀。
2.模態/非模態提示
當用戶按下開關后模態和非模態提示可以在反饋層面告知用戶，讓用戶知道自己是觸發了開啟還是關閉。
常見的模態提示控件是「警告框（Alerts）」，非模態提示控件是「提示框（Toast）」，前者提示強度大，使用在一些危險、重要的反饋中，后者則使用在一些輕量的提示中。
介紹 icon 開關的部分我們提到了美顏相機的夜拍模式的 icon 開關狀態難以區分，但美圖秀秀在這里使用了頂部的非模態提示在反饋層面告知用戶當前狀態，很好地解決了這個問題，如下圖。
拉勾網的設置中，隱藏簡歷為危險操作，用戶極有可能由于開關名稱的歧義或由于疏忽觸發開關導致簡歷被隱藏從而錯過工作機會，因此此處設計了一個形式為警告框的模態提示來告知用戶當前狀態以及潛在風險。
3.輔助文案
輔助文案指的是在主體（主體可能是開關名稱、icon 或二者皆有之）之外另外放置一些文案信息來充當意符和反饋。下圖案例就是高德地圖的下車提示的開關，開關的主體是名稱，但是下面的一行輔助文案很清晰地傳達了當前的開關是什么狀態。
4.其他輔助提示
并不是所有提示都需要讓用戶看見，我們可以給予用戶其他感官的信號告知用戶當前開關的狀態。
在現實生活中，我們會通過鑰匙在鎖中扭動發出的聲音判斷鎖是否被打開，通過觸摸感受摩托車是否繼續震動判斷其是否已經熄火。
同樣，在 UI 設計中，我們也仍然可以使用聽覺和觸覺來消除開關的歧義。一個比較優秀的案例是高德地圖，當用戶打開下車提示之后，會出現語音提示“已開啟下車提醒”，它充分考慮到身處戶外的用戶可能并不能很方便地獲取屏幕上的視覺信息，因此使用語音的形式提示用戶。
小結
輔助提示很好地補充了開關在消除歧義上的不足，但我們需要合理使用否則就會產生不必要的視覺噪聲。如下圖，試想音樂的暫停播放開關如果加入的 toast 提示會怎么樣呢？由于我們已經可以通過“手機是否發出聲音”這個環境暗示獲知當前的開關狀態，如果再加入 toast 提示必然會出現不必要的視覺噪聲。
4.總結
介紹完開關類型和輔助提示后，我們如何將其應用到我們的產品中，設計出無歧義或低歧義的開關呢？
如果我們選擇的開關類型已經足夠的消除歧義，如分離式，我們就不太需要額外地增加輔助提示了。但是如果使用容易造成歧義的開關，我們可以按照（開關類型+輔助提示 1 +輔助提示 2 +......）的公式進行設計，即一種輔助提示不足夠消除歧義，可以使用多種一起。
舉個上文的例子，高德地圖的下車提醒開關的設計就是「名稱變化開關+輔助文案+語音提示」 的組合。
然而，任何設計都不是完美的，很多地方都需要我們做出妥協，雖然我們可以選擇合適的開關類型和輔助提示解決歧義問題，但隨之而來就可能出現其他問題。如分離式開關消除歧義效果很好，但是占用空間且不美觀，模態和非模態提示給予用戶的反饋比較強，但是可能打擾到用戶。
綜合上文提到的三款相機軟件作為案例，如下圖，我們可以發現在消除歧義的過程中避免不了對用戶造成的干擾或頁面美觀度的降低。我們很難去評判Faceu激萌、美顏相機和美圖秀秀哪個設計得更好，它們只是在易用性和美觀性之間找到了它們所認為的平衡點。具體如何設計，還是要具體問題具體分析。
那么我們應該如何進行取舍呢，在這里我們要考慮另外的因素。我們可以從以下角度分析，使用頻率、用戶人群、潛在風險等。
使用頻率：使用頻率越高，用戶對操作的熟悉度越高，歧義對用戶造成的理解與記憶成本就降低了，設計可以偏向低干擾和美觀度，反之使用頻率越低，歧義對用戶造成的理解與記憶成本升高，設計就應該偏向于易理解。
用戶人群：不同的用戶人群的風格偏好、認知能力是不一樣的。例如，我們要設計一款目標用戶為年輕人的相機產品，設計風格簡約，此時我們比較偏向的設計方案可能就類似美顏相機。反之，如果我們的目標用戶是中老年人，就要偏向于易用而犧牲美觀度，方案轉而偏向美圖秀秀或 Faceu 激萌。
潛在風險：開關的切換如果會導致潛在風險，設計就應該偏向于易理解，且需要使用模態提示告知用戶風險。例如用戶如果關閉了推送通知開關，會導致接收不到實時重要的信息通知，此時不僅要使用易識別的開關類型，還需要添加模態提示告知用戶風險。
我們可以將這些考慮角度放到雷達圖，如下圖所示，最終形成的面積越大我們越應該將按鈕制作得易理解、易使用，反之我們可以偏向于將開關制作得更美觀犧牲一些易用性?？紤]到一些特殊產品的特殊用戶屬性，我們可以在下圖中增加其他考慮角度，其并不是一成不變的。
以上是本次對開關設計的思考，看似小小的一個開關，包含的學問卻不勝枚舉。作為一個互聯網產品設計從業者，一定要善于感受生活，用設計師細膩的內心去打量、洞察身邊的一切事物，發現美與不足，思考改進方法，并在這個過程中逐漸提升自我的價值。
轉自：站酷-Ballen貝林
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在產品交互設計中，
有些交互邏輯會“故意”讓選擇用戶多走一步，
（在不影響用戶體驗情況下）
而這次，我在體驗這些產品當中，獲取的一些思考分享給大家。
我們就來聊聊有哪些是多讓我們做一步而讓產品更加升華的一些APP吧！
文中涉及到的理論包括：
我們常能聽到以上的十大原則之中的著名設計理論，
但可能還是不太清晰是什么意思
而這篇文章將會實際分析
涉及到的原則知識我將會在案例中分析講解～
--------------------------------------我是分割線------------------------------------
以下是實例分析：
「中級用戶的數量遠高于初級和高級用戶數。為大多數用戶設計，
不要低估，也不可輕視，保持靈活?！?
（收藏后選擇歌單方便一步）
在網易云的歌曲收藏功能里，點擊收藏需要再次選擇你想放入的歌單才能收藏成功。相比于淘寶的點擊收藏立馬收藏成功，這樣的做法明顯是網易云多了一步，而個人觀點分析這樣做的是因為（網易云重度用戶）：
1.功能性來說：
歌單是早期網易云誕生的重要和特色功能
2.行為路徑來說：
減少用戶后期創建新歌單過程中 還要去重新收集歌曲，從而更容易定位快速創建自己的個人歌單
（歌單做分類 同時網易云歌單作為分享也占很大一部分）
總結來說：網易云是一個主打評論和歌單的音樂社區軟件，先選擇歌單多一步步驟，讓用戶后面聽自己的歌單更為清晰的知道分類，也同時活躍于創建歌單的樂趣當中，讓用戶停留的時間越長，產品也就得到了一部份價值，從而增加了用戶的粘性。這樣就是“多一步”的特別之處。
（表單信息更便利一步）
愛彼迎在用戶注冊信息的時候，會把收集的資料分多次進行輸入。
這樣的設計解決了用戶面對長篇表單填寫的心理壓力，同時告知余下的頁面數，讓用戶心理存在預期考慮。
將復雜的表單分成若干步，并引導用戶如何操作，并提示余下操作的步驟。一個這樣的舉動，不光是分段優化了表單的填寫步驟的一小步，同時讓新用戶更輕松注冊，提升了用戶的注冊轉化率的一大步。
目前近幾年大部分應用的退出賬號功能是做的比較隱藏（點擊設置icon-最下方才能退出）
相比于早些年app在個人中心里最下方直接會出現退出登錄
近年來隱藏二級或三級頁面下的做法是在太普遍
而大概分析了如下App的的做法
小紅書個人中心界面設置除去頂部個人信息展示
另外就是側重筆記功能-收藏功能-贊過功能
因為這三個功能方便了用戶能快速找到自己的收藏從而閱讀或者自己發布，而設置功能僅用一個icon去代表，而整體布局就摒棄了傳統的功能設置列表那樣，更突出了產品功能側重點，也迎合了產品的業務發展。
淘寶的個人中心頁面就十分大體量了 里面涵蓋了諸多產品功能 一個很完備的生態系統 ，隱藏在二級的功能設置順應了產品的向上的全面發展軌跡，設置功能（退出等）就屬于一個超低頻率的觸發事件了。節約了界面的展示成本。
而存在較為直接展示退出賬號的App嗎？
答案肯定是有的～
此類應用首先功能比較單一，
就先拿qq安全中心來說，它是屬于一個賬戶保護監管的應用，而為什么不把設置隱藏在更深的頁面呢？
如圖所示就大概看的出來，產品功能較為單一，再去添加一個設置功能二級入口就顯得冗余了，且對于用戶擁有多個賬戶 退出切換功能就比較重要了。
Appstore也是如此 垂直于App的應用商店，在個人設置上功能較少，也是較為直觀的放在底部。
印象筆記的退出登錄其實比較迷了 在個人中心界面放的猶為突出，而底部的現在同步功能我覺得在同類筆記中是較為重要。而這樣本末倒置了，就是一個大的謎了。
--------------------------------------我是分割線------------------------------------
「比出現錯誤信息提示更好的是更用心的設計防止這類問題發生。在用戶選擇動作發生之前，就要防止用戶容易混淆或者錯誤的選擇」
（增加雙重驗證一步）
拿招商銀行推出的掌上生活App來說，在用戶每次重新打開的同時都需要重新驗證身份（各類平臺存在 Face ID 手勢密碼 登錄密碼等），而你在付款或者交易的過程中，需要再次密碼驗證， 這樣每次都多一步交互動作，其實都是為了更加安全的保障用戶的個人財產，同時也突出了產品的安全性和可靠性。
那為啥QQ 微信每次不這樣呢？（常用設備環境下）
微信qq雖然也有鎖定功能，但考慮用戶使用打開頻率較高，所以只在支付層面上保護驗證密碼。
（增加確認刪除一步）
微信聊天列表的滑動刪除在一次點擊后會繼續顯示“確認刪除”按鈕，其實也是二次保障讓用戶有一個心理預期，效果其實和大部分APP彈窗顯示刪除一樣。
而淘寶收藏列表的商品側滑刪除點擊就立馬刪除，由于沒有提示“確認字樣”，對于很少用該功能的用戶來說，會帶來一種不符合預期的想法。
當然淘寶和微信區分做法認為考慮的是 ：
淘寶：讓用戶能夠快速刪除該商品，不需要造成不必要的二次確認，浪費時間。
微信：刪除的是聊天記錄，是不可逆的操作，聊天記錄對用戶價值比較大，而淘寶的商品是可以繼續收藏回來，就比重來看的話，兩個刪除操作其實大有不同。
（增加提示一步）
在大部分視頻App中，當在無WIFI環境下的4g網絡連接下，播放視頻過程中會顯示當前視頻為流量播放單中，是否繼續使用流量播放下去，這樣一個小提示，避免了用戶因為WiFi斷開導致產生大量流量費用。
--------------------------------------我是分割線------------------------------------
「盡量減少用戶對操作目標的記憶負荷，動作和選項都應該是可見的。用戶不必記住一個頁面到另一個頁面的信息。系統的使用說明應該是可見的或者是容易獲取的。這也說了交互的一部分，比如填完表單，下一步應該生成表單，而不是下一步就是完成。」
（增加表單全部展示一步）
在最近新出的淘寶人生賬單中，會展示出自己消費的數據，
并在分享之前再次確認信息的完整度。這里為什么要需要最后展示一步呢？
而 同等邏輯下網易云音樂2018年度報告，
沒在最后展示所有分析數據，我們是否質疑沒做到很優秀呢？
其實不然，首先網易云音樂的報告長度很長，放在最后面會導致長圖分享，沒有單頁面展示效果好，也照顧到了大量數據長圖表單分享的復雜性。
1.并且我們目前大部分年輕人分享某個頁面的時候， 慣用的操作是立馬截圖，
而網易云音樂做到了每個頁面都放置了當前的二維碼 從而做到識別二維碼快速分享，
也能讓用戶快速打開自己的年度報告。
2.心理層面深度分析下：部分數據的內容，其實用戶不太想分享，如果網易云做了最后的長圖分享，其實會讓部分用戶不愿意分享自己的某些不想讓別人知道的私密歌曲或其他。造成多余的用戶操作（裁切或者隱藏）給部分用戶帶來不便。
展示完表單數據，下一步生成對應表單，讓用戶有意識性的能再次確認內容，從而分享轉發，而不是盲目的完成，造成用戶的上一頁查看產生困擾。
的做法，由于數據的復雜性和多樣性，聰明的以現在的用戶操作行為和心理研究等，每頁嵌入二維碼，做到了更發散思維的方法拓展。
（增加5秒跳過廣告一步）
youtobe的廣告是業內運營的比較好的例子，他的好在于，在一段30秒的廣告當中，讓用戶可以選擇5秒后跳過此廣告，但為什么要讓用戶不看完廣告就可以跳過呢？這不就讓廣告沒有價值了？
其實不然，youtobe也分析了用戶的等待廣告行為，在投放youtobe的30秒廣告當中，5秒的廣告，會讓用戶會更有耐心看完，因為時間短，用戶愿意等待，而不是用戶去上個洗手間，去冰箱拿個汽水之類的行為，用戶會更加專注于5秒的廣告當中，而廣告投放商們，他們會更加把5秒的視頻內容做的更加突出重點，短短5秒就呈現出該廣告的優勢所在，從而用戶會激發點擊欲望，從而達到商業價值。這里的產品增加跳過廣告一步，其實蘊含的價值，推廣遠比完整30秒的廣告更加優秀。
--------------------------------------我是分割線------------------------------------
轉自：站酷-tronyoung
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
介紹表單設計里經常會犯的錯誤~
無論是注冊流程，還是信息輸入的界面，表單都是產品設計里最重要的組件之一。本文重點介紹了表單設計里常見的注意事項。不過這些只是通用的規則，實際應用中總有例外~
少于6個選項的情況，建議全部顯示
把選項內容放在下拉框里，不僅隱藏了選項內容，而且需要兩次點擊。如果大于5個選項，建議用輸入選擇器，如果超過25個選項，建議加上搜索功能~
輸入框長度可以暗示內容長度
輸入內容的長度決定了輸入框的長度。這種做法適合應用在一些固定長度信息的情況，比如銀行卡號、電話號碼、郵政編碼等。
標簽頂部對齊
相比左對齊，標簽頂部對齊的表單用戶完成率更高。移動設備屏幕大小有限，頂部對齊的效果也更好（標簽文案長度不可控）。然而在大量數據輸入時，還是可以考慮左對齊標簽，因為瀏覽更，還能節省高度。
不要把占位符當做標簽
用戶在輸入的時候就會看不到標簽內容是什么了。詳見Nielsen Norman團隊的總結。
*也可以參考Google的做法，默認把占位符當作標簽，輸入時標簽移動到輸入框上方
將復選框/單選框上下排列
上下排列方便瀏覽閱讀，橫向排列選項內容會被選框控件隔開。
指出錯誤在哪
告訴用戶具體哪里出錯了，以及錯誤的原因。
等用戶填完了再進行驗證
不要在用戶正在輸入的時候就去驗證，除非這能幫到他。例如在創建一個有字數限制的密碼～
不要隱藏幫助信息
盡量默認顯示幫助信息。如果信息太復雜，考慮在輸入時放在輸入框的旁邊。
不要用*星號表示必填項，標出選填字段
用戶不一定知道星號代表什么含義。還不如明確的標出哪些是選填字段。
標簽和輸入框成組
標簽和對應的輸入框形成一組，他們之間的間距要比組與組之間的間距小，這樣用戶不會困惑標簽是屬于上面還是下面。
按鈕的文案描述具體意圖
比如按鈕上的文字建議寫“注冊”，而不是“提交”。
主次按鈕有層次區分
關系近的內容成組
太長的表單讓用戶感到不知所措。有邏輯地分組能讓用戶更快地理解表單。
轉自：站酷-大秘密mimi
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
在我們開發的過程中，應該始終考慮性能。而本文列舉了有效提高系統性能的12個方法，如果朋友們有更多的技巧請在吳小迪的博客下方評論，謝謝。
性能是創建網頁或應用程序時最重要的一個方面。沒有人想要應用程序崩潰或者網頁無法加載，或者用戶的等待時間很長。根據Kissmetrics，47%的訪問者希望網站在不到2秒的時間內加載，如果加載過程需要3秒以上，則在40%的訪問者會離開網站。
考慮到以上這些數字，你在創建Web應用程序時應始終考慮性能。為了幫助你開始，以下提供了有效提高應用程序性能的12種方法：
一：在瀏覽器中緩存
要這樣做有倆種選擇。第一種是使用JavaScript Cache API，我們可以安裝service worker來使用它。第二種是使用HTTP協議緩存。
訪問某個對象通常要用腳本。通過把重復訪問的對象存儲在用戶定義的變量中，以及在后續對該對象的引用中使用變量，可以立即實現性能的提升。
二：定義執行的上下文
為了有效地衡量你在程序中加入的任何改進，你必須創建一組定義良好的環境，以便測試代碼性能。
對所有JavaScript引擎的所有版本進行性能測試和優化實際上是不可行的。但是，在單一的環境中進行測試并非一個好習慣，因為你可能會得到片面的結果。因此，建立多個定義良好的環境并測試代碼是否有效非常重要。
三：刪除未使用的JavaScript
此步驟不僅會縮短傳輸時間，還會縮短瀏覽器分析和編譯代碼所需的時間。為此，你必須考慮以下幾點：
如果你檢測到一個用戶未使用的功能，最好刪除所有與之相關的JavaScript代碼，這樣網站的加載速度會更快，用戶也有更好的體驗。
還有可能，你錯誤地加入了一個并不需要的庫，或者你有依賴項，這些依賴項提供的功能在所有瀏覽器中原本就有，那么你無需再增加多余的代碼。
四：避免使用太多內存
你應該始終給內存加一條限制，那就是只有絕對必須的內容才能使用內存，因為你無法知道運行應用程序的設備到底需要多少內存。只要你的代碼要求瀏覽器保留新的內存，瀏覽器的垃圾收集器就會被執行，并停止JavaScript的運行。如果經常發生這種情況，頁面將變慢。
五：推遲不必要的JS加載
用戶希望頁面快速加載，但并非所有函數都需要在頁面的初始加載時就可用。如果用戶必須執行某個操作才能執行某個函數（例如，通過單擊某個元素或更改選項卡），那么你可以將該函數的加載推遲到初始頁面加載之后。
通過這種方式，你可以避免加載和編譯那些會延遲頁面初始顯示的 JavaScript 代碼。頁面完全加載后，我們可以再開始加載這些功能，以便它們在用戶開始交互時立即可用。在 RAIL 模型中，Google 建議將此延遲加載以 50 毫秒為單位進行，這樣就不會影響用戶與頁面的交互。
六：避免內存泄漏
如果內存正在泄漏，則加載的頁面將保留越來越多的內存，并最終占用設備的所有可用內存并嚴重影響性能。你可能見過此類故障（并且可能對此類故障感到懊惱），例如在帶有輪播或圖像滑動條的頁面上。
在 Chrome 開發者工具中，你可以通過在“性能”標簽中記錄時間線來分析你的網站是否存在內存泄漏。通常，內存泄漏的原因是，你從頁面中刪除了 DOM，但有一些變量還在引用這些 DOM，因此，垃圾收集器無法消除它們。
七：適當的使用Web worker
當你執行耗時很長的代碼時，請使用 Web worker。根據 Mozilla 開發人員網絡 (MDN) 文檔：“Web Worker 可以在與 Web 應用程序的主執行線程分開的后臺線程中運行腳本操作。這樣做的好處是你可以在一個單獨的線程中執行耗時又費力的的處理，同時讓主（通常為 UI）線程運行而不被阻塞或減慢?！?br />
Web worker 允許代碼執行處理器密集型計算，而不阻塞用戶界面線程。Web Worker 允許你生成新線程并將工作委托給這些線程以獲得的性能。這樣，通常會阻礙其他任務且需要長時間運行的任務將被傳遞給 worker，從而讓主線程可以在無阻礙的情況下運行。
八：適當將DOM元素保存在局部變量中
訪問 DOM 會很慢。如果要多次讀取某元素的內容，最好將其保存在局部變量中。但記住重要的是，如果稍后你會刪除 DOM 的值，則應將變量設置為“null”，不然會導致內存泄漏。
九：優先訪問局部變量
JavaScript 首先搜索以查看變量是否存在于本地，然后才在更高級別的作用域內逐步搜索到全局變量為止。將變量保存在本地作用域內能讓 JavaScript 更快地訪問它們。
局部變量是基于最具體的作用域的，并且可能會穿過多個級別的作用域，因此查找這一動作可能導致出現通用的查詢。在一個它前面沒有變量聲明的局部變量中定義函數作用域時，需要在每個變量之前加上 let 或 const，以便定義當前作用域，防止查找并加速代碼執行。
十：避免使用全局變量
因為腳本引擎在從函數或其他作用域內引用全局變量時需要逐一查看作用域，所以當本地作用域丟失時，該變量將被銷毀。如果全局作用域中的變量無法在腳本的生命周期內持續存在，則性能將得到改善。
十一：實施一些優化方案
始終使用計算復雜度的算法和最佳的數據結構來解決任務。
重寫算法以獲得相同的結果和更少的計算。
避免遞歸調用。
給重復的函數加入變量、計算和調用。
分解和簡化數學公式。
使用搜索數組：用它們來獲取基于另一個的值，而不是使用 switch/case 語句。
使條件總是更有可能為真，以更好地利用處理器的推測執行。
如果可以，請使用位級運算符替換某些操作，因為這些運算符的處理周期較短。
十二：使用工具檢測問題
Lighthouse 是一個很好的網頁性能工具，它可以幫助你審核性能、可訪問性、最佳實踐和 SEO。谷歌 PageSpeed 旨在幫助開發人員了解網站的性能優化和潛在可改進的方面。這些組件旨在識別網站是否符合 Google Web 性能最佳實踐，以及將調整過程自動化。
在 Chrome 中，你還可以使用主菜單中的“更多工具”選項來查看每個選項卡使用的內存和 CPU。對于更高級的分析，你可以使用 Firefox 或 Chrome 中的開發人員工具“性能”視圖來分析不同的指標，例如：
devtools 的性能分析允許你在加載頁面時模擬 CPU 消耗、網絡和其他指標，以便識別和修復問題。
為了更深入地了解，建議你使用 JavaScript Navigation Timing API，它允許你詳細測量代碼的每個部分從編程本身中獲取的內容。
對于基于 Node.js 構建的應用程序，NodeSource Platform 也是一種非常好、影響低的方式，它可以在非常精細的級別上探索應用程序性能。
全面的 Node.js 指標可幫助你識別內存泄漏源或其他性能問題，并更快地解決這些問題。
最后的說明在代碼的可讀性和優化之間保持平衡很重要。代碼由計算機解釋，但我們需要確保代碼將來可以由我們自己或其他人維護，因此它們需要易于理解。
請記住：應始終考慮性能，但不應將性能凌駕于錯誤檢測和功能添加之上。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
為什么“私域流量”如此火爆，互聯網人必看！最近一個全新的名詞頻繁出現在我們的視野里，它和去年的“增長黑客”一樣，在互聯網圈子里被炒的火熱，它伴隨著微商和社交電商而出現，它已經悄悄改變著整個互聯網營銷格局，它就是“私域流量”。
恰好上周我在團隊內部也分享了關于“私域流量”的話題，這期間還糾結要不要整理到公眾號里。然鵝，樂于分享的精神將我腐蝕~，今天就不聊設計、不聊產品，來談一談我眼中的“私域流量”，拓展一丟丟互聯網的思維邊界。
一、什么是私域流量？
要讀懂私域流量，首先要了解流量池的概念，流量池是流量的蓄積的容器，主要是為了防止有效流量流走而設置的數據庫，比如：淘寶、百度、微博等。只要有足夠的預算，可以持續不斷的獲客（獲取新用戶的渠道），被稱為流量池。
而私域流量指的是品牌或個人自主擁有的、無需付費的、可反復利用的、能隨時觸達用戶的流量。它并不是一個新生事物，只是與我們曾經接觸的流量相比，更加便于商戶或個人使用的流量。
比如：之前社交媒體還沒普及的時候，私域流量就是客戶的聯系方式（手機號、郵箱、住址等），想要聯系他們時，可以打電話、發短信、發郵件、甚至往他們家寄樣品體驗。當時這些客戶信息甚至都是公司的商業機密。
隨著時代的進步，如今的私域流量是一個完全屬于“你”自己的私人地盤，大到年入上億的商家，小到個人經營者。這些流量存在于公眾號、微信好友、微博、社群、朋友圈、頭條號、抖音等社交媒體里，它是一切你可以隨時掌控的私人流量池（既私域流量），這個流量池里聚集的是你的粉絲、客戶和潛在客戶。
而產品則是承載用戶流量的工具，即使用戶分布在不同的產品里，但只要是在個人賬號的，就是你的私域流量。顧名思義，私域流量就是屬于自己的流量，相對公域流量而言，主要指個人或品牌自主擁有的自由流量，它需要通過沉淀和積累來獲取的更精準、轉化率更高的垂直領域流量。
二、公域流量與私域流量
任何一家互聯網公司，都離不開一個核心問題——流量。得流量者得天下，有了流量才能進行下一步轉化，“流量”既代表大眾的關注點。
對互聯網公司來說，流量就是市場，流量就是用戶，流量就是商機。我們講的私域流量就是這部分流量屬于商家或個人的“私有資產”。既然有私有，那必然有公有。與私域流量對應的是公域流量，比如淘寶、京東這些大的流量平臺，所有的流量都要花錢買，而且越來越貴，這里的“花錢買”指的是廣告推廣、排名推廣等。有了曝光率，用戶的關注點（瀏覽行為）自然就來了。
這兩類流量有什么本質上的區別呢？
公域流量和私域流量并不是絕對概念，而是相對概念。比如一家商場開在步行街上，商場里的流量相對于步行街就是私域流量，因為店鋪基于步行街內。而步行街的流量相對于商場就是公域流量，因為其他店鋪也可以享用。再比如，從淘寶里打開一個網店，網店里的流量相對于淘寶就是私域流量，而淘寶的流量相對于網店又成了公域流量。同樣，公眾號的流量相對于微信就是私域流量，微信的流量相對于公眾號就是公域流量。
所以說，公域流量就像大海，剛開始魚多，捕魚的人少，即便我們捕魚的技術一般，也能有所收獲。隨著捕魚的人越來越多，捕到魚的成本越來越高，魚的質量卻越來越低，于是很多人就開始自建魚塘養魚，這樣捕魚的成本低了，也更容易捕到魚了，還能租出去讓別人釣魚，自建魚塘就是私域流量。伴隨著流量紅利的減緩，公域流量逐漸飽和，商家很難再以較低的成本來獲客了，為什么是較低的成本？請往下看案例。
公域流量：
公域流量也叫平臺流量，它不屬于單一個體，而是被集體所共有的流量。來看看我們常見的的平臺流量五大板塊：
電商平臺（淘寶，京東，網易考拉等）；
內容聚合型平臺（騰訊新聞、網易新聞、今日頭條等）；
社區平臺（百度貼吧、微博、知乎、簡書等）；
視頻內容型平臺（騰訊視頻、愛奇藝、抖音等）；
搜索平臺（百度搜索、谷歌搜索、360搜索等）。
對于平臺中的個體來講，他們只能以付費或活動等方式，在滿足平臺規則的原則下獲取流量，留存率較差，因為個人沒有支配權，只能跟隨平臺的發展規律順勢而為，且流量始終屬于平臺，個體稍有過分的營銷嫌疑就會被封號。很顯然，他們都依靠于平臺獲取流量，并且不能完全掌控自己的流量分發。
這種形式所帶來的弊端便是每次流量的使用需支付高昂的費用。當然，優點僅為流量獲取方式相對簡單，花錢購買，付費即可，平臺會根據你付費的級別來定制推送計劃。但這種推廣方式，相當于大海撈針，比如我們在百度上做推廣，想利用百度的流量來曝光我們的UI設計網課，但是每天使用百度的用戶來自于各個階層、各個崗位，需求五花八門，可能100個訪問用戶中，只有1個是具備目標用戶條件的，所以平臺流量不能精準的曝光到目標用戶所在的群體。
私域流量：
接下來，我們對比一下私域流量，它屬于單一個體的流量。比如某個公號的關注用戶都是UI設計師，那這個公號的私域流量就是推廣UI設計網課的首選目標，因為大家都有這個需求、都來自這個領域，只不過需求的渴望程度不一樣而已。在100個閱讀用戶中，可能有10個會仔細了解。所以這種推廣方式的精準度要比平臺流量更高，關鍵是推廣費用極低。弊端是曝光率、影響面積、用戶熱度是臨時性的，但在短時間之內是有明顯的用戶增長，這就是所謂的“極速獲客”、“熱點獲客”。
所以我們常見的私域流量都存在于個人號中，他們可以完全掌控自己的流量分發。比如在微信中，好友也是我們的私域流量，我們可以選擇不同的好友分組推送消息，所以私域流量最大的特點是直接觸達用戶。
同時，私域流量可以反復利用，更適用于復購屬性強的產品，利于增加復購率，比如我們生活中一些小超市的營銷手段就是利用私域流量增加顧客的粘性和復購率的：在超市購買商品支付時，收銀員要求你添加他們店長的微信號，添加成功可以送多少積分，打多少折扣，這就是獲客的第一步，然后店長會把這些顧客拉入到一個微信社群里，每天定時推送一些打折商品、優惠新品等，有些用心運營的還在社群里做“搶紅包”的活動，搶到最多的前三名當日到店購買商品送500積分等。
我們可以看出，比起公域流量，私域流量更注重引導和運營。如果用一句話概括私域流量和公域流量的區別，就是：私域流量的用戶屬于個體，公域流量的用戶屬于平臺。
三、私域流量的特點與價值
1、更可控
假設某平臺有一百萬用戶，然而這一百萬用戶跟我們沒有任何關系，我們只有把里面的用戶導入到自己的平臺，才算自己的用戶，后續對這些用戶的針對性服務才有可能發生。
就拿“抖癮”來說，用戶喜歡的短視頻很多，當對其中一個視頻感興趣時，可以選擇關注號主，關注后可以第一時間享受到號主提供的視頻服務，而對號主來說，關注者就是從平臺引入的私域流量。當關注號主的用戶越來越多時，這個號主就成了所謂的網紅，并在特定領域有一定的影響力，因為后面有一大群“私域流量”在支持他，基于此，一些其他的業務和廣告就隨之而來，這伴隨的也就是收入。號主也可以選擇性服務，將關注用戶人群細分，從而合作不同的品牌。
2、更省錢
產品在平臺流量獲得曝光需要支付高昂的費用，比如：關鍵詞競價、關鍵詞推廣等，如果你想通過平臺獲得不花錢的曝光...還是別想了，不可能的，人家的流量也是花錢砸出來的。
私域流量幾乎是免費的，一旦把用戶從平臺流量引入到私域流量，比如：微信社群，那真是我的地盤我做主，怎么玩都是我的權利，當然也不能太放肆而喪失了所謂的本質，如果用戶體驗不好，分分鐘會被別的“私域流量”引導走，畢竟選擇也是用戶的權利。再就是前面舉的UI設計師網課和超市的例子，直接跟“熟客”建立聯系，省下了渠道推廣費不說，熟客們還愿意為你安利更多用戶，這相當于幫你免費做了宣傳推廣，無形中產生了裂變。所以產品在私域曝光的成本要比平臺曝光低得多，甚至幾百塊就可以搞定一個精準推廣，而這個精準推廣還會產生二次流量。
3、更豐富的營銷玩法
私域的運營能讓商家與消費者建立更親密的連接，那商家就可以基于產品做延展，不管是二次營銷還是多元化營銷，只要你輸出的內容不讓用戶失望、討厭，就有助于銷售。
我們身邊最常見的就是分享文章到朋友圈進交流群、參與文章中的紅包抽獎、評論區積攢送書、公眾號文章互推等活動。這無形中就是為商家的私域流量進行了裂變和促活。
當然這些只是很小一部分的玩法，也不違背互利的原則：我分享你的文章進了我想進的交流群、我幫你的文章帶來一次閱讀，但我可能獲得抽獎紅包、我發動身邊朋友幫我積攢，對你的產品進行了裂變式曝光，但我得到了想要的書籍...
寫到這里讓我想起之前在網上看到的段子“我把你當朋友，你卻把我當你的私域流量”。然而，不管是現實還是網絡，不可能有人在商業環境里無私的付出，雖然說的很透，但我們還是需要正確認識現實，畢竟這是個資源互換、資源共享的互聯網時代。
4、更高的客戶穩定性
私域流量可以有效防止用戶流失，尤其是你經常交互的用戶。通過運營私域流量，與用戶建立起情感互動（交互），你推薦的產品他們也不會條件反射般地當作廣告去屏蔽掉，同時你的誠懇推薦也會讓用戶穩定性越來越好，不容易流失。
現在很多商戶都會主動以個人號去添加一些顧客，通過私人關系為他們提供訂座、專屬折扣和所謂的VIP服務，平時有事沒事嘮嘮嗑、相互點個贊、時不時來一句贊美的評論啥的。所以，商戶在用戶面前曝光多了，也能起到喚醒用戶記憶的作用，久而久之復購率也就提升了。
5、更利于塑造品牌和個人IP
好品牌反映了好口碑，在某種程度上會幫助用戶消除掉選擇困難癥，比如我們買鞋子，品牌這么多，我肯定首選我心目中排在第一的，這個“第一”就是用戶對商戶精神層面的認知和信任，品牌塑造的過程就是用戶忠誠度建立的過程。
私域流量的交互，可以拉近品牌和用戶之間的距離，通過產品提供的服務把同類人群聚集在一起，這些人累計起來的影響力不可小瞧。不管商戶大小，掌握私域思維，都能有效的促進與用戶的溝通，增加用戶粘性和忠誠度。
在運營私域流量時，最常見的錯誤是沿用以前的思維。比如很多公司讓客服團隊搞大量微信個人號做朋友圈運營，但其實沒有任何一個微信用戶希望自己的朋友圈里多了一個廣告客服。私域流量轉化的核心是信任，是基于人與人之間的信任。這里有一個非常重要的環節，就是個人IP化打造，打造一個行業KOL或專家的身份，比如你在某個領域有豐富的行業經驗，通過某些途徑將你的經驗分享給有需要的人，這就從中產生了濃厚的信任，因為在用戶眼里，你就是行業的專家（你說啥都對~），完成這步之后，私域流量才可能提高轉化。說白了就是你（商戶）能為用戶提供什么樣的服務，這些服務被多少人所認可。
四、身邊常見的導流方式
1、靠利益誘導
比如關注公眾號領紅包、下載APP送現金、注冊領優惠券等。在流量池獲得曝光后，用戶看到進入私域流量有好處時，一般都會形成轉化。雖然數據在短時間內很美麗，但留存率和活躍度不敢保證，這需要產品內的引導和體驗來支撐。
2、解決內容訴求
做優質的內容輸出，解決用戶的內容訴求，靠內容本身打動用戶形成轉化。比如你正在看這篇文章，你覺得有點收貨，就產生了關注我公眾號的想法，并做出了關注的行為，這個“行為”就是一次轉化。所以做內容私域的本質在于產出有價值、有思考、有幫助的干貨。當別人發現你產出的東西，對自己有幫助時，會主動前來，這是長久的打法。
五、寫在最后
私域流量的拉新和運營，就是與人打交道、與一群人打交道，和做產品一樣，滿足他們的核心需求，以及一些增值需求。現在關于私域流量運營還沒有太多成熟的玩法，商家多半還在摸索和嘗試中。我們也不要只盯著微信平臺，用戶在哪里流量就在哪里，私域流量池就在哪里，就像有些朋友從公眾號轉戰到“抖癮”一樣。
掏心窩子：當然我個人并沒有太在乎私域流量給自己帶來的利益，因為我始終把在UI中國寫文章當做一種學習成長的方式而已，通過輸出一些復盤和有挑戰的知識點，幫助自己突破思維邊界，同時還能結交各位同行，簡直兩全其美。
??希望對你有所幫助~
是的，我們距離目標又近了一步，標紅的你都看了嗎？
文章來源：ui中國
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
表單是產品設計中的重要組成部分，如果說彈框的主要作用是完成信息反饋，那么表單的主要作用就是完成信息錄入。任何一個表單都可以被拆解成三個最基本要素：標簽（標題）、輸入框和按鈕。
標簽是用來告訴用戶這個列表項是什么；輸入框是供用戶完成信息錄入的；按鈕是供用戶完成信息錄入后點擊進入下一個流程的。
根據標簽所處的位置，可以將其分為左標簽、頂部標簽和行內標簽。
1. 左標簽
左標簽在目前來說是最常見的一種標簽樣式，但是這并不意味著我們可以無所顧慮地使用它。以手機端為例，手機端的屏幕尺寸（寬度）有限，左標簽會占據屏幕較大的空間，此時右邊的輸入框就可能無法展示完整的信息。
例如，如果用戶輸入的地址過長，就會造成信息的展示不完全，這對用戶體驗來說是致命的。因為用戶在進行下一步操作之前都會對輸入的內容進行審核確認，如果連完整的內容都無法獲知或者獲知的難度較大，則用戶根本不會進行下一步操作，這就造成了操作流程的中斷。所以，我們在使用左標簽的時候，一定要考慮對多行文本的展示。
2. 頂部標簽
頂部標簽是指位于輸入框上方的標簽，這樣輸入框就可以獨占整個頁面，信息可以得到更完全的展示。
與左標簽相比，頂部標簽可以給輸入框的內容騰出足夠的空間。在界面設計中，更多的空間還意味著具有更高的信息層級。同一個表單中會有很多的輸入項，有些輸入項的優先級很高，我們可以考慮使用頂部標簽的樣式來進行凸顯。
但是這種布局方式也有缺點：會占據更多的縱向空間，之前一屏就可以展示的內容，現在用戶需要滑動頁面才可以看完。
3. 行內標簽
行內標簽又可以被看成是輸入提示，其樣式看起來很適合手機端的表單設計，因為它可以極大地節省頁面空間。但是一旦用戶點擊切換到輸入狀態以后，就看不到這些標簽了。如果操作提示字數很多，例如密碼規范，那么用戶記憶會很吃力。我們可以在調起的鍵盤頂部加上提示，減少用戶的記憶成本。
但是，如果表單項目過多，則用戶在填寫的時候很容易串行，可能會出現把家庭住址填到畢業院校一欄中的情況。更嚴重的是，用戶因為無法看到標簽，這類錯誤是無法被檢查出來的。為了解決這個問題，我們可以在行內標簽前加一個圖標來標識這個列表項，圖標所占據的空間不會太大，而且會提高頁面的美觀性。
當表單項目過多時，我們要對其進行整合分組來提升內容的可讀性。如下圖所示，這里將 15 個字段分成 3 組。同樣的內容，但給用戶的印象卻大不相同。
輸入框的作用是供用戶完成信息錄入，這里我們的設計思路是如何提升信息的錄入效率。我見過很多設計師偷懶，把所有的輸入框都做成文本框樣式，用戶必須調起鍵盤一個字一個字地輸入，這種體驗是非常不友好的。如果我們想讓用戶錄入個人信息，其中的生日和城市就應該使用日期和城市組件，而不是讓用戶手動輸入。
即使非要讓用戶手動輸入，我們同樣可以根據不同的場景給用戶提供更友好的體驗。如果要輸入的是數字，那么應該給用戶調起數字鍵盤；如果要輸入文本，那么應該給用戶調起全鍵盤，避免用戶手動切換鍵盤。
即使用戶輸入符號，我們也要考慮如何減少用戶的操作步驟。例如，我們發現當光標位于周星星三個字右邊的時候，點擊「“」鍵，會出現左右雙引號；當光標位于周星星三個字中間的時候，點擊「“」鍵，只會出現左雙引號。這是因為光標在文本右邊，用戶只要輸入「“」，那么就必然需要「”」來結尾，這里直接提供左右雙引號更合適。如果光標是文本中間，無法確定「”」需要在哪里出現，所以只展示「“」。
在理想狀態下，用戶填寫完表單信息，然后點擊「提交」按鈕，系統顯示提交成功。但是，現實情況卻是用戶在填寫過程中經常會發生錯誤，那么如何將容錯性原則融入表單設計中呢？
首先我們需要給予用戶足夠的操作提示，日期錄入就是最典型的例子。不同的地區對于日期錄入的格式也不一樣，「02/12/2019」到底是2019年2月12日還是2019年12月2日？如果我們不提示用戶，用戶就不知道應該怎么輸入。
為了避免用戶犯錯和提升用戶的信息錄入效率，我們可以提供自動完成錄入功能，當用戶在文本框里輸入時，系統可以猜測可能的答案，顯示可選列表，避免了用戶手動輸入造成的錯誤。
如果你確定對用戶足夠了解，在用戶進行信息錄入時，可以提供合理的默認值。因為對用戶來說，填寫信息永遠都不是一件有趣的事情，設置合理的默認值可以節省用戶的操作時間。
能讓系統完成的任務，就盡量不要讓用戶來操作。用戶會犯錯，而系統不會。表單容錯性設計的另一個方向就是梳理表單中的雞肋項目。
現在很多的購票類 APP 都提供送票上門的功能，這就需要用戶填寫收貨地址。以交通出行類 APP 飛豬、途牛和去哪兒為例，其中，上圖中左側的兩張圖，飛豬和途牛都需要用戶填寫郵政編碼，而在去哪兒中則是選填的。其實根據用戶填寫的地址，我們已經可以獲取到郵政編碼，郵政編碼完全可以自動回顯，不需要用戶手動輸入。
而在小米有品 APP 中就可以根據用戶填寫的地址回顯郵政編碼，這看起來很方便。這只是看起來很方便，我們可以繼續思考一下：如果系統完全可以根據用戶填寫的地址獲取到郵政編碼，那么郵政編碼這一項完全可以不在界面中露出。其實很多產品在用戶填寫收貨地址的時候已經不需要用戶填寫郵政編碼了。
對于容錯性原則，我們還要考慮如何給用戶展示合理的報錯提示。目前來說，我們經常看到的一個報錯提示樣式是對話框。在我看來，對話框并不是一個好的選擇。因為用戶如果要進行修改，就必須要關閉對話框，那么用戶就看不到錯誤信息了。如果錯誤原因和解決方案的字數較多，那么用戶就需要花一定的時間記住這些信息，然后再來修改，這會增加用戶的記憶負擔。如何才能設計好表單的報錯提示呢？表單中的報錯提示可以分為兩種：單行表單報錯提示和多行表單報錯提示。
單行表單中意味著在當前界面中表單只有一行輸入框，其一般用于手機號、銀行卡號、身份證號和金額的錄入。對于此類場景，建議使用輸入框底部的文字報錯提示樣式，并且要對錄入的信息進行實時校驗，不要等到用戶進入下一個界面才告知用戶在上一個界面中手機號輸錯了。
給多行表單進行報錯提示時，除告知傳統的錯誤原因和解決方案外，還應該告知用戶錯誤的位置。因為在一個界面中，有很多的輸入項，用戶在短時間內無法把報錯提示和錯誤項聯系起來，因此，為了提升用戶對于錯誤場景的感知效率，對錯誤項進行標記是非常有必要的。具體的實現方式有改變文字顏色、輸入框背景色和設置提示文案抖動。
以上圖為例，這里通過改變文字顏色或輸入框背景色來標記錯誤位置，用 Toast 告知用戶錯誤原因和解決方法。我們也可以不改變配色，讓該輸入框左右抖動也能起到快速標識的作用。
表單中的提交類按鈕按照位置可以分為以下三種。
其中位置 A 是最常見的布局樣式，這樣的布局符合用戶的視覺習慣和操作流程：用戶由上而下完成表單信息的填寫，最后點擊「提交」按鈕進入下一個頁面。但是這種布局有一個問題：如果表單項目過多，則用戶必須滑動頁面才能完成提交操作。
位置 B 跟位置 A 很相似，唯一的區別在于位置 B 是固定在頁面底部的。那么位置 B 跟位置 A 的適用場景有什么不同呢？位置 B 意味著用戶在不用滑到頁面底部的情況下就可以點擊「提交」按鈕，那么在什么樣的場景下用戶不用滑到頁面底部就可以提交呢？
其實在很多表單中，不是所有的信息都需要用戶手動錄入的。以前面提到的郵政編碼為例，只要用戶輸入了地址，系統就能獲取郵政編碼，相關信息是可以直接回顯的，用戶沒有看到此類信息的必要性。所以，對于一些重要性不是很高、不強制用戶看完的表單項目，很適合使用這類底部懸浮按鈕。最常見的就是各種協議頁。
位置 C 出現的原因在于，對于前兩種方案，當調起鍵盤時就會遮住「提交」按鈕，用戶必須先關閉鍵盤才可以點擊「提交」按鈕，多了一步操作。而位置 C 可以完美解決鍵盤遮擋的問題，但是其不符合用戶的視覺習慣和操作流程。而且手機大屏化是一個不可逆的趨勢，用戶在單手握持手機的情況下很難直接點擊到界面右上角的「提交」按鈕，增加了操作難度。
其實位置 C 完全可以被忽視，因為現在很多產品已經支持在調起鍵盤時滑動頁面，所以位置 C 最大的優勢已經不復存在。這里還介紹位置 C 的原因是希望讀者知道交互規則是會隨著技術的發展而不斷改變的，可能在這本書里提到的一些技法過一段時間就會落伍了。要成為一名優秀的設計師，必須具備持續學習的能力。
文章來源：優設
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在日本文化中，「屬性標簽」是一個重要的組成元素。一個人是「御宅族」還是「視覺系」，抑或是「食草男」，細分標簽總會添加上去。雖然這樣的標簽會給人一種「固化」的感覺，但是有時候也會讓人對一個事物有更清晰明確的認知。日本的雜志同樣如此。一本雜志應該針對什么樣的群體，帶有什么樣的特征，傳達什么樣的情緒，都會有非常清晰的「屬性標簽」。
20世紀80年代是日本時尚雜志百花齊放的年代，眾多現有知名日本雜志誕生，例如《ViVi》、《CanCam》、《JJ》、《mina》、《sweet》、《SPRING》等等。不同的雜志風格不同，面向的群體也不同，上面所帶的標簽也不同。
比如時尚雜志《PopEye》是針對「City Boy」的男性，「美式復古」和「學院派風格」是這本雜志最典型的標簽。
而女性向時尚雜志《mina》的標簽則是「清新少女」、「獨立」、「青文字系」。「青文字系」是一個非常日本的標簽，簡單來說，帶有「青文字系」標簽的雜志在精神內核上強調女性要瀟灑獨立，不應該對男性諂媚，帶有同樣標簽的雜志還有《sweet》、《steady》、《mini》、《SPRING》、《InRed》。與之相反的標簽則是「赤文字系」，帶有這一標簽的雜志特別強調女子力，會教讀者如何穿搭、如何做才能討男生歡心，帶有這一類標簽的雜志有《JJ》、《ViVi》、《Ray》、《CanCam》。當然，近年來還出現了「黑文字系」，其實指的是喜歡穿一身黑的姑娘……
不過言歸正傳，今天我們要聊的主要是《mina》這本雜志?！秏ina》其實在新世紀之初進入過中國大陸，當時中文名稱為《米娜》，巴拉排行榜曾將其列為全球十大時尚雜志之一，是日本少女清新風格的雜志。
《mina》能獲得這樣的贊譽，和它本身極高的內容素質是分不開的。包括尾身沙紀在內的許多著名的攝影師，會給《mina》拍攝圖片，而模特更是有村架純、竹內涼真這樣的一線明星。
清新秀麗的妝容，凸顯少女氣質的整體設計，真實而細膩的場景，《mina》借助精心打磨的視覺排版，將女性最真實可愛、貼合年紀的美麗以及元氣滿滿的少女感，都呈現出來了。
如果你是一名熱愛視覺和排版設計的設計師或者愛好者，《mina》簡直就是為你量身定制的排版素材庫。稍加拆解，你會發現這個雜志中到處都是可供學習的排版知識。
《mina》雜志因為其少女特性，多樣活潑的使用不同的區域放置元素，同一本雜志會給你帶來不同的視覺效果。下面左圖四周無間距的設置，會使你的視線更加開闊，無論看向版面的哪一部分，都可以傳遞信息給你，吸引你打開這本雜志。右圖的框線設置，限制了閱讀的區域，讓你的視線聚焦在框線內，閱讀精心為你準備的內容。
下面左圖三張圖片和兩段文字的排列，使整個版面顯的更加充實和生活化，而右圖單張圖片和零星的文字使得整個版面顯的更加高級，這不僅僅是圖片和顏色選擇的影響，更多的還有元素的排列給你帶來的視覺感受。
為了讓讀者更加易于閱讀，在該版面上停留更長的時間，分組的設計在雜志中較為常見。圖文元素整齊的搭配，是不是給你一種畫面美觀，信息可信賴的感覺呢？這樣的設計也更加的吸引讀者進行閱讀。
同一排版樣式的反復使用，會給你舒適的閱讀體驗，整個版面會更加的有節奏感，不會讓你覺得某一元素特別跳脫。同樣，為了美觀和便于閱讀，無論是圖片還是文字，都遵循著一定的對齊原則，常見的有左對齊、上對齊和居中對齊。
活躍于廣告界的白承坤先生說，無論使用怎樣的圖片，目的都是為了讓眼睛停留兩秒鐘。同理，各類元素或色彩之間的對比是雜志常用的讓你停留「兩秒鐘」的方式。由于視覺心理的作用，相對來說，大的元素、鮮艷的元素會更加的吸引人眼球，引人注意。
對于少女雜志而言，如何體現少女心和元氣滿滿的感覺是一個需要解決的難題，而出血的設置為這個難題提供了一把鑰匙，讓整個畫面活潑生動起來，右圖奶茶開放式對話框的加入，有一種奶茶說「快來喝我！」的活潑感，使得整個版面頓時可愛起來。
《mina》很少在版面的四角放置滿滿當當的元素，是因為適當的留白可以讓人在眾多的元素沖擊中舒緩下來，給你清新舒適的觀感。讓你在開闊的視野中，使雜志想展現出來的重點，成為你的焦點。這樣好用的突出重點的方式，快快學起來吧。
摳出來的人物沒有其固有的背景，會讓你聚焦于少女的動作和輪廓，隔著屏幕都能感受到少女滿滿的活力。而四方版更加強調人與環境的關系，讓你得以獲得更多的信息。兩種方式如何恰當的使用，就看你想用來傳遞什么樣的信息啦！
傳遞信息是最重要的，其余的套路就快去打開《mina》找尋吧！
文章來源：優設
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
本文主要記錄幾種提升基于深度學習的圖像語義分割精度的方法，以防忘記！
By zhengzibing2011, 2017年10月21日-星期六
1
1.圖像語義分割面臨的挑戰
(1).特征分辨率減?。褐饕怯缮窠浘W絡中的重復最大池化和降采樣（stride跨越）操作造成的，而采用此種操作的原因是
A.降維，以免參數過多難以優化；
B.基于DL的語義分割是從用于分類任務的CNN轉化而來，而在分類任務中，分類器要求對輸入的空間變換具有不變性，池化恰能滿足這樣的要求。
(2).不同scale下的目標存在的狀況：主要是目標在multi-scale圖像中的狀態造成的，因為在同一種尺度下，不同目標的特征往往響應并不相同。如需要在較大的尺度下才能較好地提取圖像中比較小的目標，而較大的目標為了獲取全局性信息也必須在較小的尺度下才能實現。
(3). CNN的空間不變性造成定位精度的下降：對于分割任務而言，由于pooling操作引起的分類器對輸入的空間變換具有不變性丟失空間信息，內在的限制了分割的空間精度。
2.潛在的解決方法
FCN作為將CNN應用于semantic segmentation的forerunner，貢獻巨大。但不可回避，其提出的方法具有一些不足。為保證卻終的feature map不至于過小，FCN的conv1引入pad=100，引入了較大的噪聲；
32倍upsample(deconvolution)非常粗糙，而且deconvolution的filter不可學習； skip architecture雖能有效提高精度，但需要3次訓練即FCN-32s->FCN-16s->FCN-8s。除skip architecture外。隨著研究的深入，針對以上挑戰，有以下幾種方法解決：
(1). Encoder-Decoder結構
采用此種思想的代表為DeconvNet，SegNet，其基本思想是采用一種對稱結構將由于pooling操作而減小的feature map通過逐步的upsample逐漸恢復到原圖像大小，同時在upsample階段，融合了subsample中pooling index，具體細節可參見原文。
(2). Atrous convolution
feature map的減小是由于pooling造成的，為確保一定精度的feature map，能否不使用或減少使用pooling呢？理論上是可行的，但如果這樣做會使得需要優化的參數過多，重要的是難以基于以前的model進行fine-tuning，atrous convolution解決了這個問題。
在DeepLab中令pool4,pool5的stride=1，再加上1 padding，這樣經過pooling后feature map大小不變，但后層的感受野發生了變化，為使感受野不變，后面的卷積層使用atrous convolution，其作用是在不增加參數的前提下，增加感受野。因此，解決了feature map空間分辨率下降的問題。
(3). ASPP
針對不同scale下的目標存在的狀況問題，可通過兩種方法解決：
A.標準的多尺度處理方法，用共享相同參數的并行CNN的分支，從不同尺度的Input image中提取score map，然后進行雙線性差值，最終對它們進行融合，在不同尺度上獲得每個位置的最大響應。訓練和測試時均這樣處理，比較繁瑣的是需要計算輸入圖像的每個尺度在各layer上的特征響應。
B.基于任意尺度上的區域都可以用在這個單一尺度上重采樣卷積特征進行有效地分類的思想，使用多個不同采樣率上的多個并行多空卷積，每個采樣率上提取的特征再用單獨的分支處理，融合生成最后的結果。
(4). FC-CRF
CRF幾乎可以用于所有的分割任務中圖像精度的提高。CNN可用于對圖像中的目標進行分類并預測出目標的大致位置，但并不能真正描繪他們的邊界。因此，將DCNN的識別能力和全連接CRF優化定位精度耦合在一起，能成功的處理定位挑戰問題，生成了的語義分割結果。全連接CRF理論較為復雜，在此不作闡述。類似的概率圖模型(PGM)還有MRF，G-CRF(高斯-條件隨機場)。
3.總結
目前，暫且先記錄以上4種提高分割精度的方法。后續若有新的方法，予以追加！
————————————————
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn