一年一度畢業季來襲高校畢業展海報簡直「神仙打架」
大家好，我是美丫姐，今年，因為疫情原因，各大高校畢業生可以說是哭笑不得，先是因為人聚不齊，拍個畢業照都拍不成，只能上手 p。
再是各高校想方設法也要讓畢業生有個難忘的畢業典禮，紛紛搞了一出「賽博朋克」撥穗儀式。
這得虧是大白天，要是晚上在校園撞到這玩意兒還不得給人嚇個半死！
不禁讓網友紛紛大呼「搞點陽間的東西吧！」
但即便是這樣，也絲毫沒有減少，藝術院校辦畢業展的熱情全國各地各大藝術院校，都紛紛舉辦起了線上畢業設計展，斬斷大家想逃過做畢設的念頭，畢業設計展照常舉辦，那么畢業設計展宣傳海報也一定少不了。
接下來，就讓美丫姐帶著大家來品品，今年各大藝術院校令人「眼花繚亂」的海報。
廣美以其縮寫 GAFA 組成的動態 3D 圖形利用視差讓人產生錯覺，頗有幾分韻味。
就是搭配上富有節奏的 BGM 后，讓人不禁想到那句傳唱大街小巷的廣告詞「一年逛兩次海瀾之家，每次都有新感覺」。
你看，這亦實亦虛的透明物體像不像甲方虛無縹緲的需求……
彼時，這一疊疊的紙張是一次次熬夜趕的作業此時畢業了，這一疊疊紙張將會是你被打回重做的稿子
去年被全網吐槽的天津美院海報，天美 2019 年畢業展海報
今年選擇打一張規規矩矩的保守牌
不管甲方有多奇葩但畢竟給了錢，不管有多少坎坷都得咬著牙勇往直前 ，逆流而上！
這向四面八方發散的線條就像甲方天馬行空的想法，沒有重點，也似乎沒有終點。
稀疏的黑白線條，就像學設計后你的頭發，做設計，做到最后白了少年發，又禿了頭。
這需要瞪大眼看的 PPT 式動態海報，不正代表著更新迭代快速的時尚圈嘛！
畢業，能帶走的是屬于大學 4 年的回憶，難以帶走的，是積攢 4 年的行李，一看這陣仗，快遞費肯定不便宜。
中間的圓就像催眠師搖擺的鐘表，這畢設，是越做越瞌睡……
兩耳不聞窗外事，一心只往屏幕鉆，這才是一個優秀設計師的優良品質。
設計師：「你好，有什么需要我服務的嗎？」
甲方：「需要做一個 logo，目前預算 20」
設計師：「好的，再見」
俗話說得好，做設計不帶參考線，都展現不出設計師有多用心。這不，理工學院密密麻麻的參考線，哪個甲方拿到手不會覺得物超所值。
只是輔助線過于密集我看了三遍才看出寫的啥。
甲方的心就像一個無底黑洞，你永遠不知道他在想啥，他給你的意見也總是在你意料之外。
做設計師，不僅要會動手，還得眼觀六路，耳聽八方能說會道，還要會「嗅」出空氣中的氛圍，這才能把甲方爸爸服侍得妥妥帖帖。
每個看向不同方向的眼珠，就像一個項目有好幾個甲方，每個甲方都有自己的想法。
藝術，總是得留有一絲絲神秘感才能吸引大家的眼球，就像馬賽克后內容總是令人好奇。
除了大陸各大高校畢業展海報外，臺灣的畢業展海報也是百花齊放。
作品記得署名，被盜了你都沒地兒哭去。
水印打得再滿也不如自個兒的臉辨識度高，實際上畢業作品是個 AR 濾鏡。
設計就是一場探索，多走幾次，就能摸清楚甲方的套路。
選專業前猶豫做什么設計，設計系畢業后：「做什么設計！」
遇到蠻不講理的甲方，多深呼吸幾次忍忍也就過去了。
保持一個樂觀的心態，才能發現設計的世界多姿多彩。
你看這從上到下密密麻麻的人海，就像是一次次嘗試夠到甲方需求，卻又一次次失敗的你。
看這畢設把孩子逼得這醫院看來沒少去。
無論何時，回憶起肝畢設的日子，就連軟件頁面都能浮現在眼前。
當你正式成為設計師你會發現，做多了辣眼睛的設計，你的眼球將會變成消耗品。
縱觀今天所有的畢業展的海報設計，有的難以理解，有的讓人出乎意料，但唯一可以肯定的是，無論條件多糟糕，哪怕不能像往年，有展館可給學子們呈現自己的創意，熱愛設計的大家，創作的熱情，也沒有被這場突如其來的疫情澆滅。
雖說有些海報可能不能做到，讓所有人滿意，但校方也盡力，為同學們搭建了一個可以展現，大學四年學習成果的舞臺。
文章來源：優設 作者：你丫才美工
通常產品經理在立項前都要思考需求的實現方式：是原生做？還是 H5 做？
問題的答案會因實際情況有所不同，如果追求體驗，那原生效果更好，如果追求短頻快，那就選用 H5，或是兩者結合。
CCtalk 是個涉及 7 大端的跨平臺產品：iOS、Android、PC、Mac、Web、觸屏、小程序。我們在日常項目中（尤其是用戶增長類的項目）越來越多選擇用 H5 實現，然后以低成本適配方式應用到不同客戶端。
這樣做的好處在于：
降低了開發成本。原本要涉及 iOS、Android、PC（PC 和 Mac 用同一套 Qt 實現）、H5 這 4 個端的開發人員，現在采用內嵌頁的方式，可以做到完全不涉及移動端和桌面端，或者僅是入口放置這類比較簡單的工作。
降低了維護成本。如果有優化調整，可以只改 H5 頁面，不用各個端都動手。
好處顯而易見，當然這也不是件一本萬利的事?？聪旅孢@張 App 和 PC 屏幕尺寸的對比圖就明白了，長寬比差異這么大，頁面在適配的時候，有時需要優化調整布局。
△ App和PC屏幕尺寸對比
如果要真正做到流暢順滑的體驗，流式布局是最佳選擇，但是對設計和開發的要求都很高，維護成本也不小，這讓大多數團隊望而卻步。所以還是自動適配寬度、媒體查詢（斷點適配）等相對低成本的方式比較香。
如何以低成本的方式做適配？這個問題涉及 2 個方面：框架和頁面。
△ 框架和頁面
先來看看框架，大致有 4 種：觸屏、App、PC、Web。通常一個項目會涉及其中的幾種，也有少數情況都涉及。（此文暫不討論小程序，有機會再寫一篇關于小程序設計的文章）
1. App
CCtalk 用的 App 框架容器是公司橫向團隊提供的 Web View，有 2 種：
常規的導航樣式。元素包括：返回、頁面標題、分享（根據需要選擇展示或不展示）。安卓和 iOS 略有區別，iOS 為了導航欄的順滑過渡效果，用的是同一個 Web View，所以無法滿足在一系列頁面中部分頁面有分享按鈕，部分頁面沒有分享按鈕。安卓用的不是同一個 Web View，所以沒有這個問題。（此處不展開討論）
透明頭部導航。常規導航無法滿足一些個性化的設計需求，所以透明頭部導航就應運而生了?？梢詫Ш綑谶M行自定義設計，營造沉浸式的體驗。
△ 2種頭部
2. PC客戶端
PC 客戶端的框架導航包括：返回上一頁，返回首頁。頁面內嵌時，要留意容器導航和頁面導航是否有重復或遺漏。假如要保留頁面導航欄，那需隱藏返回按鈕；如果去掉頁面導航欄，則需將導航欄上原有的操作（例如分享）通過懸浮等方式保留。
△ PC端的全局導航
一般的設計流程是：先設計觸屏頁面，再去看看 PC、Web 頁面是否需要調整。
響應的總原則：提高屏幕利用率。
具體評估標準有 3 點：
頁面元素從小到大可分為：控件→組件→模塊→頁面，按照不同維度的復用，并結合自身的項目經驗，整理出 3 種常見的方法（此處是重點，看我看我）。歡迎小伙伴一起討論補充。
△ 3種常見的適配方法
這種方法最簡單，幾乎不用動腦子。具體實施方式又分兩種：
案例1-拉到指定寬度：
像帖子這類結構簡單的內容頁一般都可以直接拉伸。注意檢查是否有遺漏操作，一般在 PC 端可以采用懸浮按鈕的方案將移動端的操作保留。
△ 帖子頁
案例2-居中顯示，兩邊留白：
如果頁面直接拉伸給用戶增加了操作成本，可以采用將主體內容居中，頁面兩邊留白的方式。
實名認證項目是將同一套實名認證流程復用到 3 個不同的使用場景中，所以頁面需要適配觸屏、web、PC 彈窗 3 個框架尺寸。如果將觸屏頁直接在 Web 上拉伸，那不僅樣式上不美觀，而且右側的「修改」、「獲取驗證碼」等操作按鈕距離左側的標題太遠，根據格式塔的接近原理，右側的一列藍色操作反而會被誤以為是一個整體，脫離和主體的關系，不易于操作。所以我們的做法是放棄拉伸，而是將主體內容居中顯示，頁面兩邊留白。
△ 實名認證頁
這種方式雖然簡單，但也要注意可能會涉及一些細節調整：
如果所有頁面都能這么輕松適用于各個不同端，那對設計和開發來說真是省心省力，皆大歡喜。然而現實不會這么順風順水，有些頁面放到不同的框架內會「水土不服」，這時就需要設計師出馬做些調整。
這種調整適用于有圖片和列表的頁面。從設計層面改動不算大，而且開發量適中，開發也比較能接受。
案例1-排行榜
在課程排行榜項目中，有一個榜單列表頁，展示榜單的具體排名和獎勵等信息。
如果直接把觸屏頁面搬到 PC 端，滿眼是大寫的「丑」，從設計角度分析，用戶的閱讀負擔和操作負擔也過重，屏幕利用率低，鼠標滾了半天也沒看完一半榜單。
△ 直接拉伸——丑&不好用
所以這個頁面需要設計師改造一下才能適配到 PC 端，具體怎么做呢？
我們來分析一下它的頁面框架和模塊。頁面從上到下分為：獎勵 Banner、tab 區、列表區和我的排名 4 部分，結構相對來說比較簡單，在 PC 端可以保持大的框架結構不變。
△ 頁面結構
因為移動端是以縱向為主的屏幕，而 PC 端是寬屏，需要進行調整的模塊分別是：獎勵 banner區（圖片類），其他名次列表（列表類）。對于圖片適配，在這個項目中可以采用不同端使用不同比例圖片的方案。對于列表適配，在 PC 端由 1 列調整為 2 列，以提升閱讀效率。
△ 保持頁面框架，調整圖片和列表模塊樣式
案例2-課程售賣頁
圖片的適配處理，除了采用不同比例的多套圖之外，還有另一種方式——保持圖片比例不變，調整頁面布局。將圖片和標題從上下結構改成左右結構。
△ 課程售賣頁
小結：
保持頁面框架，調整模塊內樣式的方法適用于結構相對簡單，有圖片和列表等特殊元素的頁面。
對于圖片適配，有 2 條思路：
如果頁面模塊多、結構復雜，靠小改還是會造成閱讀障礙和操作負荷，那就要用方法三——模塊級復用，重組頁面布局。
案例-課時學習頁
課時學習頁是個多模塊的復雜頁面，分別有視頻播放區、課時基本信息、目錄、網師、評價和推薦。整體思路是將頁面結構由 1 列調整為左右 2 列，以此來提高屏幕的利用率。
模塊的具體位置根據其重要性以及和內容主體的相關度來排布，例如目錄：從平臺角度希望用內容吸引用戶，增加觀看時長；從用戶角度是需要經常點擊切換的，對于這種重要性高又操作頻繁的模塊，當然應該放在第一屏內。例如推薦：和內容主體的關聯度不高，所以優先級低，放在右側較小的區域內。
△ 課時學習頁
在復用模塊時，要注意是否有手勢操作的場景。如果觸屏端有左右滑動的模塊，在 PC 端適配有 2 種做法供參考：
另外，要注意浮層的特殊處理。手機端一般通過浮層展示更多信息，在 PC 端適配時，需將浮層調整為固定模塊。例如移動端吸底的課程介紹浮層，在 PC 端改成固定在目錄下方。
△ 浮層的適配
以上是我結合項目經驗總結的 3 種低成本頁面適配方法。當然，在具體的適配中還會遇到許多細節問題，需要 case by case 去處理。
文章來源：優設 作者：魚游設計
你的設計是否能被理解？為什么設計的價值總是不被人認可？本文將從深入淺出，帶你了解全局性設計思維的真正力量。
你的設計是否能被理解？為什么設計的價值總是不被人認可？
設計不僅僅只是帶來美感，好的設計能夠為產品、公司甚至整個社會創造巨大的價值。而在創造好的設計這個過程中，最重要、也是最容易被人忽視的，便是設計思維。
何為全局性設計思維？它能夠為設計師帶來哪些價值？本文將從設計的本質出發，結合設計的發展趨勢，帶你了解全局性設計思維的真正力量。
目錄
這篇文章的主要內容，來自我在 19 年底的一個沙龍分享。整個分享以設計思維的角度入手，講述了全局性設計思維的來源和重要性，以及我是如何在不同產品線上去運用這種設計思維的。
何為全局性設計思維？為什么要講這種思維方式？
這是我一直在探索并實踐的一種設計思維。從最開始的理論雛形，到各種項目的實踐，不斷進行修正和完善，最終形成了一套卓有成效的思維方式。通過這種思維方式，我逐步幫助產品解決了許多長期性的問題，并最終構建了各種不同類型的設計體系。最終，隨著品牌矩陣與產品體系的落地，形成了一個完整的網易智慧企業設計體系。
△網易智慧企業設計體系
因為篇幅原因，本篇文章將重點從理論層面闡釋全局性設計思維的導論、價值及使用方式。而具體的實戰案例，我之后將會以另外幾篇單獨文章的形式進行展現，并詳細講解在設計過程中的一些細節與過程。希望能夠幫助大家更深入地去理解如何根據不同的場景正確地去使用這種思維方式。
未來可能會包含以下幾篇文章：
當然，目前的設計體系僅僅只是一個開始，未來還有很長的路要走。
希望本文能夠為你帶來小小的啟發，讓設計思維幫助你更好地發揮設計的價值。如果你對某一方面特別感興趣，可以直接跳到這一章進行閱讀，無需浪費過多時間。如果你有任何疑問，也歡迎隨時與我交流。
這次把序放在了第二段，這樣子看上去就不那么不務正業了哈哈。當然，寫序更多的是為了記錄生活，希望每一篇文章不僅僅只是傳遞知識，更是一篇有溫度的文章。
整個 2019 年中，經歷了很多事情，人生觀也隨之發生了些許變化。
從并肩作戰的同事的不斷離去，到逐漸需要考慮團隊的發展。從單打獨斗闖天下，到思考如何讓整個團隊更加優秀、如何建立完善的設計體系等等。
角色、心態、責任，以及如何坦然地面對自己。
活在當下，用心生活。這是我一直當作座右銘的語錄，也是我希望給自己的承諾?？偸窃噲D去嘗試這種狀態，但卻異常艱難。像我這樣的人，看上去總是「積極向上」，總是「規劃未來」，總是希望事事完美，強迫著每個細節的完善。但不知不覺中，人生好像開始進入了「自動駕駛」的模式，活在了過去的思索中，活在了未來的規劃中，唯獨對于當下異常麻木。
這并不是我想要的生活，我開始嘗試做出改變。
偶然間，通過一些書籍，我開始嘗試正念禪修。感受每個呼吸中空氣的流動、感受身體的每個部分、感受當下空間發生的每一件事情。雖然只是很淺顯的境界，但正念依然對我產生了巨大的影響。我開始重新地審視自己的人生，審視自己的生活狀態。
△ 網易蝸牛圖書館：與快樂的小伙伴們
這種感覺，就像再次的呼吸了新鮮空氣一樣。
我們其實只存在于當下的時空中，過去和未來，并非真實存在的事物。回想一下，我們有多久沒有像小時候一樣，完完全全、毫無雜念地享受在當下的時光中了？
用心活在當下，平靜地接納一切發生的事物，這種感覺真是太美好了～
對于設計師來說，什么能力更為重要？是設計這門「技術」本身，還是思考如何去設計的「思維」能力？
對于不同的設計師來說，一定會有不同的答案。
這兩種能力本身并不矛盾，他們相互影響，互相促進——就像「術」與「道」之間的關系。設計能力決定了設計作品的輸出質量，而設計思維則決定了你思考問題、解決問題的能力。
然而，在現實的大環境下，「術」的重視程度遠高于「道」，造成了很多設計師與日常業務的「分離感」。以至于，多數的設計師，無法將自己的設計能力有效地用于日常業務中；抱怨他人不理解設計，也因此錯失了許多機會。
重視設計美感，其實并沒有問題。視覺是最直接的表現方式，我們從最初開始喜歡這個行業，并最終成為設計師，大概都是因為如此。包括我個人，也是美感的追求者，常常為了幾像素的細節，調整無數稿。也常常沉浸于自己的作品無法自拔。
但是，美感之后，設計還需要什么？
路易斯·沙利文曾講過：「形式追隨功能」。而功能存在的意義，則在于解決問題。視覺的形式、美感，很多時候只是包裹在外側的表層，而解決問題才是設計真正的核心。視覺的表現，一定要遵循解決問題的方式，向用戶傳遞恰當的信息，最終引導用戶以此來解決問題。
因此，我更希望更多的設計師，在追求美感的同時，能夠重拾設計思維本身，尋找設計最根本的價值。
我們其實可以站得更遠一些。學會去理解事物，學會用設計去解決問題。再以此為基礎，通過你的設計能力去塑造它、點亮它，讓它成為一個真正美好而又有價值的設計。
而設計的價值，將會成為你的價值。
互聯網時代中的數字產品設計，需要什么樣的設計思維？或者說，當下我們需要什么樣的設計思維？
這個問題的答案，好像一直在變。
互聯網本身便是一個新的形態，1989 年「萬維網」發明，1996 年中國引入互聯網，到今年已經有大約 24 個年頭。我們經歷了不同的互聯網時期，而「設計」的概念也一直在變化中。
Internet 1.0 PC 互聯網時代。在這個時代，我們將大量的信息虛擬化，并通過網絡進行信息傳遞。而我們的「設計師」們大多被稱為「美工」，我們的「設計思維」，便是將信息變得更好看。
Internet 2.0 移動互聯網時代，或者稱為消費互聯網時代。自從 2007 年喬布斯發布第一代 iPhone 之后，疊加 4G、wifi 等技術，手機成為日益重要的終端，世界逐漸進入了移動互聯網時代。伴隨著 iPhone 與其應用的出現，喬布斯讓所有人理解了「用戶體驗」的重要性。我們不再是「美工」，我們變成了「UI 設計師」、「交互設計師」。而這個時代，我們的設計思維變成了「用戶體驗思維」。
那么，下一個時代在哪里？我們的設計思維又將如何轉變，才能適應下一個時代？
1. 紅利消失、增長觸頂，互聯網下半場到來
最近幾年，我們已經能夠明顯地感知到——互聯網的「寒冬」真的來了。隨之而來的，便是互聯網的發展方向似乎也正在發生變化。于是大約從 2017 年開始，互聯網圈內逐漸出現一個新的名詞——互聯網「下半場」。人們普遍認為，中國的互聯網將會由消費互聯網時代進入下一個時代，即互聯網下半場。
我并不完全認同互聯網「下半場」的稱呼?；ヂ摼W本身是一個年輕的行業，中國互聯網「下半場」，其實更像是互聯網發展方向轉變的標志。
因此，我們認為的下一個時代的方向，也許將會是 Internet 3.0——即產業互聯網時代。
互聯網為什么必須要進入下一個時代？
對于互聯網企業來說，一方面在成本端，隨著人口紅利消退，勞動力價格上升，企業的成本將逐漸升高，倒逼管理者使用系統和工具來提率；另一方面，在收入端，野蠻增長的時代結束，增量經濟轉向存量經濟，紅利經濟轉向效率經濟。
在「成本」與「效率」的雙重壓力下，再加上整個市場經濟的下行周期，整體經濟出現下滑，而一些依靠融資的互聯網公司將難以為繼。因此企業不得不尋找方法來提升效率，降低成本——而這正是企業級軟件（ToB 產品）最擅長的地方。
因此，在互聯網寒冬之下，ToB 市場便理所應當地開始被重視。
讓我們縱觀整個中國市場的發展，互聯網的興起雖然促進了消費領域的蓬勃發展，但產業領域的發展則因此受到了巨大制約。中國率先從消費端、從第三產業開始數字化，然而在第一、二產業的數字化進程似乎并不是很快。一個重要的原因是，人口紅利促使了消費互聯網的快速發展，而這種紅利讓人們忽視了產業互聯網的重要性。
在寒冬之下，我們終于發現，消費互聯網蓬勃的基石，正是底層堅實的產業互聯網。產業互聯網如果不能得到有效的發展，則整個市場經濟將無法更進一步地發展。
因此，產業互聯網時代的到來，是中國互聯網發展的需要，也將是大勢所趨。
2. ToB市場將迎來機遇
產業互聯網的發展，需要依托 B 端領域的發展，并逐步融入并帶動整個產業進入互聯網時代。那么，B 端產品在中國目前處于一個什么階段呢？
對于整個中國的 ToB 行業發展現狀，大多數的人并沒有一個清晰的概念。盤點中美上市的科技公司會發現，美國 toC 領域與 toB 領域市值之比是 6:4，但在中國這個數字是 20:1。
雖然互聯網的整體環境不同，但中國 ToB 行業的發展，顯然是落后太多了。于是乎，2018 年開始，BAT 大舉布局，PE、VC 加速進場——中國 B 端產品已經逐漸進入必須發展的時候了。
中國市場已經坐擁全球最發達的消費互聯網體系，而產業互聯網的發展卻嚴重滯后。
同時，對比 B 端中云計算領域的 IaaS、PaaS、SaaS 三層架構，全球市場中 SaaS 占據了 52.5% 的份額，在中國卻是 IaaS 分走了最大的蛋糕，占比達 61.2%。中國市場 VC 的投資總額已經與美國相當，在 SaaS 領域美國企業獲得了全球 70.1% 的融資，而中國只有 11.7%。
因此，在互聯網下半場，相對于 ToC 行業的觸頂，ToB 行業將會迎來歷史級的發展機遇，隨之而來的將會是產業互聯網時代的逐漸到來。而在整個 B 端產品的類目中，SaaS 產品作為企業級軟件中最集成的產品，也將隨著這股浪潮迎來爆發式的增長。
什么是 SaaS 產品？很多同學并沒有接觸過 B 端行業，平時用到的也都是 C 端產品，所以對 B 端產品的了解比較少。在 B 端行業最熱門的云計算領域中，目前普遍會分為三層架構。SaaS（Software as a Service–軟件即服務）；PaaS（Platform as a Service–平臺即服務） ；IaaS（Infrastructure as a Service–基礎架構即服務）。
附：云計算領域，三種不同的架構與對應的服務。
PaaS 基于 IaaS 實現，SaaS 的服務層次又在 PaaS 之上，三者分別面對不同的需求。越往上層，產品的集成度越高，提供的服務也就越豐富，而用戶所需要的自行解決的東西就越少。而最頂層的 SaaS 產品，便是用戶可以直接購買并使用的云端產品。
我們為什么要了解這些趨勢？
因為一個新的時代，對應一場變革，也將成為一次新的機會。不管是 SaaS 產品還是其他 B 端產品，都將在新的時代中逐漸得到重視。而 C 端產品的發展策略，也將迎來新的變化。對于許多設計師來說，這將會是一個新的機遇。
順勢而為，方能乘勢而上。
那么，在逐漸到來的產業互聯網時代，設計師需要注意哪些東西？設計思維又將進行如何轉變？
產業互聯網時代，意味著 B 端產品將得到重視，并與 C 端產品逐漸趨于平衡。因此，了解設計思維的變化，我們首先要從 B 端與 C 端產品之間，在產品設計與產品策略之間的差異性說起。
1. 服務對象的差異性
從服務對象來看，C 端產品的服務對象是人，產品的目標是針對人們生活方式進行的變革、升級。而 B 端產品的服務對象則大多是企業，目標是幫助企業進行商業效率的提升，從而產生價值。
服務對象的差異性，決定了產品在發展策略也將存在著較大的差異性。
2. 產品「打法」上的差異性
從宏觀的打法上看，消費互聯網時代會更求「快」，而產品互聯網時代則會更偏「穩」。
C 端產品的服務對象是人，而人的需求在個體差異性上相對變化較小，這就決定了 C 端產品通常都擁有廣闊的用戶市場。
因此，消費互聯網時代就像是資本在遼闊平原的角逐，長驅直入。講究快速占領市場，不斷地試錯、不斷地調整。從團購到直播，從打車到短視頻領域的興起，再到最后的單車大戰落幕。消費互聯網時代的每一次風口，都伴隨著各種「游擊戰」式的競爭。入場速度、快速調整能力、資本深度，都直接影響了最后的結果，而最終的結果也往往是勝者為王，敗者將快速地被市場淘汰。
B 端產品的服務對象是企業，而企業間的需求差異性則非常巨大，這就決定了 B 端產品通常需要較強的縱深能力。相對應的，其用戶群體在總量上就比較小、但也相對穩固。
因此，產業互聯網就像在崎嶇叢林的蹣跚前行，漸次演進，如同一場曠日持久的拉鋸戰。一方面，產業互聯網的鏈條非常長，需要長期的深耕、積累才能逐漸站穩腳跟。而這也導致了產品的壁壘足夠深厚，同類產品在短期內無法快速跟進。另一方面，企業間的差距需求的差異性非常大，因此產業互聯網存在非常多的細分市場，不同的產品各自在不同的賽道中深耕。而其最終的結果往往是百花齊放，各自盛開。
3. 整體行業的協同發展
雖然整個市場都不斷地強調——ToC 增長觸頂，ToB 是一片藍海。但這并非是「取而代之」，而是逐漸走向整體的「協調發展」。中國 ToB 的發展的一個重要根基，其實是「中國擁有世界上最成熟的消費互聯網體系」這一巨大的優勢。
因此，ToC 在很長的時間內，仍然會是互聯網的主力，而 ToC 市場的轉型，也將有賴于 ToB 產品所提供的服務。
而隨著中國將「互聯網+」政策上升為國家戰略，更是明確了以互聯網帶動傳統產業的發展方向。因此，互聯網的下半場，即產業互聯網時代的最終形態，將是互聯網與傳統行業的「融合式發展」。
ToB 產品將會成為帶動互聯網下一輪發展的核心驅動力。一方面幫助 ToC 領域完成轉型，進入更健康、更穩健的發展階段；另一方向，ToB 領域賦能傳統產業與互聯網相融合，并最終完成產業升級。
4. 產品形態的融合與趨同
整體產業的融合趨同，意味著產品的特性也將互相融合。一個很重要的現象是：C 端產品逐漸變得不那么 C 端了，而 B 端產品也越來越變得不像 B 端了。
比如 C 端產品的主流賽道中，隨著頭部產品的賽道日漸趨于穩定，其產品體量也因為業務擴展而不斷增加。同時，因為產品體系的逐漸形成，為了服務更多的 C 端用戶，會有越來越多的 B 類用戶進入平臺，而為了滿足 B 類商家的需求，產品的 B 端屬性變得越來越強了。
而隨著 B 端產品的不斷受到重視，原先不被重視的產品 UI、用戶體驗也逐漸在 B 端產品中得到加強。B 端用戶雖然服務于 B 端，但使用者終究是人。而隨著競爭的不斷加劇，原來的「重功能、輕體驗」思路逐漸式微。我們逐漸發現，許多 B 端產品長得越來越像 C 端產品了，甚至在 UI 和體驗層面做的與 C 端產品不相上下。
因此，隨著產品屬性的融合趨同，意味著設計思維勢必會與消費者互聯網時代存在差異。而我們的設計思維將不僅僅局限在誕生于消費互聯網時代的「用戶體驗思維」。我們需要更新的、更廣闊的設計思維，以滿足下一個時代的產品發展需要。
那么，新的思維是什么？它將從何而來？
從整個市場的協同發展，到產品形態的融合趨同。那么，我們的設計思維需要如何進行相應的變化？是同樣進行「融合趨同」，還是另辟蹊徑，尋求新的視角？
1. 關鍵詞提取
首先，不管設計思維如何變化，它一定需要同時滿足兩種產品設計思維的特性。通過前文的分析，我們可以在產品設計特性的維度，提取各自的關鍵詞進行分析：
產品體驗：誕生于消費互聯網時代的用戶體驗思維，在產業互聯網時代依然是產品設計中最重要的部分。無論是 C 端還是 B 端產品，用戶體驗必然是產品的核心競爭力，只有足夠好用、好看，產品才能獲得更多用戶，最終獲得商業上的成功。
靈活性：在消費互聯網時代，在激烈的競爭中，C 端產品的靈活性的打法對于產品的突圍至關重要。而未來的 B 端產品競爭將會加劇，這就需要 B 端產品也逐漸需要較強的靈活性。
成長性：產品的發展必將伴隨著不斷的變化，特別是具有一定體量之后，產品設計的成長性將至關重要。因此，產品的設計是否能夠預見未來發展，滿足不斷變化的產品形態，伴隨著產品不斷地成長，也將成為產品是否能夠持續獲得成功的關鍵因素。
產品效率：因為產品服務對象的關系，B 端產品一直是產品效率的代名詞。而在人口紅利消失與經濟下行的壓力下，產品效率將成為所有企業關注的重要因素之一。產品的效率不僅影響著企業的成本，也是產品競爭力的重要體現。
這四個關鍵詞，將會是我們在未來所需要關注的四個重點關鍵詞。越是往左，則「C」屬性越強，因為它更多地從用戶的角度出發，更關注用戶體驗。而越是往右，則「B」屬性越強，因為它更多地從企業的角度出發，更關注企業的長期發展。
2. 跳出單一層面，尋求新視角
在四個關鍵詞中，我們會發現，特性越是靠右，其所需要的整體性就越強。要滿足靈活性，就需要用戶體驗與產品策略相關聯。要滿足成長性，則要進一步結合底層的開發能力。而產品效率的提升，則需要產品的設計與不同層面都有著緊密的耦合。
在互聯網設計發展的過程中，我們從單點只關注視覺表層的「美工時代」，逐漸發展為關注線性的「用戶體驗思維」。在對于產品用戶體驗層面，確實有著長足的發展。
但是，單一層面的用戶體驗思維，在逐漸成熟的互聯網時代中，逐漸顯示出了一定的局限性。我們的價值局限于單一的體驗層面，我們似乎無法對產品形成更大的影響力，也難以為產品帶來體驗之外的更多價值。
因此，設計思維想要滿足新時代的需求，就需要同時滿足前文提到的四個關鍵詞。這就要求我們需要跳出單一層面，以全局的維度去思考產品的設計。
因此，全局性將成為未來的關鍵，我暫且將這種思維方式稱為——全局性設計思維。
全局性設計思維，即在設計過程中，始終能以更高的維度去審視全局，思考當下的設計。
何以全局，如何跳出單一層面？這種思維方式的前提，是你要首先了解整個產品（亦或是物體、組織等）的運行方式，清楚的知道整個產品需要達到的目標，從而準確、合理地對針對目前的局部做出設計，并最終構成整個完整的形態。
而「全局」的前提，是你擁有更高的眼界。你的眼界越高，你對產品、市場、甚至整個社會的洞察就越全面，你就能夠解決越大的問題，你能夠實現的價值就越高。眼界是基礎，解決更大的問題是目標，而全局性設計思維則是實現這個目標的方式與過程。
全局性設計思維，可以幫助我們跳出產品的單一層面，去思考從產品層、到體驗層、再到開發層這一完成的整體。讓設計滿足體驗層的同時，滿足產品層面的目標，同時讓產品的設計與開發高度耦合，將整個產品串聯成一個完成的整體。
好了，講了這么多，我們具體應該如何去運用全局性設計思維呢？
全局性設計思維，的應用方式非常廣泛。它并不是一個固定的方程式，而是一個更高層面的指導性設計思維，能夠通過不同的形式，來幫助你解決問題。
1. 全局觀——在生活思考更多可能
在嘗試這種思維之初，我們可以通過一些小的實踐，去鍛煉這種思維能力。
在日常的生活、工作中，其實我們有大量的事物可以練習和運用這種思維方式。比如你在裝修一個大房子，需要去選擇房子里的家具。當你在購買家具時，常規的思維方式是：這個家具在某個房間時應該是怎樣搭配的，所以我要購買什么樣形狀、顏色的家具，來滿足這個房間的需要。
但是，用這么思維方式來購買家具，將為對家具的靈活性與長期價值造成一定影響。從居住環境的長遠來看，也許這個家具有可能會因為某些原因，需要放到另一個房間，而它的形狀、尺寸、配色卻無法滿足其他房間的需要。最終，我們只能重新購買，或者接受一個風格、尺寸上并不搭調的房間出現。
因此，當我們在購買家具時，我們是否可以利用全局性設計思維，從整體空間的角度出發（而非單個房間），去思考如何讓家具滿足更多空間需求。長此以往，我們不僅可以打造一個風格統一的大空間，同時也能增加每個家具的利用率，在無形中也增加了這個家具本身的價值。
之所以舉家具這個例子，是因為這個原理與產品設計的原理非常類似。你可以將這個房子看成是整個產品，而家具則是不同的組件。通過不同的家具（組件），構成了我們的不同功能模塊（房間/功能區），而所有的功能模塊則構成了整個產品（房子）。
房子（產品體量）越大，房間/功能區（功能模塊）就越多，家具（組件）的多樣性、復雜性就越高，我們就越是需要從全局的角度去思考裝修的統一性（風格體系化）和家具的通用性（樣式組件化）。只有這樣，我們才能更好地去打造一個風格統一、體驗一致，同時又具備足夠自由調整空間的「大房子」。
2. 全鏈路——從全流程中重新思考設計
當你仔細地去理解許多非常著名的設計作品時。你會發現，幾乎所有優秀的、巧妙的設計，往往在設計中都體現了全局性的設計思維。它不僅僅解決著當前的問題，同時也能夠解決更大的問題，發揮巨大的價值。
比如著名的坂茂衛生紙的設計，看似普通，只是將衛生紙的軸心從圓形改成了方形，但它卻成為了舉世聞名的、公認的好的設計。為什么呢？
我們先了解一下這個設計為什么好。
首先，傳統的圓形紙卷拉出來的紙會比你實際需要的更多。而方形紙卷則由于阻力的作用，讓你用得更少，從而起到了解決資源的作用。其次，在運輸過程中，圓形的紙卷之間會產生很大的空隙，而方形紙卷則能夠緊緊靠在一起，提升空間利用率，從而起到降低運輸成本的作用。
這簡單的設計，居然發揮了如此大的作用。
那么，為什么我們在設計時就沒有考慮到這些問題呢？因為我們從最開始，就沒有從「紙」的整個全流程來去思考問題。
讓我們「站的更遠一些」，紙這個商品，并非只是我們見到的在商店售賣的那一刻。它從工廠中制造完成，通過運輸送到每個超市中，當我們購買以后，它又會在很長一段時間內，出現在衛生間，陪伴你使用的每一刻。我們可以將整個流程分為 3 個場景，而每個不同的場景，又將會對紙本身有著不同的影響。
當我們能夠考慮到衛生紙的運輸過程時，我們就可以通過設計去降低運輸成本；而當我們可以考慮到用戶的使用場景時，我們就可以通過設計，去提升阻力，降低使用量，間接地去提升用戶的使用體驗。而當我們通過全局性設計思維，可以同時解決這三個問題時，我們的設計就是好的設計，就擁有了更高的價值。
發現了嗎，為什么你沒有想到相同的設計方案？設計能力并不是關鍵，設計思維才是指引你做出好的設計的前提。當你能按上述的方式，去思考整個流程、不同的場景，我相信大多數的人都能夠設計出坂茂的設計方案，甚至比這個方案更好的解決方式。
通過前面的兩個案例，相信大家已經了解了全局觀、全鏈路兩種應用方式。
那么，我們最最最關心的問題——如何在業務中去使用這種思維呢？
在產品設計中，全局性設計思維也有著非常多樣化的使用方式和場景，在之后的文章中我也會講到很多應用方式。但是，在所有的方式中，我認為最為有效的，便是以全局性設計思維，幫助產品去構建一個完整的設計體系。
什么是設計體系？談及設計體系，大多數設計師會認為，設計體系就是設計規范?！覆痪褪钦覀€名次包裝一下規范嘛？」
我們為什么需要設計體系？它與設計規范有何不同呢？
設計規范是設計師最為熟悉的一種規范文檔。在產品設計時，優秀的設計師通常都會建立設計規范。然而在實際的項目中，設計規范往往無法難以有效實施。比如在開發眼中，規范并不符合開發規則，過于碎片化。而產品經理通常又不會去了解設計規范，因此在構建產品框架時也常常隨意發揮。
很多項目做到最后，設計規范僅存在于紙面的意義，并隨著項目的發展逐漸混亂。為什么會這樣？
因為不同職能間的思考方式存在差別，設計規范對于其他職能來說經常難以理解與運用，無法與其他職能形成有效聯動。
設計規范僅僅是基于視覺層面的規范，它是一個「平面」。而設計體系則是貫穿于產品的每個層面的、與產品深度結合的完整體系，它是「立體」的「有機生命體」。
設計體系的核心在于「體」，它是貫穿于整個產品的完整體系。設計體系由設計師創造，并深度融合于產品每個部分。它能夠讓產品更緊密、更統一、更有序，伴隨著產品的生長，與產品共同進化，并最終推動產品的發展。
創造并推動這一體系，則要求設計師需要更全面的能力。只有充分地去理解并參與產品的每個部分的設計，才能讓設計真正延伸至產品的每個部分。
而創造這一切的前提，便是全局性設計思維。
羅馬不是一天建成的，設計體系也是如此。設計體系的建立是一個漫長的過程（與產品體量相關），需要在前期投入更多的精力。但若是你的方法得當，就會在項目中越來越輕松，并以此形成良性循環，而你也會越來越有成就感。
如何正確地去構建設計體系呢？我在這里總結了幾個要點：
樹立觀念
首先，樹立長期的體系化意識是必要前提。在任何項目中都要時刻保持體系化思維，著眼于整個項目，去尋找體系化的推動時機。當你在潛意識中擁有這種思維之后，你會自然而然的將其植入到設計中。
以解決問題為導向
體系化并非憑空建立，而是建立在解決問題的基礎之上。設計體系的本質，就是由無數個標準化的解決方案，最終構成的一個完整的體系。因此，我們要以解決問題為導向，以全局性思維去思考問題的本質，最終建立適用于全局設計體系。
以小為始，重視質量
腳踏實地，從小處入手，去發現產品中最基礎的一些問題。表面上看這些問題，對項目影響不大，但他們數量龐大，加在一起便會嚴重影響整個產品的效率。因此，我們要首先建立高品質的基礎體系，再以此為基礎構建更大的體系。
不要一開始就設法建立一個巨大的體系，那樣只會是一盤散沙，因為它的結構是無序、混亂、不健康的。而這也是大多設計規范缺乏有效性和可實施性的根源。
梅拉妮·米歇爾的《復雜》一書中講到，任何復雜系統，都是由無數個體通過簡單的算法所構成的。在算法領域也是同樣的原理，一個優秀而強大的代碼，必然是由無數個小型模塊，通過簡單的算法耦合形成巨大的代碼矩陣。基礎算法越強大、代碼結構越「健康」，可擴展性和靈活性就越強，其能力就越強大。
從規范入手，由面到體
從本質上來說，設計體系是由「多個層面的規范」組合而成的。因此，由設計師推動的體系化建設，往往最初都是從設計規范這一「單層規范」開始。但是，設計體系的建設需要將單層的規范，通過不同的方式，轉化為不同層面的規范，最終由面到體，形成體系化。
換位思考，尋求跨職能合作
設計體系的建立與維護，通常需要多職能的通力協作。因此，我們需要經常換位思考，在完成設計的工作，幫助其他職能完成目標。只有這樣，才能得到更多的信任，并以此為基礎推動更多體系化的建設。
比如我在設計一個功能模塊的頁面時，首先會與不同模塊產品經理進行交流，了解不同的業務需求，并從產品層面就開始尋求統一性與通用性。這樣的話，當其他模塊需要同一個功能時，前端便可以直接復用，同時后端的數據也可以進行互通。而在開發端，我也會詳細了解不同端的開發實現原理，務求設計規范與開發規則在理解上的一致性。這一既方便了開發理解規范，同時也從根本上提升了開還原的準確性。
長此以往，整個團隊就能夠建立良好的溝通和互信關系。有了這種默契，設計體系的推動就容易多了。
保持優化，不斷成長
設計體系的另一個重要價值在于，它是可以伴隨產品不斷成長的。所有產品都是在發展中不斷變化的，過分僵硬的規則，將會對產品發展起到反作用。
在業務發展中，產品一定會不斷地加入新的功能模塊，并對原有頁面作出相應的調整。因此，設計體系需要時刻與產品策略保持一致，及時與上下游職能溝通，不斷地針對產品發展進行優化，以保證設計體系能夠符合產品的發展需要。
使用正確的推動方式
體系化最終能否成功實施，推動的方式至關重要。
在日常的項目中，大多數的業務方對設計體系了解甚少，也難以體會其中的價值。因此，他們通常會認為這些東西毫無必要，多數情況也不太愿意配合體系的推進。如果強行推進，反而會引起不必要的阻力，招致反感。那么，我們應該如何正確的去推進設計體系建設呢？
為他人帶來價值：首先，尋找雙方共同的利益點是首要任務。也許是可以讓其他職能的工作更，也許能夠促使其達成 KPI，再不直接，那也一定能夠為整個產品帶來價值（不然你也沒必要推了）?？傊O計體系一定要能夠為他人帶來價值，這樣才能順利推進。否則人家憑什么要協助你推進，因為你美麗可愛嗎？你也可能比較可愛，但總歸是不能一直這么來吧。
在解決問題后提出方案：不要一開始就啪一下拋出一個「宏大的理想」，大部分人會覺得你不切實際。你只需要通過這個體系，幫助業務方先解決一個問題，然后再提出你解決方式的來源——一個嚴謹的、可驗證的、長遠價值的體系化解決方案。
尋找合適的推動時間：最后，對于設計體系來說，尋找到正確、恰當的推進時機至關重要。比如當你在平時突然想要提出，對現有品牌進行升級時，大多數業務方都會認為你是沒事找事。而如果情況是在新的一年中，產品進行了概念的升級，這時候你將概念以及未來的品牌規劃融入在你的方案中，再去推進品牌升級，就會容易很多了。
-本文旨在引導大家更好地理解和學習這種思維方式，想要用好全局性設計思維，光靠講是遠遠不夠的。最重要的是能將這種思維帶入到產品中，為業務帶來更大的價值。
因此，在后續的幾篇文章中，我將通過不同類型案例，為大家深入講解全局性的具體實踐案例。
全局性設計思維 | 如何打造強大的品牌體系
為什么要建立品牌體系？品牌體系有哪些價值？設計師應該如何推動品牌體系的建立？
本文將帶你了解網易智慧企業品牌體系的建設與推動全過程，聊一聊品牌體系建設的那些事兒～
FishDesign組件庫 | 從零到一構建企業級UI組件庫
我們為什么要建立組件庫？在產品的什么階段需要組件庫？如何抽象業務組件？組件庫設計過程中有哪些重要的細節需要注意？
本文帶你深入了解，網易 Web 端組件庫——FishDesign 組件庫從零到一的完整全過程。
全局性設計思維 | 如何構建事業部級大型設計體系
設計體系有什么價值？如何基于不同的業務建立設計體系？設計師如何推動體系化建設？在體系化過程中有哪些需要注意的地方？
我將會在這篇文章中，為大家介紹網易智慧企業設計體系構建全過程。
樣式組件化+規范體系化，形成產品設計體系，整體重構產品線。
結合品牌體系，推動事業部更多產品加入體系，形成智慧企業 Web 端產品設計體系。
推動更多產品/業務融入體系中，讓智慧企業設計體系不斷成長，賦能業務發展。
好吧，似乎文章又寫得偏長了一些。只能說，想要認真地講清楚一個道理，確實不是一件容易的事情。
設計思維本身并不復雜，但想要講清楚它的背景、原理及價值，就需要把它整個掰開來講。而為了確保設計思維的可實施性，又需要經過大量的實踐研究，自己能夠走通以后，才能與大家分享。
坦白講，似乎整個社會都在追求快節奏、碎片化閱讀。但若是因此而喪失了自己學習的節奏，那么等于是沒有節奏的，你的知識體系也將是東拼西湊，無法形成一套完整的體系。這也是我更新比較慢的原因之一，希望大家讀完文章，能夠切實地得到一些東西，這就很有意義。
文章來源：優設 作者：Jady13
QQ 游戲中心經過設計改版之后，我們重新設定了整體的世界觀——多彩的游戲宇宙。并且對多個模塊及內容進行了新的設計升級，其中也包括重要的圖標圖形。
1. 延展思考
因此基于目前較為完整的圖標圖形，希望可以拓展出更多不一樣的設計內容，并且可以應用在不同的位置，例如空白頁、運營內容、背景等等。
2. 問題分析
基于目前的圖形可以很明顯的得到 2 個問題：
3. 設計啟發
3D作為 2020 的主流設計趨勢之一，可以很好地表達設計氛圍。因此想嘗試跨次元的設計方式，從 3D 圖形的角度去思考，嘗試更多可能性。
下面主要是分享我在制作 3D 圖標中的一些方法和流程，以及 2D 與 3D 圖形設計中思考的差異性，希望可以跟大家互相學習，一起探討這方面的設計。
雖然是 3D 的圖標，但實際上使用到的軟件包括有：Cinema 4D（C4D）、Sketch、Photoshop（PS）、illustrator（AI）。
整體的大概流程：
3D 與 2D 最大的差別在于多一個維度來表達圖形，因此我們在 2D 向 3D 轉化的過程中，需要思考一些基本的原則，并且結合這些規則，降低 3D 圖標與 2D 圖標違和感。在這次的 3D 圖標中我總結了以下幾條基本規則。
1. 圓變球
在 3D 軟件中表達圓有 2 種方式：球體、圓柱體。在實際的設計中，我們需要根據實際情況判斷是否變成球體或者圓柱體，這里建議單體呈現的圓形設計成球體，在這種情況下球體相比圓柱體更能表達圓形的視覺感受。
例如下面氣泡的例子，球體化的表現比圓柱體化的表現更加飽滿，光影效果更加豐富。
2. 方變塊
與上面的規則比較接近。當我們在 2D 圖標中使用矩形之類的圖形，建議使用立方體來表達。優點：立方體可以增加圖標上的細節表現；增加厚度更有利于光影的表達。
例如下面禮物的圖標，我們在實際的 3D 場景下應該更貼合現實生活中的認知，設計成禮物盒子的效果。
3. 結合實際認知
除以上的 2 種建議之外，我們在實際建模的時候還需要結合實際認知而定。例如金幣、游戲卡的設計應該是帶有厚度的片形；錢包設計成折疊的效果。
4. 適當簡化圖形
2D 圖標向 3D 圖標的轉換過程中，需要適當進行簡化，一些不必要的內容可以適當進行刪減。主要的目的是：
5. 增強空間思維
2D 的圖標只有一個平面，因此大部分情況下是一種「紙片性」的思維，常規的 2D 向 3D 的轉換思維是增加厚度，但實際上出來的效果并不理想。因此在轉換的過程中，需要使用空間的思維去思考，在 3 維的空間中應該是怎么樣的。例如下載和收件箱的圖標，常規的思維可能是在 2D 的圖標上增加厚度，但轉換成空間思維就是讓其具有立體感和空間感的形體。
6. 圖標狀態補充
在實際建模的中會發現，很多模型在靜態下是可以進行簡單處理的，但結合動態或實際認知，就需要相關細節狀態補充。例如禮物和寶箱圖標的開蓋效果，因此把實際的蓋子和盒子/箱子的模型做出來，以便于動畫的實際表達。
在進入 C4D 之前，需要清楚不同圖形可以使用什么方式建模，因此我們可以進行一個簡單的分類，分為：常規圖形和異形。兩種圖形在建模中的方式會有一些小差異，當然一個圖標也可能包含這兩種類型，因此實際操作中可以靈活處理。
1. 常規形：使用基礎物體建模
部分簡單的有規則的圖形，可以直接使用 C4D 的基礎物體（例如：立方體、球體、柱狀體、錐體等），通過對基礎物體的調整后得到模型，例如下面的圖形。
案例展示
2. 異形：AI路徑+擠出
在實際操作的過程中發現部分模型較難通過基礎形調整得到，或是直接建模會比較耗時。因此我們可以導入 AI 路徑再擠出的方式來得到我們的模型。例如下面的圖形
案例展示
基于以上的以上 2 種類型的圖形，這里分享一下制作的過程和心得?？赡懿粔蛉?，但希望大家可以一起來補充互相學習。
1. 對齊中心點
基礎建模對齊中心軸點是一切開始的重中之重，這里會涉及到很多后續的調整和其他命令的應用（例如擠出、對稱等命令）。例如一些中高階的人物建模也是非常依賴中心點對齊來實現對稱命令的。
2. 結合圖像
在 C4D 視圖本身具有多視圖，可以結合不同視圖導入不同視角的平面結構進行制作，常見情況下的建?？梢詫肴晥D（例如角色、人物之類的）。而圖標相對來說是很簡單的，所以這里只應用正面視圖即可，其他的視角可以自行腦補后制作。
結合圖像的好處：
操作流程：正視圖下快捷鍵 shift+V 調出視圖背景——選擇背景——添加圖像。或在視圖選項中調出，然后配置即可。
3. 結合路徑
如上圖標類型中的描述，部分異形的圖標如果直接在 C4D 中繪制會相對耗時，因此我們可以結合路徑的方式，再使用擠出的命令來實現我們想要的模型，這樣可以大大提升異形物體建模的效率。
C4D 中對 AI 的圖層只會讀取顏色的邊緣，然后生成路徑。因此在 AI 中編輯的路徑，依據實際的情況選擇填充或者描邊，然后再拖拽進 C4D。如下產生的效果對比，左邊為填充圖形，右邊為描邊圖形。
操作流程：使用 AI 導出 8.0 版本的路徑——拖拽進 C4D——添加擠出命令——設置擠出高度及封頂樣式。
4. 使用變形器
一些簡單的形變可以通過變形器的應用，得到我們想要的造型。例如下面的案例，外星人臉是在圓形的基礎上使用 FFD 進行調整，而寶箱則在方形的基礎上使用錐化來達到圓弧的效果。
C4D 的渲染效果主要是依賴于材質和燈光的配合，熟練者往往可以依靠經驗有效率的制作，但我們也可以通過鍛煉總結出一些常用的材質參數或者布光的位置來提率。因此我也從這次的 3D 圖標制作中總結了一套關于材質和布光的方法。
C4D 場景的主光源我們可以通過全局光照+天空的方式來營造整體的氛圍，這組光的特點在于具有比較柔和的效果，并且模擬自然的環境光效。
全局光照開啟后，需要依賴燈光、天空光來對物體進行照射，如果設定后未增加燈光或者天空，在渲染時只能渲染出一片黑色。（全局光照——主要是模擬真實的光照效果，通過光源投射到物體上再經過無數次的反射和折射出來的效果，因此也能解釋為什么只加全局光照渲染不出來內容。）
操作流程：渲染設置——效果——全局光照
添加天空增加天空作為基礎光照補充
操作流程：地面快捷入口——選擇天空——添加材質球——勾選發光——添加 HDR 貼圖。
下面通過一些案例對比來看看全局光照及天空的對比效果
全局光照-開和關的差異
從下面的案例我們可以明顯看到差別，全局光照關閉后的圖標相對暗淡一些，整體圖標的光反射也相對減弱了許多。
有無天空的差異
天空有助于增強圖標的光感，添加天空后整體圖標的細節和質感也相對更加豐富。相對，無天空整體圖標質感則有所下降。
天空是否增加HDR貼圖的差異
添加 HDR 貼圖可以增強場景內物體的環境反射，讓物體材質更加豐富增強細節質感。在一些強反射的場景下非常依賴 HDR 貼圖的使用。從以下案例對比，可以明顯看到差異性。
整體添加三盞燈光來營造整體的場景氛圍。主要分為：主光（最強）、補光（增強陰影面的亮度）、背光（補充背面環境的光源，增強環境光氛圍，勾勒輪廓）。在實際的場景中可以根據實際的反射效果和氛圍，調整燈光的位置、與物體的間距、明暗度。
燈光對于物體的作用會隨著顏色的差異，產生的光亮度也會有所差異，因此在實際的使用過程中，對于燈光的位置、反射的細節都可以進行微調來達到最優的效果。
色相的對比：不同色相在同樣的燈光作用下產生的效果具有稍微較小。
明暗的對比：深色和淺色在同樣的燈光作用下產生的效果差別較大。
實際案例對比：從下面的實際案例對比可以明顯看出同樣燈光下不同色相的明顯差別，綠色的兩部產生過度曝光。因此可以通過調整燈光的距離或者亮度來解決這一問題（如上面燈光分布建議）。
3D 圖標由于相對簡單，材質上主要使用顏色和反射的配合就可以得到不錯的質感。當然如果希望在質感表現上更加豐富，亦可考慮增加其他的內容項來進行補充
顏色的設定
圖標的顏色基本上與原圖標的顏色保持一致，但部分顏色但實際渲染效果會存在些許差異，因此我們在材質上也可以根據視覺效果進行微調，視覺上保持統一的顏色感受。例如禮物的圖標，如果按原來的顏色，亮部會過渡曝光，因此適當提高了亮部顏色的飽和度。
顏色偏差
在 3D 的場景內是通過各種光與顏色的反射而成的，因此即便同樣的顏色，在實際渲染出來的 3D 圖標和 2D 圖標也會存在一定顏色偏差。
反射是本次 3D 圖標中材質非常重要的一環，基本的效果都是來源于對反射的設定。整體主要設定了反射的類型、粗糙度、反射強度、高光強度、層遮罩的顏色。由于圖標的顏色并不完全一致，因此在粗糙度、反射強度、高光強度是一組動態的參數。
參數變化的對比
如下面的案例，針對不同顏色的圖標在粗糙度、反射強度、高光強度上都有差異性，因此不是說設定好一組參數之后就那個完全適用所有的顏色，因此這里會根據實際情況調整，但整體的視覺效果保持一致。
層遮罩的設定差異
除了基礎的反射類型及參數，還需要在層遮罩中添加菲涅耳來增強反射的豐富度。默認的菲涅爾是一組黑白的顏色材質，我們可以通過調整暗部的顏色來增強圖標的顏色飽和度和豐富度，如下案例對比。
靜態的 3D 圖標顯得精致，增加動效之后的 3D 圖標則除精致外，還更加富有趣味性和新鮮感。3D 的動效與 2D 有著明顯的差別，可以更多維度地思考物體的運動軌跡、變化方式。
首先我們需要根據不同造型對需要制作動效的圖標進行簡單的分類，這個分類的主要作用在于明確不同圖標的動效設計方式，為動效的設計方式進行鋪墊。根據已有的圖標劃分為：單體形、組合型、拼裝形。
單體形
圖標以單個或單組形體呈現，或者整體造型屬于某個已存在的事物或者形體，整體圖形內容具有不可切割性。
組合型
圖標通過兩組或兩組以上的圖形內容組合而成，圖標由主形（圖標實際的外輪廓造型）和點綴圖形（用于圖標表意或者提升圖形內涵）組合而成的圖標，圖標可進行拆分或者重組后形成動效。
拼裝形
圖標本身可能在現實中不存在的事物或物體，通過創意思考而得到的圖形，圖標的動效更具有可發散性和可重塑性。
結合上面的類型差，在設計動效的時候也會稍稍不同。重點在于表達不同的圖標具有的特性，因此我們可以根據這些特性去設計圖標的動畫方式。
自體運動
對應單體圖形，圖標動效通過自身的位移、旋轉、形變而產生，這類圖標的動效比較靠近現實生活中接觸的感知或圖形動效本身具有普適性認知。例如火箭升空、UFO 飛碟、放禮炮、開寶箱等。
組合運動
對應組合圖形和拼裝圖形，多圖形運動組合而成，圖標的多個部件可從不同軸向開始進行不同的軌跡運動，最終進行完整的圖標融合。各個部件本身可能也存在位移、旋轉、形變等動效，可以更大程度豐富圖標的動效表現。
部件運動
整體動效相比前面兩種類型較為簡單，通過某個圖標上的部件運動來表達動效的內容，因此這個部件需要是圖標上較為明顯的圖標特征，這樣更能讓人具有記憶點。
音效是這次 3D 圖標設計的點睛之筆，結合音效可以更加豐富地表達圖標動效的趣味性。不同的圖標動畫反饋出來的音效是不一樣的，因此賦予對應的音效反饋才是更合理的表達。
1. 選擇音效
在實際的配置音效的過程中發現，部分圖標比較難找到相關聯的音效。但我們可以通過較為類似或者可以表達出該圖標動畫過程中的聲音反饋的音效。例如活動小禮炮用的是開葡萄酒塞的聲音，開寶箱用的是開門的聲音，飛碟（UFO）用的是一組電子音效等等，并且從相關聲音中竊取其中一段需要的。
2. 組合音效
部分圖標的動畫效果很難通過一條音效進行表達，因此需要疊加 2 組或者 2 組以上的音效來豐富整體的感受。例如手柄人圖標疊加了三組不同的音效來表達，游戲卡疊加 2 種不同的音效。
3D 的圖標或 3D 類型的內容如何與 UI 結合？相信大家也時有思考這方面的內容。基于這次的 3D 圖標設計，我也進行了初步的嘗試，從幾個方面來簡單聊聊這方面的內容。
1. 3D圖標對于UI設計的作用
在嘗試之前，我們需要明確 3D 內容對于 UI 設計作用是什么？我簡單總結了幾個關鍵點：
2. 3D ICON X Tab bar
當我們設計 Tabbar 的時候，首先想到的表現方式往往是有趣的圖標圖形設計、結合動效之類的方式。但我們或許也可以考慮使用 3D 的圖標+動畫的方式來表達我們的設計。
3. 3D ICON X 運營內容
一些相對簡單的運營內容，我們可以考慮將元素進行 3D 化設計，這樣可以一定程度增強整體運營的視覺表現力。
4. 3D ICON X 空白頁插圖
3D 插圖是 2020 的設計趨勢之一，結合 3D 的插圖讓整體的設計更加具有氛圍感。
5. 3D ICON X COVER
將背景中的某些元素結合 3D 圖形進行設計，讓整體的氛圍更加具有空間感和立體感。
本次結合實際項目中的內容進行不同維度的設計嘗試，并且希望，可以從中去尋找到更多設計的可能性和突破點。當然這只是系統化設計思考中的一步，但可以啟發后續更加深入的 3D 設計探索。
文章來源：優設 作者：ID設計站
這次我們不聊視覺，也不暢想未來，只說說當下 HMI 產品設計與交互體驗。
本文內容會涉及一些專業的汽車知識名詞，因為篇幅有限，如有些知識名詞不太明白可以百度一下。
說到 HMI 大多數設計師應該是既熟悉又陌生，HMI 是 Human Machine Interface 的縮寫，「人機接口」，也叫人機界面，人機界面（又稱用戶界面或使用者界面）是系統和用戶之間進行交互和信息交換的媒介， 它實現信息的內部形式與人類可以接受形式之間的轉換，凡參與人機信息交流的領域都存在著人機界面。
聽起來是不是覺得這不就是 UI 嗎？有什么區別嗎？似乎差不多，幾乎是沒有區別的，只不過是在某些場合和設備上管他叫 UI，比如移動端設備，而在另外某些場所和設備上管他就叫 HMI，比如汽車車機和數控機床。所以這個概念也不用去特別較真，HMI 就權當作是汽車上的 UI 界面吧。畢竟汽車是高科技與工業結合的完美產物，「HMI」念出這個詞時候就感覺是蠻專業的！很般配！
剛才說 HMI 最早更應用于工業上，比如常見的各種機床、制造裝備。
或者說讓時間再向前推進一點！
而這里通常意義的 HMI 則更加聚焦點，基本特指汽車車機或者車載多媒體設備。
說到這里還是要從車載儀表盤說起，從德國人卡爾·本茨發明世界第一輛汽車，距今已經 100 多年的時間了，在那些還沒有 HMI 這個名詞的年代，那么他是以什么形態出現的？那就不得不提「儀表盤」了。
當然寫這篇文章并不是去評測誰家 HMI 更優秀，而是希望通過一些假設、實驗和推斷，和大家一起來探討一下如何更有效地設計 HMI。
屏幕越大越好？車內到底需要幾塊屏幕？
我們先從屏幕開始。
說到屏幕，設計師都是比較敏感的，因為我們最終的設計交互創意都是需要都是在屏幕上顯示展示出來的，HMI 當然也不例外?，F在在車載屏幕上你能看到最大尺寸多大？
拿特斯拉為例，Model S 和 Model X 車型都是 17英寸，Model 3 為 15 英尺。
當然他肯定不是最大的，熟悉汽車朋友你應該知道我想說誰了，沒錯就是他！擁有 48 寸可多段升降屏幕的 BYTON 新能源概念車 M-Byte！48 寸的確很夸張，難道屏幕越來越大就是未來 HMI 的方向嗎？
當然這個問題肯定是否定的，為什么？那就要從車載屏幕的作用來說起。
首先我是作為一個曾經就職于汽車公司的設計師，并且是一名地道的汽車發燒友，憑借對汽車還算熟悉和熱愛做出一些產品交互分析，以下如有不妥之處還望海涵。
按照功能場景總體可分為三類：主行駛狀態信息、附設備狀態信息、多媒體 & 外設
不可缺少還需要與使用者、場景結合，我們先來做一個大概的用戶畫像。
對應這些需求，汽車需要有儀表臺（屏）控制和顯示的區域有五個。
五個區域分別是：
其中前三個是主流配置，后兩個比較少見。
關于汽車設備這塊我們不做深入展開了，畢竟這篇文章主要討論的還是設計，直接看結果！
題外音：屏幕安全性的考量
汽車是比較特殊的設備，基于安全性考慮，汽車內屏幕尺寸不宜太大與太多。
屏幕總體為玻璃材質，但與車窗擋風玻璃的材質不同，當汽車遭遇碰撞的時候，車內屏幕極易破損并形成尖銳物，極大可能會乘坐人員造成二次傷害，所以車內屏幕不易太多，更不易太大。雖然車載屏幕變大變多已不可逆轉，而且隨著屏幕技術的提升，柔性 OLED 的應用也將會在一定范圍解決安全問題。但也需要汽車相關設計者多在安全方面進行考慮，任何產品體驗應該建立在安全基礎之上的，特別是交通工具。
為什么大屏幕操控成為了當前的 HMI 主流了呢？那不得不去提一下另外一個我們熟悉的設備——手機！
同樣一個有限的區域，如果用物理按鍵那么這個區域只能是固定的功能，而屏幕就可以無限擴展。特別是在汽車中控屏上集成內容會很多，體現就更加突出。
但是在汽車上的全部使用屏幕真的是最佳選擇嗎？顯然這是有待商榷的。
不可否認屏幕的確有很強的擴展性，但是缺點也是明顯的：1.觸控反饋缺乏 2.交互效率不高
對于這樣的判斷，我們可以通過兩個實驗來進行驗證。
將類似于 Surface Dial 這種智能按鈕交互裝置引入汽車的屏幕控制中，每個按鈕可以根據情景進行自定義，并且吸附到汽車屏幕的任何位置進行交互操作，相信這一定是一種全新的使用體驗。當然這一定是需要解決比如吸附力、安全性等一系列問題。
雖然目前的屏幕還無法做到完美觸控反饋，但已經出現了一些新的硬件技術來試圖解決這些問題，比如 Tanvas Touch，其定義為 「手指與觸摸界面之間的電子壓力控制」。簡單來說他們的產品就 「皮膚的磁鐵」 一樣，能夠更加精準地感應手指的動作，最后結果就是比 Apple 的 3D Touch 更加具有壓感的觸摸操作表現。
原理是利用手指尖觸摸顯示屏時產生的靜電引力來模擬觸感，通過電磁脈沖把更的反饋發送到用戶的指尖。
Tanvas 也正在與汽車制造商們合作把這項技術嵌入到汽車或屏幕上，讓人們更容易感觸受到不同物體的表面。
也許在未來我們真的會遇到他。
文章來源：優設 作者：殘酷de樂章
坐標系是能夠使每個數組在維度空間內找到映射關系的定位系統，更偏向數學/物理概念。在數據可視化中，最常用的坐標系分為笛卡爾坐標系和極坐標系，本文介紹的坐標軸設計主要也是圍繞直角坐標系展開。
在說坐標軸之前先來介紹下什么是坐標系。坐標系是能夠使每個數組在維度空間內找到映射關系的定位系統，更偏向數學/物理概念。
維基百科對坐標系的定義是：對于一個 n 維系統，能夠使每一個點和一組 n 個標量構成一一對應的系統，它可以用一個有序多元組表示一個點的位置。
數據可視化中，最常用的坐標系有兩種：笛卡爾坐標系和極坐標系，均為二維坐標系。
下文介紹的坐標軸設計主要也是圍繞直角坐標系展開，用到極坐標系的圖表有餅圖、圓環圖、雷達圖等。
坐標軸是坐標系的構成部分，是定義域軸和值域軸的統稱。系的范圍更大，而軸包含在系的概念里。由于可視化圖表繪制的數據大部分都有一定的現實意義，因此我們可以根據坐標軸對應的變量是連續數據還是離散數據，將坐標軸分成連續軸、時間軸、分類軸三大類。軸的類型不同在設計處理上也有差異。
介紹坐標軸設計前，我們先將坐標軸拆分成「原子」要素，具體分為軸線、軸刻度、軸標簽、軸標題/單位、網格線。
根據坐標軸的構成，分類討論下每個構成要素容易被忽視的設計細節。
軸線一般只考慮是否顯示，例如柱狀圖、折線圖等，在有背景網格線的情況下，會隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達到信息降噪，突出視覺重點的目的。
軸刻度通常不顯示，只有在肉眼無法定位到某個標簽對應的數據點時，會顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。
網格線用于定位數據點的值域范圍，跟隨值域軸的位置單向顯示，柱狀圖采用水平網格，條形圖采用垂直網格。樣式為虛實線的最多，斑馬線由于感知過強，一般不用。
軸標題/單位主要用于說明定義域軸、值域軸的數據含義。當可視化圖表標題、圖例、軸標簽已經能充分表達數據含義，無需單獨顯示標題/單位，「如無必要，勿增實體」。
軸標簽的設計就比較復雜，涉及到的細節點很多，而且對于定義域軸和值域軸上的標簽和單位設計要考慮的細節點還有差異。下文將定義域軸和值域軸看成 x 軸和 y 軸，便于說明。
x 軸標簽的設計重點在顯示規則上，不同的坐標軸類型有不同的處理方式。
連續軸/時間軸的標簽顯示
連續軸/時間軸，是由一組前后包含同等差值的等差數列組成，缺少幾個數值也能明顯看出中間的對應關系。當多個標簽在容器內全顯示發生重疊，我們可以利用抽樣顯示的手段來避免這種情況。這里不推薦使用旋轉，一方面從美觀度上，旋轉可能會破壞界面整體協調，另一方面，連續/時間軸非必須顯示所有軸標簽，抽樣標簽已經能滿足用戶對當前數組定義域的理解。
介紹一種常見的抽樣方式：等分抽樣
當多個標簽在 x 軸無法完全顯示，優先保留首尾標簽，其余標簽按同等步長間隔顯示。間隔等分的前提是間隔數是合數，能被 1 和其本身以外的數整除。如果間隔數為質數，就需要「-1」轉成合數。
舉個例子：11 個標簽，間隔數是 10，能被 2 和 5 整除，即分成 2 等分和 5 等分。12 個標簽，間隔數是 11，無法等分，需要在間隔數基礎上再「-1」，轉成合數 10 后再等分，此時最后一個標簽顯示在倒數第二個數據點上。
有人會問了，能被那么多數等分，到底該選哪個呢？這就要根據標簽長度來定，選擇能放下最多標簽的等分值。由于連續軸/時間軸，一般是數值、日期、時間等，字符長度有限，即使抽樣后也能保證顯示出一定數量的標簽。
等分抽樣不太適用于表達某個時間周期內的走勢折線圖，因為最后一個標簽不一定對應最后一個數據點。對于這類折線圖，能清楚表明起始時間和末尾時間，相比顯示更多時間標簽重要性來的更高。設計上可以只顯示首尾標簽，或首尾 + 中間值。
分類軸的標簽顯示
分類軸是由幾組離散數據組成，相互之間獨立存在，無緊密邏輯關聯。若采用抽樣規則，隱藏一些標簽，用戶對圖表認知就會有困難，違背了數據可視化清晰、有效的設計原則。分類軸最佳處理方式是標簽旋轉 45 度，若 45 度仍顯示不下，繼續旋轉 90 度。如果 90 度還是放不下就要考慮結合圖表交互或反轉圖表。
標簽旋轉方向也有講究，因為人的視覺習慣是從左到右，從上到下，標簽順時針旋轉 45 度更符合用戶的瀏覽動線。
分類軸標簽字段有長有短，長文本標簽直接旋轉不僅影響美觀，而且也不利于用戶閱讀。如果數據量比較少只有 2~4 個，長文本標簽更適合水平展示，顯示不下省略即可；如果數據量比較多，就限定字符數后旋轉。
y 軸標簽的設計重點在標簽數量、取值范圍和數據格式上。標簽顯示區域一般根據最長標簽寬度自適應縮放。如果數組是固定的，就寫成固定寬度，節省圖表計算量，提高渲染速度。
y軸標簽數量
標簽數量不建議過多，太多的標簽必定導致橫向網格線變多，造成元素冗余，干擾圖形信息表達。根據 7±2 設計原則，y 軸標簽數量最多不超過這個范圍。
y軸標簽取值范圍
y 軸標簽的取值范圍決定了圖形在整個繪圖區域的顯示高度。
折線圖 y 軸標簽取值一般保證圖形約占繪圖區域的 2/3，以更有效的傳達數據波動幅度，避免掩蓋和夸大變化趨勢。2/3 即斐波那契數列第二位起，相鄰兩數之比，也是黃金分割最簡單的計算方法。
柱狀圖的 y 軸標簽取值應從 0 基線開始，以恰當反映數值。如果展示被截斷的柱狀圖，可能會誤導觀眾做出錯誤的判斷。
y軸標簽數據格式
y 軸標簽的數據格式在 ant.vision 寫的比較詳細，重復內容不在此說明，重點講下一些特殊的設計細節。標簽保留的小數位數保持統一，不要因為某些軸標簽是整數值，就略去小數點。
正負向的 y 軸標簽，由于負值帶「-」符號，整個 y 軸看起來會有視覺偏差，特別是雙軸圖的右 y 軸更明顯。這里建議正負向 y 軸給正值標簽帶上「+」，以達到視覺平衡的效果。
寫了那么多關于坐標軸的設計，你是不是恍然大悟，原來小小的坐標軸還有如此之多的細節。往常我們做圖表設計，可能只是用網上自動生成的圖表簡單調整下，或者按照通用樣式來設計。然而，通用樣式雖然能表達數據意義，但也缺少了對圖表細節的把控，失了精致優雅的感覺。
作為數據可視化設計的一小部分，就是這些設計細節，決定了圖表最終的傳達效果。
文章來源：優設 作者：米粒的DesignNote
任何一名設計師應該都會接觸到運營活動頁，產品落地頁此類需求。而這些落地頁設計需求的業務目標衡量標準都相當明確——即轉化率。再進一步，與我們的設計輸出直接相關的就是首頁轉化率/點擊率。這些數據通過埋點能很輕易地獲得，一般情況下，產品經理會提前在需求文檔中標明需要埋點的地方（埋點簡單說就是測量某個位置或者交互節點的具體數據，例如發生了多少次點擊），獲得數據用于驗證產品最終是否符合預期，是否達到了理想的轉化效果。
叮~ 講到這我們應該明確了一件事，整個落地的設計其實最終都是為那個關鍵數據服務，無論是點擊率還是轉化率，達到預期甚至超出預期，那你的設計就完美地完成了任務，這也是驗證設計有效性的主要方法，將設計與數據關聯，用可量化的數據指標來驗證偏感性的視覺工作。
就這樣，設計與產品/運營的世紀大戰開始了。因為我們都有了一個共同的目標，因此在產品的最終收益、期望效果方面互相都很明確。但在實現手段上，我們很輕易地產生了分歧。主要分歧點就是「按鈕在左還是按鈕在右」這個問題上。我們需要理解，這不是一個簡單的交互問題，因為它其中摻雜了商業內容。如果這是一個交互問題，那我們很容易判斷，例如彈窗的主次按鈕應該主右副左，這既符合平臺規范，也符合用戶認知和操作習慣。
然而作為一個強商業屬性的落地頁，按鈕在左或者按鈕在右都有其合理性。我選擇左，而運營同學代表他們團隊要求右。 于是我敗下陣來，當然，雖然表面上設計師輸了，但我們怎么能服輸，于是我想盡辦法來驗證左側放置按鈕才是更有利于轉化的形式。下面我們來看看不同的傾向對應的設計原理。
產生左與右的爭執其實主要源于設計與需求方的兩個判斷方向。首先說一下我的判斷邏輯，按照已知經過驗證的理論，即 F 閱讀順序（尼爾森的用戶閱讀視線模型），用戶瀏覽落地頁的順序應當是從左往右自上而下，因此左上角的信息最早觸達用戶。在當前主流的首圖式落地頁樣式下，首圖 banner 中的內容應當置于左側，以使用戶更快地獲知產品的關鍵信息。
在落地頁首圖的體驗文案本身就是一個設計的覆蓋范圍，因為它直接關系到首頁的視覺傳達效率，即用戶需要花費多長時間、多少精力才能理解你的產品。我們往往在首頁體驗文案中采用主標題加副標題的形式，著重解釋這個產品是個什么東西、用戶能從這獲得什么，往往通過主副文案搭配的形式，來完成整個大意的闡述。
基于此，核心內容置于左側，用戶在快速掃視時能夠第一時間獲知產品信息，了解產品利益點，這與我們精心準備整個網站，以及精心準備誘導力文案的方法相契合。這是我做出內容置于左側的設計決策的主要思路?？梢钥闯?，我這里主要參考的是 F 閱讀模型這一理論，根據這個經驗我得到的結論是 重要的信息應當擺放在左側以使用戶立即觸達核心信息，這將有利于接下來的引導或者轉化。
另一方面，運營同學又是基于什么考慮決定將核心內容放在右側的呢？答案是操作習慣，理論化的話可以用費茨定律概括，（目標距離用戶距離越短，用戶觸達的效率越高）?？紤]到大部分用戶使用右手操作，鼠標也大都懸停在屏幕右側，因此，按鈕置于右側，用戶點擊的路徑變得更短，也就更容易觸達和轉化（純體驗角度或者說效率角度）。
你仔細閱讀這部分內容，從分歧點到各自的理論支撐實際上都沒有太大的漏洞，為什么沒有漏洞？因為確實都沒有錯誤，也都存在其合理性。例如我們常用的購物 APP 會把按鈕置于右下角，用戶操作起來必然比左上角的按鈕更加容易。那么在這兩種分析都合理的背景下，我們要對比或爭論的其實不是哪個判斷是錯誤的，而是哪個判斷更有利，更合理，能夠帶來更多的數據轉化。因此，這個問題最終由對錯問題，轉化為一個優劣問題。
有些人很機智，這個時候肯定會想，既然左邊最容易觸達信息，右邊最容易觸達按鈕操作，那左邊放置內容，右側放置操作不就完美解決了嗎？哎呀，讀者真聰明。
由于 F 閱讀的邏輯，將展示性質的「內容」放置于左側，使用戶更快觸達關鍵信息，由于費茨定律，以及多年來養成的用戶習慣（操作組件在右側，當然現在很多放在中間的情況）將需要執行的操作置于右側，使用戶快速交互并完成任務。有一定道理，甚至在實際落地產品中我們也能看到一些類似的設計，例如豆瓣。 這是一種左與右的妥協
但需要注意的是，豆瓣產品的右側放置的是較為復雜的交互模塊，例如完整的登錄注冊模塊。在該場景下，用戶在交互路徑更短的右側區域執行交互效率要明顯高于左側區域。
那么下面開始論述按鈕置于左側的觀點
論點一：排版的限制
豆瓣的形式對于落地頁產品，可能并不適用。主要有兩方面原因。我們都知道，產品落地頁首屏的組成為體驗文案，主 CTA，插畫配圖三部分。常規做法是插畫作為一組信息置于一側，文案加按鈕作為一組信息置于一側。因為，體驗文案與按鈕具有強關聯性，同時按鈕與文案作為一組信息，才能與另一側的插畫搭配構建平衡的布局，呈現比較優美的視覺效果。
請登錄后查看原圖，因此，豆瓣那種妥協方式并不適用于商業類落地頁。因為內容和操作本身是一體的，這源于排版的規整性的限制，按鈕和文案只能同時存在于一側，如果刻意去追求左側內容，右側操作，效果就像下面這樣。一方面，只靠文案和按鈕無法撐起左右兩個區域，一方面文案和按鈕被割裂開，用戶的視線由文案轉到按鈕的路徑過長，體驗較差。（文案與按鈕成組后，用戶可以在閱讀內容產生動機后立即觸達交互按鈕并完成轉化）
論點二：文案與配圖孰輕孰重
如果你親自體驗這兩種區別的落地頁（左圖右文/左文右圖），你會發現有一個共同點，就是在某個區域的停留時長，沒錯就是內容區域。以下圖的頂部卡片區域為例，在閱讀時我的瀏覽情況是，大致地掃視左側的插畫，然后注視右側文字區，了解文章的具體內容，并在此區域停留較長時間，畢竟仔細閱讀需要花費時間。
這就涉及到一個問題，插畫與內容哪個更重要？其實答案很明顯，我們只需要舍棄掉其中一項來測試下，看看哪個內容的缺失會對用戶理解設計傳達的語義產生較大影響。OK，我覺得沒必要測試了（虛晃一槍）。很明顯，刪除插畫后，我們仍然可以通過文章的標題來獲知文章概要等關鍵信息，就像落地頁首屏的體驗文案，即便沒有插畫我們也能通過首頁文案來獲知這個產品是什么，能夠為我帶來什么。
然而如果去掉關鍵信息，去掉標題與按鈕，僅憑插畫我們無法分辨當前頁面到底在講述什么東西。設計本身就像是人與人的交流，產品就是我們，而用戶則是我們的交流對象，去掉核心的文案，相當于把我們自己變成了啞巴，而去掉插畫，最多相當于我們交流時面無表情罷了。
因此，在商業落地頁中，我們以轉化為核心目標，而能夠更快地觸達最重要的信息顯然是明智之舉，因此我們希望將核心的文案內容置于左側。
（另外，一圖勝千言的原理只適用于個別場景，例如數據可視化。設計人員通過將數值數據轉化為易于理解的柱狀圖扇形圖，來傳達數據結論。而視覺修飾性質的插畫則無法做到準確表意，我們通常在產品設計中見到的插畫更多的是在情感上和審美上給予我們一定的愉悅，但想要準確描述關鍵信息，還是需要文字作為核心角色）
論點三：用戶會因為便于操作而產生動機？
另一點同樣值得我們思考，即用戶真的會因為某個按鈕更容易點擊而被轉化嗎？或者我們換個形式問，假設你是一名男性，你會因為按鈕在鼠標附近而選擇點擊購買女士內衣嗎？你會在自己財務狀況較差的時候因為按鈕在鼠標附近而點擊購買品嗎？在大多數理性場景下，我相信你不會這樣做。
所以這時候要引入福格模型，用來闡述產生轉化的整個路徑。福格模型簡單來講就是一個公式：B=MAT。B(behavior) 代表行為，M(motivation) 代表動機也就是用戶需求，A(ability) 代表用戶使用的門檻，T(trigger) 代表觸發。也就是用戶行為的產生需要用戶需求為基礎，需要保證產品的易用性，但是這還不夠，在這個基礎上我們還需要在產品中通過設計觸發用戶。完成轉化的三個關鍵要素是，動機、能力、觸發，缺一不可。
福格模型幫助我們解決了這個疑問。用戶的購買或者轉化始于動機，就像我上面舉的例子，如果一個用戶根本對產品沒有需求（男性對女性內衣），那就不會產生動機，在沒有動機的情況下，后面兩項內容，能力或者觸發都沒有意義，無法發揮作用。整個轉化的流程可以參考下方的示意圖。
實際上對于那些有強烈動機購買或使用產品的用戶，你的一切設計都沒有太大意義，因為用戶有強烈訴求的情況下，他會發揮主觀能動性去找到轉化的入口，主動完成轉化。同理，有些用戶是完全不會產生動機的，不是目標用戶群。
設計策略主要針對的是有動機但不強烈（某種程度上有需求或者被吸引），以及暫時沒有動機的兩類用戶。通過我們的首屏及詳細內容，痛點利益點的介紹，來放大用戶動機，制造共鳴點，創造美好的想象空間，使用戶涌現強烈動機。然后轉化就自然而然的產生。
因此，在首屏我們的核心要義是通過內容設計來觸發用戶動機，而不是想方設法觸發操作。走捷徑的誤觸方案設計能保證百分百的觸發率，但那種觸發沒有任何意義。到這里我們應該明確了，用戶會因為好的內容所觸發的動機而買單，但不會因為你把按鈕放在我手邊而產生購買沖動。
因此，我的結論是，用戶更有可能因為左側展示的強洞察力的文案而產生動機，而動機是整個轉化的起始，也是最關鍵的一點，有了動機，觸發（按鈕位置）的效率即便低一點，但轉化仍然很有可能繼續（就像動機產生了慣性，有了強烈的動機會自發地去尋找觸發器，去尋找按鈕以自主完成轉化，但觸發器不會有慣性）
這個觀點論述下來，主要涉及到 F 閱讀模型，費茨定律以及福格模型，算是很基本的設計原則，也順便幫大家重溫一下。最后，我們再拿一些其他實證來進一步論述，例如國內一線公司的落地頁設計。
1. 一線公司落地頁布局
2. 全球獨角獸企業落地頁
文章來源：優設 作者：南山可
2009 年，買不起 Macbook 的我在 PC 上裝上了黑蘋果。在此之前，我用虛擬機體驗了 Apple II 、Mac OS 8.1、Mac OS 9.2.2 、Mac OS X 10.6 ，在不斷的折騰過程中，我開始對蘋果、對GUI 的整個歷史發生了興趣。
此后，我在Jeff Johnson 的《認知與設計》當中，在 Steve Krug 的《Don’t Make Me Think》當中，在一本又一本和UI、交互、體驗相關的經典書籍當中， 發現 Mac 系統的界面一直被作為范例來展示。
Mac 確實是優秀設計的典范，是 GUI 設計史當中繞不過去的最重要的操作系統家族。所以，視覺史系列文章的第一篇，我決定從 Mac 系統下手。
簡單來說，我們泛指的 Mac 系統，通常是分為2個大的系列的。
1982 年隨 Macintosh 發布的系統，一直到 1999年發布的 Mac OS 9 為第一個系列，一般被統稱為「Classic Mac OS」。
而 2001 年之后所誕生的 Mac OS X 系列的操作系統，包括現在所說的 macOS ，則被視作為第二個系列的 Mac 系統，其中 X 是羅馬數字 10 的意思。
蘋果公司最初只有 Macintosh 電腦，系統并無名稱，直到第5個大版本的時候，操作系統才擁有 Macintosh 這個名字。而 Mac OS 這一系統名稱，則是在系統更新到第7個大版本的時候才被提出，而自此開始，Mac OS 的稱謂正式出現。
而 macOS 則相當于是 Mac OS X 品牌的一次重啟。它始于 10.12 Sierra 這一版本，并且為了和 iOS、tvOS、watchOS 這幾個系統品牌保持一致，而從 Mac OS X 更名為 macOS。
在很長一段時間，國外很多老用戶會將它簡稱為「OS8」、「OS9」，而在2001年之后直到今天，依然有很多人將它簡稱為「OSX」，這也是在了在討論 Mac 系統這個前提下所用到的、帶有版本的簡略稱謂。
注釋：國內有不少人會將 Mac 稱為「OS系統」，但是 OS 本就是 Operation System 的縮寫，意為操作系統，Windows 是 OS，Linux 也是 OS，「OS系統」是一個錯誤且尷尬的表述。
如果不深究細節的話，Macintosh，MacOS，Mac OS X ， macOS 這四個都簡稱為 Mac 系統。
Macintosh 并非最早的圖形化界面，但卻是真正推動圖形化界面操作系統發展的里程碑。
Xerox Alto
對于圖形化用戶界面的起源，一個相對統一的共識是，它來源于施樂的帕羅奧托研究中心，而最早使用圖形化界面的電腦，是當時正出于研發中的 Xerox Alto。在之前的文章當中，我曾經專門聊過最早圖形化界面的誕生和設計細節：
他們是UI界面的創造者，是UI設計的開創者，他們同樣要在「比稿」中前進，他們認真、實在、摳細節，這篇文章是關于他們，關于最初的UI界面的故事。
閱讀文章 >>比爾蓋茨曾經指責喬布斯從施樂這里「偷」走了圖形化界面（GUI）的設計，實際上，為了換得機會去施樂的帕羅奧托研究中心去觀摩學習研發中的Xerox Alto 和開發工具 Smalltalk，喬布斯是拿股權交換得來的。
這是 Xerox Alto 當時所采用的圖形化界面。界面的確圖形化了，只不過，從今天的視角來看，整體的界面邏輯并不清晰。
而在GUI的設計細節、實現方式上，Macintosh 則截然不同，可以說是后來居上。
說回 Mac。
回溯到 1979年，Jef Raskin 是Macintosh 電腦和操作系統項目的發起者和監督者，他想用自己最喜歡的一種蘋果（McIntosh）來給這個操作系統命名。
這種名為 McIntosh 的蘋果不僅被譽為加拿大國家級蘋果，但是更重要的原因在于，當時紐約還有一家名為 McIntosh Laboratory 并且提供高端定制音響服務的公司，為了避免商業品牌上的沖突，Raskin 將系統的名稱改為 Macintosh，故意錯開了一個字母。當然隨后 Macintosh 的名字逐漸超過了前者，在世界范圍內，甚至慢慢超過了加拿大最著名的水果。
當然，1984年，最初版本的 Macintosh 系統隨著同名的蘋果電腦的發布而面向大眾，這個并非最早的圖形化界面操作系統開始了它的歷程，如今它是最著名、最具有影響力的圖形化界面的操作系統之一。
Macintosh 電腦的主板由 Burrell Smith 所設計，結合當時的硬件技術，讓最終上市的 Macintosh 電腦擁有了一塊分辨率為 512×342 的單色顯示屏。
在這塊寸土寸金的單色屏幕上，Macintosh 系統需要將圖形化界面的價值盡可能發揮出來。
Macintosh 電腦開始出現在各大雜志媒體上，蜚聲世界，但是此刻，這一操作系統并沒有官方的名稱。 1.x系列的只有一個非正式的 System 1 的名字，而隨后的大版本也被稱為 System 2，System 3，等等。
直到 System 5 的時候，這一操作系統才算是正式有了 Macintosh 的名稱，而它正式的完整名稱是 Macintosh System Software 。
最早的 System 1 當中，開機之后有一個非?？蓯鄣臍g迎界面：
菜單和窗口的概念清晰，比起 Xerox Alto 的設計更加成熟：
左上角的蘋果圖標打開之后，本質上是一個程序列表：
在 System 1 當中，文件夾是一個虛擬概念，在文件系統當中其實是根本不存在文件夾的，它是模擬現實文件夾的概念而存在的一個圖形化界面概念：
在系統出錯之后，系統報錯界面中會使用炸彈圖標來進行提示：
1984年的 Macintosh 的系統崩潰界面都比 2000 年之后的的 Windows 藍屏界面來得更加有趣：
當然，用一個帶有圖形化界面的電腦玩游戲，難道不是一件天經地義的事情嗎：
特別值得一提的是，Macintosh 自打一開始就為自己設計了一系列的字體：
其中風格獨特的 San Francisco 在多年以后還擁有一個同名的字體，作為系統默認的字體而存在。
隨后，在隨后的 System 3 當中，垃圾桶的 APP 圖標增加了「有垃圾文件」和「已清空」兩種狀態的區分，并且給系統新增了一個歡迎界面：
文件夾也不再只是一個虛擬的概念了：
同樣的，在 System 3 當中游戲的精美程度也有了一定程度的提升：
當然，從 System 1 到 System 4，系統的功能在一代代地增加，但是受限于屏幕和基本的性能，其界面在整體觀感上差別并不大：
不過在圖標和界面細節的處理上，越來越豐富，越來越細致，比如系統的控制面板，功能和細節比 System 1 時代豐富了許多：
在 System 5 當中，Macintosh 還加入了多任務的功能，也就是 MultiFinder，使得用戶終于可以同時運行多個任務，不過因為性能限制，跑多任務的時候，會比單任務慢不少。
對于 Macintosh 系統而言， System 6 是一個階段性集大成的版本。系統的版本和軟件的版本在 System 6 當中進行了統一，并且功能也有了相當程度的完善。
性能更強勁的 Macintosh SE/30 和 筆記本電腦 Macintosh Portable 也是在 System 6 更新期間發售的。
Macintosh Portable
Macintosh SE/30
終于，黑白用戶界面的時代在 1991 年終結，Macintosh 系統從 System 7 開始擁有了彩色的用戶界面：
色彩的加入，系統圖標的擬真度也再一次提升，比如垃圾桶的圖標，光影已經相當逼真了。
而為了更好地利用彩色界面的功能，用戶可以根據自己的偏好進行全局色彩設置：
軟件安裝的進度指示方式，比起同時代的系統乃至于后面的很多系統，都要清晰明確：
關鍵信息的說明和引導上，Macintosh 系統在30年前就已經有明確的范式了，比如重要信息標紅強調：
由于這個階段系統分辨率的限制，在按鈕的視覺層次構建上，陰影和按鈕凸起的效果，都做的比較簡單，但是總體上始終上是在模擬現實存在的元素，通過盡可能貼近現實的視覺設計，來減輕用戶的認知負荷，計算器和鍵盤的設計就非常的典型：
System 7 當中，還內置了交互式的用戶幫助系統：
在控制面板當中，圖標的統一性再一次得到了提升，風格上明顯有著當時的特征，只不過在信息的傳達上，還不夠優秀，如果沒有文本標簽，你很難判斷每個按鈕對應的功能是什么：
值得一提的是，System 7 所處的階段，大量的兼容機和包括 Windows 在內的操作系統開始出現，激烈的市場競爭之下，蘋果也發布了一系列的新款的 Macintosh 電腦：
為了應對激烈的競爭，蘋果還想出了新的策略，而這一策略也促成 Macintosh 系統后續逐漸成為一個獨立的品牌。
1996年，喬布斯重回蘋果。同時在這個階段，Macintosh 系統也隨之進行了品牌重設計，Macintosh 系統更名為 Mac OS。
為了應對激烈的市場競爭，這一階段的 Macintosh 電腦開始逐步切換到 PowerPC 架構的 CPU 芯片，同時，蘋果公司也開始授權一些第三方廠商，使用同樣架構的芯片和主板，并且安裝System 7 的系統。
可以直接安裝 System 7 的 StarMax 兼容機
這樣一來，就開始出現問題了：非蘋果產的電腦上，也會顯示 「Macintosh 」的字樣，那這個怎么和原廠的 Macintosh 電腦進行區分呢？
很簡單，在原裝的 Macintosh 上，依然還是 Macintosh，但是在兼容機上，它就是「黑蘋果」——Mac OS：
在當時，很多人認為這種區分，僅僅只是用來進行差異化的臨時解決方案。此時喬布斯即將重掌蘋果，并且打算把前 CEO 的系統第三方授權策略給干掉。將 Macintosh 更名為 Mac OS 就是解決方案，只不過這個解決方案并后面還有其他的深意。
因為后面還有新系統。
Mac OS 8 是在 1997年7月26日發布的，同一個月另外一件大事，就是喬布斯正式任命為 CEO，執掌大權。
其實，此處的 Mac OS 8 并非真正意義上的大版本更新——它原本應該是 Mac OS 7.7 。但是，前 CEO 同第三方廠商簽訂的系統授權協議，是基于Macintosh System 7 的，而直接發布 8.0 版本等同于是巧妙地利用命名，直接把后續的服務和協議一起給斷掉了，同時新的 Mac OS 系統從名字上也直接區分于原本的 Macintosh，可以說是釜底抽薪的一招絕殺。
同時，新名字，新世代，也是開創新局面的好預兆，一舉多得。新的 Mac OS 8 系統在更加優秀的硬件基礎上，在顯示效果上也一下子進入了高清的時代。
雖然 Mac OS 8 在底層上，依然繼承自 System 7 ，但是因為幾年前開始的 Copland 項目有不少遺產，身為繼承者的 Mac OS 8 在視覺和體驗上，提升了相當明顯：
Mac OS 8 當中加入了主題選擇的功能，雖然比較簡單，但是也至少有著跟 Windows 95 相互匹敵：
和同時代的很多操作系統一樣，在多媒體軟件上， Mac OS 8 有了頗為炫酷的視覺效果：
界面左上角的 Apple LOGO 繼續作為程序列表的菜單按鈕而存在：
類似 2.5 D 的圖標設計，是這個時代的用戶界面設計的流行風尚：
而這種變化，在 Mac OS 8.5 這一版本上，有了更為明顯的提升——比如文本抗鋸齒效果，讓文本更加易于閱讀：
更加柔和自然的的光影變化，更復雜的交互和界面元素，Mac OS 8.5 所呈現出來的視覺效果乃至于體驗，不會弱于同時代的任何系統：
但是也僅僅只是不弱于對手而已。
Mac OS 9 是 Mac 系統第一個系列的最后一個大版本。
和 Mac OS 8 類似，原本的 Mac OS 9 原本應該作為 Mac OS 8.7 來發布的。
其實早在喬布斯回歸并發布 Mac OS 8 之后，Mac OS 9 的發展路徑和命運就已經注定了：為老硬件和老用戶更新，并且繼續為真正的新系統爭取時間。
Mac OS 9 是在 1999 年 10 月 23 日發布的。這個面向新世紀而發布的操作系統，蘋果是以「有史以來網絡功能最好的操作系統」來進行宣傳。
此時，喬布斯重組的設計團隊，已經為新的操作系統挑選好了新的設計語言，而此時發布的 Mac OS 9 當中，也適當地加入了一些為真正的下一代系統所準備的視覺元素，比如播放器軟件中的不銹鋼拉絲效果：
窗口界面中的元素有著細膩微妙的光影起伏：
搜索應用中的內陰影、高度擬物化的小圖標：
特別要說的是，此時的 Mac OS 9 中已經可以找到很多貼合現代 UI 設計中的諸多原則了，比如富有邏輯的分組：
容納多個并列分組的標簽頁交互：
在諸如幫助頁面和安裝界面中，使用了層級豐富的排版視覺設計：
也許現在你對于字體的這種投影深惡痛絕，但是在20年前，這樣的視覺效果是令人驚艷的：
Mac 系統的第一個操作系統系列，在明面上有著相對清晰的脈絡：自家電腦，用自家系統。通過這一系列的界面設計，可以總結出下面的幾點：
Mac 的圖形化界面，始于施樂，成于喬布斯，在迭代中一步步完善。
不過，從 System 7 開始，它的危機就已經出現了。從 1991 年到 1999 年這 8 年時間當中，暗地里發生了一系列的事情，這些事情是 Mac 系統視覺史當中，不可或缺的組成部分。
下一篇，依然是 Mac 系統的視覺史，其中包括 WIndows、NeXTstep、BeOS，當然，還有 Mac OS X。
參考：
https://history-computer.com/ModernComputer/Personal/Macintosh.html
https://en.wikipedia.org/wiki/Xerox_Alto
https://web.archive.org/web/20001109004000/http://www.apple.com:80/macos/
https://apple.fandom.com/wiki/Mac_OS_8.5
https://en.wikipedia.org/wiki/System_7
https://www.versionmuseum.com/history-of/classic-mac-os
https://en.wikipedia.org/wiki/Macintosh_clone
https://en.wikipedia.org/wiki/Classic_Mac_OS
https://guidebookgallery.org/guis/macos/macos10
文章來源：優設 作者：陳子木
在第一篇 Mac 視覺史當中，我梳理過了整個 Mac 系統第一階段的明線，而這一篇，我們來聊一下它的「暗線」。
這一章所涉及到的項目，幾乎可以組成一個 大型的「90年代失敗操作系統大賞」，在主要由成功者們所構成的故事、新聞乃至與傳說當中，這些失敗的故事和項目，被提及的次數很少。
但是對于 Mac OS X 而言，這里的每一次作死和失敗都充滿了意義。
對于絕大多數的用戶而言，Mac OS X 是21世紀初頂尖設計的范式，在今天，它是最優秀操作系統的當中的典型。
但是仔細想想看：從 System 1.0 到 Mac OS 9.2.2，長達15年時間的擠牙膏漸進式升級的Classic Mac OS，怎么可能突然一下子就變成了充滿現代感的 Mac OS X？這種翻天覆地式的變化的確充滿了戲劇感，但那是在今天的視角之下。
在這場「90年代失敗操作系統大賞」當中，無疾而終者多不勝數，你所看到的不僅有粉墨登場，還有各式各樣的粉末謝場。在 Mac 的視覺史當中，這一篇應該是一個大型的「處刑現場」。
失敗的嘗試，同樣是 Mac 整個視覺演變史當中，繞不過去的部分——沒有這些失敗，就沒有今天我們所熟知的 macOS 的視覺風格，沒有后面 iOS 、iPadOS、watchOS 等等一系列交互界面和視覺。
雖然我們此刻所談及的是操作系統的視覺史，但是操作系統背后最重要的始終是推動它的「人」。談 Windows 必然會涉及 比爾·蓋茨，而談到 Mac ，也不得不說喬布斯。
和當年很多操作系統不一樣的地方在于，喬布斯一直堅持硬件和軟件（操作系統）理應是一體的。這也是為什么在很長的一段時間以內，Macintosh 指的既是硬件（電腦），也是軟件（操作系統），而因為這臺電腦是更容易被指代的對象，當用戶在指代系統的時候，使用的是諸如 System 1 ，System 2 這樣的詞匯。
原本的 Maciontsh 是有內部競爭對手的——Lisa，這個以喬布斯女兒命名的電腦研發項目被奪走之后，喬布斯在 Macintosh 上投注了300% 的精力，親手操刀了不少設計。擁有大量資源傾斜的 Lisa 在當時那個階段，看起來也并不差：
在這個 1983年的 UI 界面上，細節處理其實也算得上非常用心了，比如頂部菜單上的「陰影漸變效果」：
當然，Lisa 的定位也非常明確，它就是一臺辦公電腦，所以它的系統名稱也非常簡單直接地使用了 Lisa Office System 這樣的名字：
也正是在這樣的對比之下，有著豐富字體、多樣的媒體功能、能夠玩游戲的 Macintosh 在這場內部競賽中，得以勝出。
當然，如同我們都知道的，喬布斯在發布 Macintosh 的 2年后被迫離開自己創立的公司。當然，更重要的是，硅谷的巨頭們更加清楚計算機的發展方向。這使得 Macintosh 面對的外部壓力驟增。
圖形化界面（GUI）的概念和交互模式——這個點子本身可能比實現技術來得更重要。
在高手云集的硅谷，雖然絕大多數的企業和開發者都是后期入局者，但是他們只要投入足夠多的技術人員和時間，類似的圖形化交互界面總歸是能做出來的。
比如 Visi Corp 給 IBM 提供了 Visi On 這樣的圖形化程序：
微軟也在 1985 年為 IBM 的 PC 提供了 Windows 軟件：
Commodore 的圖形化界面也差不多同期問世：
而 GEOS 甚至為更老的 Apple ][ 提供了圖形化界面的操作系統：
這些系統都是在 Macintosh 發布那一兩年內相繼問世的。
操作系統領域的競爭，刺激著蘋果尋求突破。
多數企業都不會把雞蛋放在一個籃子里，這樣孤注一擲的決策確實有太大的風險。其他的商用操作系統，都開始擁有日漸完善的桌面端圖形界面，使得蘋果在差異性和獨特性上不足。除了在硬件性能和產品線上增加投入，他們也開始嘗試開發更優秀的圖形化界面和下一代操作系統。
在上一篇當中，我提到過，在 80 年代末所發售的 System 6 是一個集大成的版本，在硬件性能和黑白顯示器之下，這個操作系統本身的核心功能已經頗為完善了。這個時候，蘋果開始有意識地進行一些探索性的項目。
某種意義上來說，「Blue」 和「Pink」 兩個項目幾乎是同時開始的。
雖然 1988 年的時候，喬布斯早已離開，但是他所塑造的 Macintosh 是當之無愧的傳奇，那種「內部創業」和「改變世界」、「創造傳奇」的硅谷精神對于此刻的蘋果員工依然有著極大的影響。
當時蘋果內部 5 名躁動不安的中層開發工程師想拜托日漸僵化的內部管理，想改變當時 System 6 表現欠佳的局面，想打造一個次世代的旗艦操作系統——某種意義上重現 1984 Macintosh 的傳奇。
他們在這次私底下的會議上重新梳理并規劃未來的操作系統。他們將System 6 基礎上的可以增量更新的特性、可以很快實現的功能，寫在藍色的卡片上，將技術上更加先進、符合長期價值的功能（比如當時 Macintosh 所缺乏的搶先式多任務處理和組件化程序設計）寫在粉色的卡片上，將更加激進的特性寫在紅色的卡片上。
這次會議基本上就塑造了后面的「Blue」和「Pink」兩個項目，而紅色卡片上的特性由于過于激進，僅僅只是備案而沒有成立項目。
數百名工程師繼續在 System 6 的基礎上按部就班地更新功能、維護代碼庫，繼續「Blue」項目，而它的最終產物，就是后面我們看到的 System 7：
而另外一邊的「Pink」項目，一開始并不是公開的。當時 Erich Ringewald 領導這發起這次會議的核心 5人組，想像 Macintosh 項目開始那樣，找一個隱秘的房間開始這次「內部創業」。
他們看上了 位于 Bubb Road 的一間倉庫，當他們進去的時候，才發現這個倉庫已經被另外一個正在秘密進行 Newton 項目的團隊給占了。
當然這款同樣極為傳奇的（失?。┱粕显O備我們回頭再說。
「Pink 」項目開局的時候，有 6個人，但是考慮到要徹底放棄 System 6 的遺產，重新開始全新的操作系統，程序要是面向對象的，要有內存保護，要搶先式多任務處理，要支持多語言足夠國際化，還要有全新的圖形庫，這個團隊開始一路膨脹。
先是蘋果的先進技術小組（ATG）加入團隊，人數變為11人。 2個月后，「Pink」項目增加到 25 人。7個月后，原始的5人組幾乎都因為「人員多到失控」而離開「Pink」項目。1年后，「Pink」項目的開發組多達100人。
原本計劃在2年后發布的「Pink」操作系統在原計劃的2年之期到期之時，擁有了 150 人的超大規模，高級副總裁和市場營銷部門的首腦領導著這個龐大的開發團隊。
「Pink 什么時候上市？答案永遠都是2年后。」
這是當時流傳的一個內部笑話。
但是這個笑話只是剛剛開始。因為它才剛剛開始膨脹。
系統開發需要時間，而隨著時間推移，市場變化需要「Pink」 更有競爭力，然后原本位于紅色卡片上的「激進功能」開始不斷的加入到「Pink」當中，然后項目就需要更多時間來開發——惡性循環開始了。
在「Pink」上，蘋果投入了太多，放棄是不可能放棄了，唯一的辦法就是拉更多人入局。當時的 CEO John Sculley 對外宣稱「Pink」操作系統代碼已經多達 150 萬行，并去 IBM 做了內部演示。
然后，這個看起來像是被移植到 PC 上的 System 7 成功地引起了 IBM 的注意。讓比爾·蓋茨最不想看到的事情發生了：蘋果、IBM 和 摩托羅拉成立 AIM 聯盟。
AIM 聯盟成立于 1991年10月2日，此時距離「Pink」項目開始已經過去了3年半。半年之后，蘋果和 IBM 正式組建了合資公司 Taligent .inc ，而其中蘋果占股較小。
原本被拿來吹噓的「Pink」操作系統，此時也更名為 Taligent 。
Taligent OS 的確有著很多超越 Macintosh 的功能，比如更的程序機制，3D功能等等等等。在整個 UI 界面上，Taligent OS 使用了繼承自「Pink」項目的一些設計：等軸測的圖標，偽3D風格的圖標，還有非矩形的窗口（注意看窗口的頂部菜單欄）。
當然，Taligent OS 從「PInk」項目繼承過來的最大特性是：一直在開發，從未正式發布。
1994年，HP 入局，加入 Taligent 公司并且持股 15%，Taligent OS 的一部分技術開始運用到 HP 家的 NewWave 桌面環境中了：
與此同時，Windows 95 的關注度越來越高，而媒體吐槽蘋果久未發布的新系統，并嘲諷難產多年的 Taligent OS（還有 Pink），已經成了一件政治正確的事情。
雖然 1994 年的時候，Taligent OS 在 SFA 展會上使用 Macintosh IIcI 展示了運行速度和崩潰速度同樣快的 3D 應用，但是它最終還是沒有發布。
1995年，蘋果出售股權退出 Taligent 公司，「Pink」 項目的最終產品也并非 Taligent OS，而是 IBM 公司的 AIX 系統中的 Common Point 應用。
「Pink」到此終結。失敗。
在 Taligent OS 研發期間，蘋果將雞蛋還放到了另外一個籃子里面，這個項目的代號借用了著名的科幻電影《星際迷航》，項目的 Slogan 是「大膽地探索 Mac 之前從未去到過的地方」。
這個地方就是使用英特爾芯片的 X86 架構的電腦上。
「StarTret」項目中，蘋果是和當時的服務器供應商 Novell 共同構思的，這個項目最終因為內部斗爭、人事糾紛、市場問題而關閉。值得一提的是，同樣的嘗試在 1985年的時候就有過，不過那次嘗試很快就被中止了，以至于至今沒有一個正式的代號留下來。
這算是2次失敗。
作為 「Blue」項目產物的 System 7 最終并沒有徹底解決蘋果在操作系統上的困頓處境，系統依然問題很多，內存保護機制、搶先式多任務處理依然還沒有。而 1994年3月開始的「Copland」項目，就是為此做準備的，它的代號來源于美國作曲家 Aaron Copland 。
除了在內存分配和多任務處理等核心功能上進行開發提升，它在 GUI 的視覺層面上的優化，也花費了相當多的心思。在視覺層面上，Copland 新設計的一套主題名為 Platinum ，所有的元素都有著頗為細膩的陰影，窗口元素則有著明顯的突起，原本「Pink」項目中的等軸測圖標也加入了進來。
除了 Platinum 之外，Copland 還加入了面向兒童的主題P，以及更加具有未來派風格的主題Z。
除了主題本身之外，Copland 還支持窗口最小化到底部為標簽，多用戶登錄（Windows 98 之后才有這個功能），這種功能類似于現在的家長管理——管理員帳號可以決定其他用戶可以使用哪些應用?？梢哉f，非常超前了。
當你在 Copland 中拖動文件到不同文件夾的時候，這些文件夾可以自動打開，這一功能在當時也是非常先進的。
不過，Copland 極具前瞻性的另外一面，就是它本質上是一個「要你命3000」。各種新的功能和特性出于市場需求和項目需求毫無節制地被加入進來，所有的功能相互之間都存在沖突和影響，所有人都很清晰地知道，Copland 是不可能被作為正式產品所發布出來的。
「它只是一個不同團隊開發產品的合集……并且期望它們能夠神奇地組合到一起?！?
這是當時的 CEO Amelio 自己說的。
當然，Copland 的陣亡不可避免，只不過它的界面管理器和 Platinum 主題最終留到了 Mac OS 8 當中，為蘋果公司的自救大業添磚加瓦。
Copland 失敗了。自家開發團隊搞不定，只能從外部想辦法了。
當時，CEO Amelio 個人比較傾向于 Windows NT，并且為此專門同蓋茨通了電話，而蓋茨也表示如果愿意使用 Windows，他可以組建團隊將蘋果的拳頭產品 QuickDraw 移植過來。此時，WIndows 95 已經發布一年了，而 Windows NT 也剛剛發布，市場反響極好，份額節節攀升。
當然，蘋果和微軟的命運糾纏并不是此時才開始的。Windows 1.0 時代，圖形化界面的專利授權是蘋果授權給微軟的。
而 Windows 2.0 繼續沿用 1.0 時代的設計，但是蘋果沒有給 2.0 授權，最終引起了糾紛，蓋茨借用不維護 Word 和 Excel 軟件和當時的 CEO 達成了庭外的和解。這些事情回頭有機會細說。
和CEO的想法不同，當時蘋果的 CTO Ellen Hancock 其實是想選擇 Solaris 來著，不過它還沒有一套友好的用戶界面，贏面不大。
最終擺在蘋果CEO 和董事會桌面上的，就剩下兩個備選了，一個是 BeOS，另一個是喬布斯的 NeXTSTEP。
然而這毫無疑問是一次極具戲劇化的選擇，因為這兩個操作系統背后的兩個人，有著極深的糾葛。
Be 公司的 CEO 是法國人 讓·路易·加西，他是 1981 年加入蘋果公司并負責當時歐洲業務。
1985年，他在得知喬布斯計劃在陣亡將士紀念日罷免 CEO 約翰·斯卡利（John Sculley）的計劃后，搶先告知董事會，最終導致喬布斯從蘋果辭職。
1987年，加西啟動了 「Skunkworks」項目，而這個項目的產物就是后來的掌上電腦 Newton MessagePad，而最終這條產品線也是喬布斯關停的。當年的「Pink 」五人組在倉庫里撞見的，就是加西的團隊。
1990年，加西和CEO交惡，并且董事會對于他所推出的 Macintosh 產品不滿意，最終導致他離開了蘋果，并于次年創立了自己的 Be 公司。
彼時正在艱難推進 NeXT 電腦業務的喬布斯，在媒體那邊的口碑并不好。而加西反而在這個時候，對 NeXT 不吝溢美之詞。
當然，最終喬布斯的 NeXT 和 加西的 Be 最終還是擺在了同一張桌子上，被選擇。
BeOS 是一個在當時來看極為激進的操作系統。它并不是為當時更為流行的辦公場景而構建，而是一款旨在為多媒體處理而生的操作系統。
它并沒有采用當時所流行的 Unix 的架構，有著一套相對更加獨特的系統邏輯和設計規則。
它同樣延續了當時最為流行的等軸測圖標設計，在配色上更為鮮亮，在視覺化設計上，一點都不弱于同時期的任何操作系統，包括 Macintosh 和 NeXTSTEP。
在交互邏輯上，BeOS 沿用了當時很多 Unix 操作系統的右側交互工具工具欄，正在運行的程序可以清晰地在此預覽，而右上角的 BeOS LOGO 則類似開始菜單，可以呼出程序列表：
BeOS 的圖標設計在統一性和規范性上極高，即使在今天看來，很多設計都不落俗套：
BeOS 能進入蘋果的備選，一個很重要原因是這套操作系統兼容當時 Macintosh 所用的 PowerPC 的架構。盡管它一直都未曾推進到 1.0 正式版，但是并不影響它在電腦領域收割一大波粉絲。
但是作為一個操作系統而言，在消費市場上依然是一個失敗的產品。
另外一邊，喬布斯 的 NeXT 電腦并沒有復制 Macintosh 消費市場上的成功。不過，NeXT 作為定位高端的工作站，倒是吸引了不少科學家和計算機領域的研究人員以及頂尖的數字創意從業者的注意。
在接近被收購的當口，NeXTSTEP 系統已經推進到了4.0 的大版本。由于它本身在硬件性能上的突出表現，在操作系統的各種細節上，一點都不吝惜，竭盡全力地刻畫細節。而這其中，有很多概念和想法是從 Macintosh 時代繼承并發揚出來，并惠及后面的 MacOSX 乃至于 macOS。
精巧的 3D 小插件，全彩高清大尺寸擬物化圖標，底部程序塢組件，以及可以購買軟件的軟件商店，甚至于著名的游戲 Doom 和 Quake 都是在 NeXTSTEP 上首發的。
無論是內部的功能，還是外部的 UI 元素的細節控制，NeXTSTEP 都在當時條件允許的前提下，做到了盡善盡美。比如登錄和關閉窗口中的光影細節：
（注：NeXTSTEP 是操作系統，而OpenStep 是一套 API。）
當然，NeXT 本身并不算成功，被蘋果收購是最好的結局之一，這不僅是市場的選擇，也是蘋果的選擇，是喬布斯的選擇。
終極對決發生在 1996年10月12日，地點是帕羅奧托的花園庭院酒店。
CEO Amelio、CTO Hancock ，以及另外 的 6 位董事會成員是最終決策者。加西志得意滿，沒有作任何演示，而喬布斯不僅使用了他的天賦技能「現實扭曲力場」，而且如同魔術師一般演示了 NeXTSTEP 的各種功能和特性。
蘋果公司，喬布斯，加西 三方的命運在此匯聚碰撞，然后再次扭轉。當然，這個扭轉的過程并非一帆風順，此時，距離蘋果的命運徹底改變，還有4年時間。
在離開蘋果、創立 NeXT 的階段，喬布斯和蘋果曾數度交惡，其中所產生的糾紛與訴訟在此刻依然是障礙。
NeXT公司同意了種種限制條款：其產品將作為高端智能終端直接銷售給高校，而且NeXT公司不能在1987年3月之前推出產品。蘋果公司還堅持，NeXT的機器「不能使用與Mac兼容的操作系統」。后來的情況表明，如果當時蘋果公司的要求剛好相反，會對自身更為有利。
——《史蒂夫·喬布斯傳》
看完了這些失敗的產品的產品，我們終于要說一下成功的產品了。
下一篇，我們將從「水」聊起。
引用來源：
https://en.wikipedia.org/wiki/Jean-Louis_Gass%C3%A9e
https://guidebookgallery.org/articles/sortingoutfactfromfiction
http://toastytech.com/guis/guitimeline2.html
https://lowendmac.com/2005/apples-copland-project/
https://en.wikipedia.org/wiki/Appearance_Manager
https://en.wikipedia.org/wiki/Star_Trek_project
https://dl.acm.org/doi/book/10.5555/582997
https://en.wikipedia.org/wiki/System_7
https://web.archive.org/web/20070120202050/http://robinnet.net/resume/Robin_portfolio_Taligent.htm
https://web.archive.org/web/20070106224709/http://www.wildcrest.com/Potel/Portfolio/InsideTaligentTechnology/WW87.htm
https://www.operating-system.org/betriebssystem/_english/bs-aix.htm
https://www.wired.com/1993/02/taligent/
文章來源：優設 作者：陳子木
（Onboarding 是指用戶第一次使用產品時認識、熟悉產品的過程）
往期回顧：
對設計系統有所認識的話應該會知道原子設計（Atomic Design）的重要性，我們也能將同樣的概念應用在 onboarding 上，其構成從宏觀到微觀分成體驗流程、控件形式與界面元素三個層級。
體驗流程是一個有時序性的旅程，可以由數個不同的載具表現組合而成；控件則是承載信息而存在的平面，可以放上不同的元素；而界面元素是無法再行分割的對象。
我在每個階段都舉了幾個常見的例子，搭配市面上產品的應用方法。
一個產品通常不會只有一種用戶——使用健身 app 可能是為了減肥，也可能是為了增重；使用協作產品可能是為了記錄工作成果，也可能是為了管理團隊。如果能夠在 onboarding 階段了解用戶的主要意圖、在適量的搜集信息后將用戶分流（記得上篇的避免過度吸收法則嗎？），就能夠打造更切身的體驗。
除了用戶分流之外，還有一些概括性的分流如下：
真正新的使用者 vs. 回流使用者
某些使用者只是因為一些外部因素（手機掉了、手滑刪掉 app、忘記密碼）而重新登錄/下載產品，他們已經接觸過產品的核心價值了，并不需要再次學習，這就是為什么跳過（skip）功能很重要。
邀請人 vs. 受邀人
如果邀請人已經設定好群組，受邀人應該自動被加入，某些信息也該自動填入，而非讓用戶再填一次，從而導致出錯。
新手 vs. 老手
與專業領域高度相關的產品（例如 Adobe 系列、CAD 系列等）還可以將用戶區分為已經很熟悉作業流程的老手與初學者等級的新手。老手最重視的是定制化以符合他們習慣的作業流程、作業效率高不高，并且跟其他競品做比較。新手則不然，初次使用產品時的他們也是初次進入這個領域，如果能幫助他們更加了解這個領域的大致流程的話會很加分。
△ Photoshop 的豐富資源指引（Rich Tooltips）對于新手來說是一大神助
特別點出幾個重點 features，簡單地告知用戶最重要的功能為何、組件在哪里，用戶在登錄產品之后只要知道這幾個主要動作就可以打遍天下無敵手。
△ Slack 指出 channel 和對話框如何使用
當產品較為復雜，難以指出特定 feature 時，也常以影片或圖片來展現產品價值——也就是畫一張大餅給用戶，讓他們想象未來的生活在用了這個產品后會有多便利，或是讓自我感覺提升。
相對于展示，實際演練更著重用戶要親自執行。許多研究都證實從做中學習的成效，就算只是訓練肌肉記憶（muscle memory），也能讓用戶對界面的物理空間更有概念，像是「噢對剛才有做過，我記得按鍵在右上角」。
我們也可以設計一套 demo 版的試用，像是將 scenario 抓一個出來讓用戶試跑，跑過一個假想的故事情節后印象會更為深刻。
在初次展示后將用戶引導的數據回收再利用，變成每當用戶有問題時都隨時可用的資源庫。
1. 導覽 Guided Tour
可能是影片，也可能是滑動式 slideshow，但總之是向用戶介紹產品的主要功能或是傳達產品價值，通常是為了展示的體驗流程所設置。
2. 指引 Tooltip / Coachmark
用極小的空間指向目標物，既可以集中用戶注意力，又不會遮蓋住大部分的使用空間，用戶可以一邊進行正規作業，一邊通過指引了解不懂的內容。
△ Dropbox Paper 用詼諧的語氣鼓勵你開始打字
有一陣子很多產品會將所有指引放在同一張圖上，但其實使用不當很容易造成信息過載、注意力分散、之后會很難全數記住的情況，我的建議是一次一個比較好。
3. 秀給我看 Show Me
通常只會出現在教程中，強迫用戶一定要親自去按到按鍵或執行關鍵動作，切實練習用戶的肌肉記憶。
1. 空白狀態的行動呼吁 Empty State CTA
擅用空白狀態是 onboarding 重要的一環，畢竟許多產品在用戶動作之前可能都沒有太多料，這時候就要運用行動呼吁。
例如 Tumblr 在指導使用者選擇有興趣的領域之后就指出如何 po 內容，因為其用戶生成平臺（UGC，User-generated content）的本質就是要鼓勵用戶多交流、多產出，平臺才有價值。
2. 進度列 Progress Bar
提供進度可視化，讓用戶有掌控時間的感覺，而不是不知道自己還要再走幾個步驟而感到不耐煩。
Basecamp 將進度列擺在上端，讓使用者知道已經快做完這些設置了
3. 待辦事項 Checklist
人類天生喜歡將事情「全部做完」，欲罷不能：科技如何讓我們上癮？可以協助我們「引誘」用戶更愿意完成 onboarding 程序。
Bluma Zeigarnik 讓受試者完成某些任務，但在他們完成另一些任務前打斷他們，強迫他們開始進行其他的任務。這些受試者會非常不情愿地停下手上正在做的事，有些人會強烈抗議，有些人甚至會生氣，這顯示出 Zeigarnik 的打斷為他們帶來多么大的壓力。到實驗的最后，受試者清楚記得那些未完成的任務。如果是打斷后一陣子又讓他們完成的話，就沒有這種效應。（摘自 欲罷不能）
4. 跳過 Skip
每次有 onboarding 都會選擇跳過的人舉手！
我喜歡把這稱為不喜歡看桌游規則的人們，所以在使用中遇到困難時給予提示，對他們來說才是最實用而且最愉悅的，而不是在使用前的紙上談兵。
△ Tumblr 在使用者第一次發文時才提示如何裝飾文字
設計 onboarding 時并不是只能選擇一種方法，我們可以靈活運用各種元素。將 onboarding 視為一個旅程，而不是單一元素的無限重復。我看過大部分最棒的例子都是綜合使用上述多種元素，以下以新興生產力工具 Coda 為例，來看看集上述大成的 onboarding 作品。
在第一次進入產品使用引導時，可以自行選擇偏好的學習方式——影片或是交互式教學。
Coda 并沒有強制用戶立刻進入 onboarding 模式，而是在呈現主畫面之余，讓我們看到右側的待辦事項，令人產生「想將之完成」的欲望。
點入后，先有個 setup 內容，任務情境是為了項目經理所設計，但隨著使用教程的進行，用戶也能夠聯想到自己生活中的其他任務，例如安排家庭旅游、寫系列文案、追蹤買家信息等。
正式進入學習階段后，進度條就出現了。
單純根據文字敘述，用戶仍然可能混淆，這時候 Show Me 功能可以減少不必要的誤解。
同上，當用專有名詞（此處的 section ）介紹某個界面元素時，將其他無關緊要的區域遮蓋住，聚焦在重點區域，用戶更容易將專有名詞跟界面鏈接在一起。否則單說 section 誰知道是哪一個 section？
結束時記得給辛苦學習的用戶一些獎勵，并且貼心附上下一步，當然還是要留給使用者最終決定權。
完成一項后，Coda 會幫用戶將完成的項目劃除，于是得到立即的回饋。
完成所有步驟之后，原先是教程列的右側區域轉變成資源列，每當使用上遇到困難時就可以尋求各種協助。
Onboarding 并不是只會出現一次，推出多年的產品也仍會時常進行。
onboarding 的程序，例如推出新 feature 或有重新設計（redesign）的時候，目的仍然是讓用戶快速熟悉產品，所以這是身為產品設計師不可忽視的一環。
另外，除了 UI/UX 設計之外，文案寫作也極其重要——如何跟用戶訴說一個吸引人的故事、描繪出他們想象中的自己，也是成功 onboarding 必要元素。
文章來源：優設 作者：
藍藍設計的小編 http://www.syprn.cn