01
什么是靈動(dòng)島（Dynamic island）
2022蘋果秋季新品發(fā)布會(huì)，備受關(guān)注的新一代iPhone如期而至，此次發(fā)布會(huì)最大的亮點(diǎn)是iPhone 14 Pro系列一改之前「劉海」設(shè)計(jì)，首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意，但一向以創(chuàng)新著稱的蘋果還是玩出了不一樣的花樣，帶來了全新的交互方式，模糊了硬件和軟件的界限，通過實(shí)時(shí)變化顯示重要的提醒、通知以及簡單的功能操作，蘋果把這一創(chuàng)新稱之為靈動(dòng)島（Dynamic island）。
02
靈動(dòng)島能做什么 / 不能做什么
靈動(dòng)島其實(shí)可以簡單的理解為基于前置攝像頭區(qū)域拓展的消息通知和快捷操作的新交互方式。
來電
當(dāng)有來電時(shí)，靈動(dòng)島會(huì)發(fā)生變化，并在后臺(tái)打電話時(shí)顯示通話時(shí)間和聲音波紋。
音樂
有點(diǎn)類似于鎖屏后的音樂功能操作，保留了基本的播放、暫停、前進(jìn)、后退等功能。
Airpods
連接AirPods后，AirPods的型號(hào)外觀和當(dāng)前電量會(huì)一起顯示。
導(dǎo)航
顯示導(dǎo)航方向和距離，并且能夠在適當(dāng)?shù)臅r(shí)候放大顯示更多導(dǎo)航信息。
Face ID
以前Face ID認(rèn)證會(huì)顯示在屏幕中間，現(xiàn)在集成于靈動(dòng)島的擴(kuò)展功能之中。
充電
當(dāng)充電時(shí)，會(huì)顯示充電的狀態(tài)以及當(dāng)前電量百分比。
當(dāng)然，目前除了官方展示的這些功能以外，還會(huì)有更多的應(yīng)用方式，在此不一一列舉。但靈動(dòng)島也并不是萬能的，例如會(huì)存在以下的局限性：
重度使用場景
從官方給出的樣例來看，靈動(dòng)島更多的是承擔(dān)了消息通知和提醒的作用，并不適用于重度使用和復(fù)雜交互等場景，例如消息聊天、刷短視頻、買賣交易等等。
過于復(fù)雜的圖形
受限于前置物理攝像頭，靈動(dòng)島這個(gè)區(qū)域并不能顯示過于復(fù)雜的圖形，并需要避開攝像頭區(qū)域，因?yàn)樵搮^(qū)域是不能顯示任何圖像的。
軟硬件的邊界
靈動(dòng)島的實(shí)際效果并不會(huì)像宣傳圖中那樣好，特別是在反光強(qiáng)烈的戶外。攝像頭的挖孔清晰可見的，即使是在黑色不發(fā)光的OLED屏幕上，軟件和硬件的界限還是能夠明顯區(qū)分。
03
對于靈動(dòng)島的各方反應(yīng)
新事物的出現(xiàn)，總會(huì)伴隨著支持和反對兩種聲音，此次靈動(dòng)島的創(chuàng)新交互，自然也是褒貶不一，還需要經(jīng)受時(shí)間的考驗(yàn)，因?yàn)榧词故翘O果這樣的公司也難免會(huì)犯錯(cuò)，比如3D Touch、MacBook上的Touch bar等。
支持方認(rèn)為「靈動(dòng)島是繼劉海屏之后的又一個(gè)成功設(shè)計(jì)，甚至?xí)絼⒑Ｆ?，更受歡迎」。
「靈動(dòng)島的設(shè)計(jì)非常討巧，同時(shí)也給挖孔屏帶來了更多的想象空間」。
而反對方的理由也十分充分，首先是羅永浩第一時(shí)間發(fā)表了自己的觀點(diǎn)，表面上是硬贊這個(gè)創(chuàng)新，但實(shí)則是諷刺了這樣多此一舉的方式，「先在臉上涂屎，然后再把屎的顏色調(diào)整得跟粉底差不多」
很多的輿論認(rèn)為，靈動(dòng)島的創(chuàng)新是蘋果的一種無奈和妥協(xié)，因?yàn)樽詮牡谝淮鷌Phone革新性的使用觸摸屏之后，十多年以來手機(jī)在工業(yè)設(shè)計(jì)方面并沒有太多的創(chuàng)新，大部分廠家是在屏幕分辨率，后蓋材質(zhì)，攝像頭像素上面做文章，而蘋果作為一個(gè)工業(yè)設(shè)計(jì)創(chuàng)新的公司，也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動(dòng)島的創(chuàng)新，被認(rèn)為是工業(yè)設(shè)計(jì)乏力之后推動(dòng)交互設(shè)計(jì)創(chuàng)新的無奈之舉。
但無論支持還是反對，前置攝像頭挖孔屏終究是一個(gè)過渡性的方案，最終會(huì)被全面屏所替代，而在這個(gè)過渡時(shí)期，很明顯蘋果的解決思路與國內(nèi)的絕大多數(shù)廠商都不一樣。
04
為什么國產(chǎn)手機(jī)不做靈動(dòng)島
國產(chǎn)手機(jī)的前置攝像頭解決方案除了「劉?！挂酝?，單攝像頭「圓孔」和雙攝像頭「藥丸」設(shè)計(jì)都已經(jīng)非常成熟，但是為什么經(jīng)過這么多年的迭代，依然沒有創(chuàng)新呢？
思維方式的差異
國產(chǎn)手機(jī)廠商的思路跟蘋果相反，希望盡可能的把前置攝像頭做得越小越好，甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案，目的就是為了把前置攝像頭隱藏。而蘋果的思路則是，既然現(xiàn)階段的技術(shù)沒有辦法把前置攝像頭隱藏，那么干脆就以此為基礎(chǔ)，把這個(gè)區(qū)域運(yùn)用到極致。
缺少創(chuàng)新和引領(lǐng)者
似乎國內(nèi)的用戶更關(guān)心的是電量是否持久、屏幕刷新率高不高、拍照功能強(qiáng)不強(qiáng)大等問題，秉持著「人民需要什么，我們就造什么」的成功理念，各大廠商也開始在這些方面內(nèi)卷，從60Hz到120Hz刷新率，從千萬像素到一億像素，從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情，而很少有關(guān)注從0到1，因?yàn)檫@樣做的性價(jià)比的確不高。
市場的接受和認(rèn)可程度
當(dāng)劉海屏第一次出現(xiàn)的時(shí)候，很多用戶都在吐槽，其中也包括很多蘋果的忠實(shí)用戶，寧愿買iphone8P也不愿意使用劉海屏的iPhone X。而經(jīng)過一兩年的審美教育以及國產(chǎn)手機(jī)的跟風(fēng)之后，才慢慢的被更多用戶所接受。因此國內(nèi)的廠商很難有信心通過一己之力去改變用戶習(xí)慣，并贏得市場的認(rèn)可。我相信，蘋果發(fā)布以后，各大廠商已經(jīng)在積極的學(xué)習(xí)和模仿，新的一輪內(nèi)卷即將拉開帷幕。
即便如此，國產(chǎn)廠商也并不是完全沒有在前置攝像頭的區(qū)域努力嘗試過。例如魅族曾經(jīng)在前置攝像頭上顯示當(dāng)前電量，稱之為「環(huán)形電量」，并盡可能的使其與狀態(tài)欄的其它信息融為一體。
榮耀的通話時(shí)間膠囊和自拍膠囊，都以前置攝像頭為基礎(chǔ)做延展，可以看得出在想盡辦法的規(guī)避前置攝像頭所帶來的不好體驗(yàn)。
雖然VIVO的原子通知不是圍繞前置攝像頭區(qū)域拓展，但從效果和想法來看，也與靈動(dòng)島的概念比較類似。
HTC曾經(jīng)出過一款HTC U Ultra，當(dāng)然那時(shí)候還沒有全面屏的概念，所以HTC把它稱之為副屏，可以顯示消息通知、音樂播放操作、App快捷入口等等。
除此以外，幾乎所有劉海屏的手機(jī)都有把劉海隱藏起來的功能。
05
對設(shè)計(jì)師的影響
靈動(dòng)島的出現(xiàn)，對 iOS 原本通知、交互、卡片、彈窗等一系列交互規(guī)范進(jìn)行了解構(gòu)再重做，就好比「劉海屏」首次出現(xiàn)的時(shí)候，需要設(shè)計(jì)師對全新交互邏輯、卡片行為、動(dòng)畫等重新適配。那么對于「靈動(dòng)島」我想需要考慮的是這幾個(gè)方面。
新的交互方式
之所以叫靈動(dòng)島，就是因?yàn)樗恰胳`動(dòng)」的，擁有不同的狀態(tài)變化，以適應(yīng)各種功能提示和操作。設(shè)計(jì)師在使用這個(gè)功能的時(shí)候，需要充分考慮其場景，恰如其分的給予提醒而不給用戶帶來過多的打擾。
新的容器
不同形態(tài)的容器可以裝載不同的內(nèi)容，相比于以往常規(guī)的通知提醒，新的容器可以展示更多的信息，甚至是簡單的功能操作。在提出解決方案的時(shí)候，留給設(shè)計(jì)師更多的想象空間。
新的表達(dá)方式
靈動(dòng)島相當(dāng)于一個(gè)永遠(yuǎn)在桌面上的島嶼，比任何App的優(yōu)先級都要高，所以會(huì)成為各個(gè)應(yīng)用的必爭之地，使用一種好的表達(dá)方式，必然能夠達(dá)到事半功倍的效果，因此也是考驗(yàn)設(shè)計(jì)師在寸土寸金的區(qū)域中，通過視覺化手段表達(dá)的能力。
最后，我想蘋果的初衷是為了更好的用戶體驗(yàn)，消除一部分用戶對于挖孔屏的焦慮，如果能夠真正的站在用戶的角度、克制的去使用新的交互方式，會(huì)得到用戶的喜愛和市場的認(rèn)可。
我認(rèn)為靈動(dòng)島既是一種創(chuàng)新也是一種妥協(xié)，對于工業(yè)設(shè)計(jì)硬件創(chuàng)新乏力的妥協(xié)，更是對技術(shù)發(fā)展的妥協(xié)。我也相信，真正的全面屏?xí)r代終究會(huì)到來，期待那個(gè)時(shí)候蘋果再一次給我們帶來真正意義上的，里程碑式的，創(chuàng)新！
作者：撿蘑菇的人
轉(zhuǎn)載請注明：站酷
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
關(guān)注趨勢本質(zhì)上就是關(guān)注未來可能存在的形態(tài)。很多營銷需求和優(yōu)秀設(shè)計(jì)趨勢是相互關(guān)聯(lián)的，兩者之間的關(guān)聯(lián)更像是一種動(dòng)態(tài)的同步。
很多時(shí)候趨勢并不一定是全新的東西，它們往往是服務(wù)于當(dāng)下和未來的需求，有很多趨勢存在了一些年頭，它們在現(xiàn)在發(fā)揮著作用，但是在未來可能會(huì)發(fā)揮更大的效用。所以，當(dāng)我們在查看這些設(shè)計(jì)趨勢的時(shí)候，需要注意，它們必須是服務(wù)于用戶，服務(wù)于品牌和企業(yè)。
更多設(shè)計(jì)趨勢：
的確，極簡主義一直在某種程度上流行，但是 2022 年出現(xiàn)的新極簡主義的浪潮，比起傳統(tǒng)的極簡主義設(shè)計(jì)更加在意用戶注意力的吸引。這種新極簡主義的設(shè)計(jì)會(huì)采用更加大膽、 生動(dòng)、明亮的色彩來填補(bǔ)留白，這種設(shè)計(jì)使得設(shè)計(jì)保持簡約的同時(shí)，更加富有調(diào)性，在簡約的框架下制造一種別樣的華麗，營造令人亢奮的氛圍。
干凈清晰、生動(dòng)的新極簡主義風(fēng)格在品牌推廣的過程中也更加受歡迎，大量的留白和跳脫的視覺焦點(diǎn)讓整個(gè)視覺更加抓人眼球，也使得品牌給人的感知更加新鮮獨(dú)特。
新極簡主義風(fēng)格，對比度在深色主題下得到了進(jìn)一步的提升。
這種設(shè)計(jì)并不意味著傳統(tǒng)的極簡主義已經(jīng)被用戶拋棄，很多企業(yè)依然會(huì)青睞更加傳統(tǒng)的單色極簡主義設(shè)計(jì)，不過其中多少會(huì)增加一些明亮的色彩作為點(diǎn)綴。
從 1950 年開始，粗野主義就是年輕化、反叛、反主流、標(biāo)新立異的設(shè)計(jì)風(fēng)格。在過去的幾十年當(dāng)中，這種設(shè)計(jì)風(fēng)格一直隨著時(shí)代的發(fā)展而自我迭代，新粗野主義更加強(qiáng)調(diào)創(chuàng)造力、 大膽前衛(wèi)的新奇元素，而這也正好符合很多品牌對于新奇性的追求，它可以瞬間抓住用戶的注意力。不過，這種風(fēng)格的使用需要控制好程度，否則很容易失控。
粗野主義經(jīng)久不衰的秘訣是什么？是未經(jīng)打磨、粗糲而原始的素材，它讓觀看者忍不住想要改進(jìn)它，這種未完成的原始感會(huì)在情感上吸引觀眾，這在營銷上是無價(jià)的優(yōu)勢。
粗野主義在設(shè)計(jì)上并非看起來那么粗糙，相反它更加需要高度的專業(yè)性來控制它粗野的程度。設(shè)計(jì)師需要敏銳地感知到觀看者改進(jìn)地欲望，讓設(shè)計(jì)粗野而不低級，原始而不拙劣。
新粗野主義柔糅合了極簡主義和大膽地排版，它依賴看似粗野地視覺沖擊：高對比度、粗糲地陰影，撞色、 簡約的背景、不對稱的布局、 未經(jīng)修飾的照片，新粗野主義偏好基礎(chǔ)款的加粗字體，跟注重可讀性而不是舒適所制造的視覺吸引力。
這個(gè)網(wǎng)站就是一個(gè)典型的例子：
這一趨勢在絕大多數(shù)的趨勢排行榜當(dāng)中，都占據(jù)首位。隨著技術(shù)的進(jìn)步，用戶和數(shù)字媒體之間的交互正在增加，引人入勝的交互已經(jīng)不僅僅停留在響應(yīng)式設(shè)計(jì)當(dāng)中，如今它已經(jīng)開始關(guān)注心理和生理的邏輯，開始全方位地調(diào)動(dòng)視覺、聽覺、 嗅覺、觸覺、味覺乃至于運(yùn)動(dòng)體感。
這種趨勢旨在幫助用戶體驗(yàn)真實(shí)地感覺，在完成交互地基礎(chǔ)上，觸發(fā)用戶地情緒反應(yīng)和生理反應(yīng)，熱氣騰騰地餡餅視頻讓人垂涎，游戲中虛擬地對手讓人腎上腺素激增。
交互所制造地參與感，在某種程度上是實(shí)際地物理產(chǎn)品地替代物，用戶可以從不同角度來縮放查看產(chǎn)品，了解細(xì)節(jié)，選擇尺寸，挑選顏色。
交互過程中，手指和屏幕之間地觸摸交互開始變得豐富，開始變得有意味，它成為了用戶和虛擬世界之間溝通地橋梁，開始有游戲地樂趣，有更具設(shè)計(jì)感地交互環(huán)節(jié)。用戶也可以根據(jù)自己地喜好，對界面進(jìn)行更多樣的個(gè)性化處理。
具有參與感的交互是我們的未來。
2022 年是疫情開始后的第三年，隔離使得人們對于照片所呈現(xiàn)出的故事和情感，有著更為強(qiáng)烈的情緒反應(yīng)。在極簡主義設(shè)計(jì)當(dāng)中，富有表現(xiàn)力的人物照片是最為流行的元素之一，這類照片搭配上簡短的文字，簡練的口號(hào)，一些帶有宏大敘事特質(zhì)的文字引用，時(shí)常能夠更好地營造出故事感。
不用擔(dān)心主屏頁面太長沒人看，只要隨著用戶滾動(dòng)，故事會(huì)隨之逐步展開，用戶可以在照片、 標(biāo)題、視頻、動(dòng)畫和文本地指引下，看到整個(gè)故事有步驟地呈現(xiàn)。
在這當(dāng)中，富有表現(xiàn)力的人物照片是吸引用戶注意力的關(guān)鍵要素。
另外就是頁面的 Banner 的部分，強(qiáng)調(diào)主題和內(nèi)容的標(biāo)題文本，是用戶從屏幕上獲取的重要信息之一。
如今的用戶越來越偏好在詳細(xì)閱讀內(nèi)容之前，快速瀏覽一下全局的做法，這也使得 Scrollytelling（滾動(dòng)敘事：通過滾動(dòng)觸發(fā)音頻、視頻、 動(dòng)畫效果的一種技術(shù)）這種漸進(jìn)式敘事方式，可以像電影一樣將故事呈現(xiàn)在用戶眼前。
Scrollytelling 適合大量的內(nèi)容呈現(xiàn)，比如對于公司和產(chǎn)品的描述，對于數(shù)據(jù)呈現(xiàn)或者認(rèn)知要求較高的內(nèi)容，它適合學(xué)習(xí)和記憶性內(nèi)容的呈現(xiàn)。
3D 圖形設(shè)計(jì)正在越來越流行，因?yàn)樗_實(shí)是吸引用戶注意力的最主要的工具之一。3D 圖像無論有多么奇異，它本身都會(huì)被認(rèn)為是有真實(shí)感的，明確的體積，精致的建模，所有的一切都令人著迷。很多時(shí)候，用戶停留在有3D元素的頁面上，是為了更細(xì)致的欣賞。
3D 圖形設(shè)計(jì)的趨勢從來都沒有減退，它正在進(jìn)入更多的領(lǐng)域，甚至進(jìn)入了品牌推廣的領(lǐng)域。3D 動(dòng)畫圖標(biāo)比過去更能吸引用戶的注意力。
我們通常說的抽象插畫，指的是帶有明確幾何特征的插畫，它們被廣泛地應(yīng)用于網(wǎng)站和 APP，在社交媒體和包裝設(shè)計(jì)中也越來越多的存在。
抽象插畫之所以會(huì)如此成功，是因?yàn)樗鼈兇蠖嘤兄说纳鷦?dòng)色彩和良好對比度，視覺上的美感和極簡主義的風(fēng)格特質(zhì)，它們成為視覺的焦點(diǎn)，為整個(gè)設(shè)計(jì)提升視覺。
抽象插畫在品牌營銷場景下的應(yīng)用也很多，它們在這個(gè)時(shí)候是貼合品牌推廣的訴求的：通過色彩和形式來吸引用戶來關(guān)注品牌的形象和名稱。
這種趨勢的特別之處是其中的文本字體元素是完全獨(dú)立的。這些文本不僅僅是用來傳遞信息的，它們還充當(dāng)著拉升頁面視覺效果的重要作用，它們結(jié)合動(dòng)畫和交互，成為頁面中醒目的亮點(diǎn)。
超大字體的優(yōu)點(diǎn)在于，它和很多設(shè)計(jì)風(fēng)格是相得益彰的，加粗的大字體在極簡主義風(fēng)格的頁面上不會(huì)顯得突兀，在元素豐富的頁面上，同樣可以起到優(yōu)秀的點(diǎn)綴作用。這些文本內(nèi)容可以和纖細(xì)和小尺寸的元素協(xié)同，而后者則襯托出它本身的醒目。
超大文本字體的另一個(gè)好處是有效地減少網(wǎng)頁上的圖像的使用，縮短加載時(shí)間，提升移動(dòng)端的可用性。
這種設(shè)計(jì)元素最重要的，是選擇易讀且符合品牌調(diào)性的字體。
這么多年來，我們看到來這么多的趨勢，很多趨勢是一以貫之持續(xù)出現(xiàn)，有的趨勢則如同流星一樣一閃而逝。好的趨勢不斷迭代升級，并且持續(xù)存在，但是最重要的，始終是那些選擇合理的方案，并且堅(jiān)持改進(jìn)設(shè)計(jì)，讓趨勢服務(wù)于終端的產(chǎn)品和用戶的設(shè)計(jì)師。
讓趨勢服務(wù)于你，不要盲目地追趨勢！
作者：陳子木
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
作為產(chǎn)品設(shè)計(jì)師，無論在什么公司什么崗位，都免不了與研發(fā)團(tuán)隊(duì)進(jìn)行溝通，如果不進(jìn)行溝通就無法交付我們的設(shè)計(jì)稿，即便很成熟的團(tuán)隊(duì)也會(huì)出現(xiàn)在溝通上的問題，在產(chǎn)品研發(fā)的過程中溝通是必要的流程，為了創(chuàng)造一致的用戶體驗(yàn)，設(shè)計(jì)師需要與開發(fā)人員在視覺上、交互上達(dá)到一致的想法，但是講起來簡單，說起來難，在整個(gè)過程設(shè)計(jì)師和開發(fā)都是站在不同的角度去看待問題的，我們思考的如何達(dá)到美觀的界面、流暢的交互等問題，而開發(fā)關(guān)心的是做這件事我需要花費(fèi)多長時(shí)間，實(shí)現(xiàn)難度如何等等，首先目標(biāo)就不在同一個(gè)維度，那么必然會(huì)造成我們在對接的時(shí)候出現(xiàn)掰扯的問題，最后耽誤的都是雙方的時(shí)間，更嚴(yán)重點(diǎn)頁面最后的體驗(yàn)也沒有達(dá)到一致。
任何團(tuán)隊(duì)都會(huì)出現(xiàn)設(shè)計(jì)師與開發(fā)脫節(jié)的問題很常見，遇見什么問題解決什么問題，畢竟人與人的性格、溝通方式等都是不同的。
我們只需要在不同的流程里去做不同的事情就可以避免這些問題了，對于任何設(shè)計(jì)師基本都會(huì)適用，往下看～
1. 產(chǎn)品信息文檔確認(rèn)
在接到一個(gè)需求的時(shí)候產(chǎn)品經(jīng)理會(huì)通知上下游進(jìn)行需求的評審，這時(shí)候一般會(huì)是產(chǎn)品經(jīng)理、設(shè)計(jì)師、開發(fā)三個(gè)組進(jìn)行需求的評估，具體的需求評審在本章就不細(xì)講，我們此次主要講設(shè)計(jì)師與開發(fā)相關(guān)的信息同步。
在評審過程中產(chǎn)品經(jīng)理會(huì)把需求背景、需求目標(biāo)等相關(guān)信息同步給相關(guān)的人員，作為設(shè)計(jì)師這時(shí)候就要關(guān)注需求目標(biāo)，這個(gè)目標(biāo)不僅是產(chǎn)品經(jīng)理的目標(biāo)，也是整個(gè)項(xiàng)目的目標(biāo)，所以與每個(gè)人都相關(guān)，需求目標(biāo)清晰后期推動(dòng)開發(fā)的時(shí)候才會(huì)有依據(jù)。
評審會(huì)議結(jié)束后，產(chǎn)品經(jīng)理會(huì)同步期望上線時(shí)間，如果是常規(guī)需求，會(huì)當(dāng)時(shí)就評估出設(shè)計(jì)時(shí)間、開發(fā)時(shí)時(shí)間，我們設(shè)計(jì)師這時(shí)候就要關(guān)注這些時(shí)間，因?yàn)槲覀兺ㄟ^上線時(shí)間就可以估算開發(fā)節(jié)奏，給我們后期的修改以及臨時(shí)添加的一些動(dòng)效制作時(shí)間會(huì)留出充裕的時(shí)間。
設(shè)計(jì)評審流程細(xì)節(jié)本章不進(jìn)行細(xì)節(jié)講解，本章重點(diǎn)講與開發(fā)對接。
近期我在公司做了一個(gè)商業(yè)化的直播項(xiàng)目需求，由于產(chǎn)品方?jīng)]有過多的產(chǎn)研經(jīng)驗(yàn)（后面才知道），在項(xiàng)目前期雖然進(jìn)行了評審，但是評審的參與人員沒有拉上我，等到需求給到我的時(shí)候，我順便問了一下才知道已經(jīng)評審?fù)炅?，這對于我來講是沒辦法進(jìn)行設(shè)計(jì)輸出的。
第一我不知道評審過程中開發(fā)的排期時(shí)間，以及測試時(shí)間，如果研發(fā)開始開發(fā)的時(shí)間與設(shè)計(jì)稿交付時(shí)間有沖突那么就是影響上線節(jié)奏。
第二涉及的交互操作產(chǎn)品經(jīng)理是不清楚的，有沒有哪些地方需要加復(fù)雜的交互產(chǎn)品也是同樣不清楚，那么開發(fā)就會(huì)默認(rèn)這是常規(guī)的交互，如果過程中添加那將會(huì)影響開發(fā)進(jìn)度。
第三流程上不符合要求，期間如果有關(guān)鍵性信息沒有達(dá)到共識(shí)，那將會(huì)釀成很嚴(yán)重的后果。
面對這種已經(jīng)發(fā)生的事情，如果重新拉個(gè)會(huì)評審一次會(huì)耽誤大家的時(shí)間，很多人是不愿意的，但是呢我也不能單聽產(chǎn)品一方面的溝通，因?yàn)楹芏嗉?xì)節(jié)他是不清楚的（產(chǎn)品經(jīng)驗(yàn)較少），所以當(dāng)時(shí)我的處理方法呢是我先通過產(chǎn)品給出的上線時(shí)間，然后與前端同學(xué)單獨(dú)確認(rèn)一下，這樣至少保證上線時(shí)間是同步的，至于其他的細(xì)節(jié)我當(dāng)時(shí)是利用設(shè)計(jì)評審的方式同步給開發(fā)交互邏輯、動(dòng)效方式等。
此次這個(gè)需求呢本身不大是在舊版的基礎(chǔ)上優(yōu)化功能，理論上不需要走設(shè)計(jì)評審流程，但是因?yàn)楫?dāng)時(shí)沒有通知參加評審導(dǎo)致很多信息不同步，而我需要傳達(dá)給開發(fā)的東西也不能在后期在告訴他們，所以我利用設(shè)計(jì)評審流程把一些交互信息同步給開發(fā)。
2. 設(shè)計(jì)圖準(zhǔn)備
在設(shè)計(jì)稿完成后，如果是小需求一般是直接交付給研發(fā)，如果是大需求一般會(huì)進(jìn)行設(shè)計(jì)評審，主要評審維度是設(shè)計(jì)稿是否與產(chǎn)品文檔同步，設(shè)計(jì)目標(biāo)是否符合產(chǎn)品目標(biāo)等等，其次如果有復(fù)雜交互效果、設(shè)計(jì)細(xì)節(jié)、組件復(fù)用情況也需要與研發(fā)對齊。
若是直接交付研發(fā)，我們需要提前把設(shè)計(jì)稿內(nèi)涉及的切圖、圖層間距、動(dòng)效使用區(qū)域等關(guān)鍵信息提前準(zhǔn)備好，避免在開發(fā)過程中臨時(shí)進(jìn)行補(bǔ)充，影響開發(fā)節(jié)奏。
在設(shè)計(jì)稿內(nèi)的切圖，我們要提前與研發(fā)溝通，切圖的范圍和形式，最后把設(shè)計(jì)稿傳入公司統(tǒng)一使用的協(xié)作網(wǎng)站，如藍(lán)湖、即時(shí)設(shè)計(jì)等平臺(tái)，大公司會(huì)有自己的協(xié)作平臺(tái)。
3. 確定設(shè)計(jì)規(guī)范組件
講個(gè)自己的踩坑案例，還是商業(yè)化的那個(gè)需求，由于為了商業(yè)化賦能，產(chǎn)品的需求文檔并沒有按照規(guī)范組件進(jìn)行設(shè)計(jì)，但是由于產(chǎn)品文檔標(biāo)注的不清楚，在設(shè)計(jì)過程中不斷與產(chǎn)品進(jìn)行溝通，最后結(jié)果當(dāng)然也是無法復(fù)用組件，當(dāng)時(shí)我就把組件規(guī)范修改了，重點(diǎn)是研發(fā)不知道，我當(dāng)時(shí)想的是研發(fā)通過產(chǎn)品文檔應(yīng)該會(huì)了解到，事實(shí)確實(shí)我大意了，后面就導(dǎo)致組件方面我與研發(fā)進(jìn)行了相愛相殺，通過自己的以身作則我勸大家不要忽略任何一個(gè)細(xì)節(jié)！
設(shè)計(jì)規(guī)范組件在設(shè)計(jì)前就需要進(jìn)行確認(rèn)，項(xiàng)目是否有存留的規(guī)范組件，如果有，需要在設(shè)計(jì)前以及設(shè)計(jì)中去確認(rèn)哪些模塊是否可以調(diào)用，開發(fā)是否已經(jīng)將組件寫入代碼中，如果不了解這些情況貿(mào)然的設(shè)計(jì)，那在對接過程中會(huì)出現(xiàn)修改設(shè)計(jì)稿的風(fēng)險(xiǎn)。
如果是創(chuàng)新項(xiàng)目并且沒有相關(guān)的設(shè)計(jì)規(guī)范和組件，我們則需要在設(shè)計(jì)前就把規(guī)范組件的時(shí)間給算到需求內(nèi)，一個(gè)產(chǎn)品的規(guī)范組件，決定著后續(xù)產(chǎn)品是否嚴(yán)謹(jǐn)、項(xiàng)目研發(fā)效率等等，因?yàn)橐?guī)范組件不止是設(shè)計(jì)師的事情，還是團(tuán)隊(duì)研發(fā)比較關(guān)注的事情，研發(fā)們在代碼里同樣需要進(jìn)行規(guī)范的組件復(fù)用。
4. 輸出設(shè)計(jì)文檔
當(dāng)在做一些在舊版的產(chǎn)品頁面上優(yōu)化的需求時(shí)，還需要輸出對應(yīng)設(shè)計(jì)文檔，給前端和測試看，設(shè)計(jì)文檔需要寫清楚設(shè)計(jì)稿優(yōu)化的點(diǎn)，例如圖標(biāo)的細(xì)節(jié)優(yōu)化、文字的字號(hào)優(yōu)化、色彩優(yōu)化、界面交互等等細(xì)節(jié)。
如果涉及到一些頁面的交互，我們在提供設(shè)計(jì)稿的同時(shí)需要把具象的交互文件單獨(dú)交給開發(fā)，不要奢望前端大佬們能腦補(bǔ)出頁面之間的交互，我們不及時(shí)提供的話，后期修改研發(fā)可能會(huì)直接拒絕，并且口吐芬芳～（最簡單的找到競品頁面演示給研發(fā)看）。
我的方法
前端在看我們設(shè)計(jì)稿時(shí)如果不是結(jié)構(gòu)上的修改，他們不會(huì)去關(guān)注這些細(xì)節(jié)的點(diǎn)，而給測試看的目的是，有些公司測試會(huì)幫我們進(jìn)行走查，如果不出設(shè)計(jì)文檔測試沒辦法進(jìn)行對比（測試提 bug 比設(shè)計(jì)師提 bug 更具有一些權(quán)威性）。
這里看一下我工作中輸出的設(shè)計(jì)文檔，我會(huì)把需求的背景、目標(biāo)在設(shè)計(jì)文檔上強(qiáng)調(diào)一下，再添加上設(shè)計(jì)目標(biāo)，設(shè)計(jì)目標(biāo)為了需求目標(biāo)去賦能，這樣在文檔開始就與研發(fā)達(dá)成共識(shí)，讓研發(fā)是帶著共同完成目標(biāo)的態(tài)度去看設(shè)計(jì)文檔，便于我們后續(xù)推動(dòng)，其次放上頁面之間的說明。
5. 交付開發(fā)
最后總結(jié)一下，我們要交付給開發(fā)什么東西，首先是基本的設(shè)計(jì)稿，包括切圖、間距、動(dòng)效文件，其次是設(shè)計(jì)文檔，包括需求背景、需求目標(biāo)、設(shè)計(jì)目標(biāo)、設(shè)計(jì)修改點(diǎn)說明。
1. 不要頻繁修改
在交付設(shè)計(jì)稿后（基本設(shè)計(jì)圖、設(shè)計(jì)文檔），我們就要避免頻繁修改，頻繁的修改會(huì)導(dǎo)致設(shè)計(jì)稿來回更新，對開發(fā)造成一種困惑，最后在測試的時(shí)候，開發(fā)同學(xué)容易寫亂，另一方面工作過的設(shè)計(jì)師都應(yīng)該經(jīng)歷過，我們在開發(fā)的過程中修改設(shè)計(jì)稿，大部分的開發(fā)都會(huì)帶點(diǎn)情緒，甚至不給我們改，這其實(shí)是因?yàn)榇蠖嚅_發(fā)的代碼寫的是比較規(guī)范統(tǒng)一的，如果中途進(jìn)行修改可能會(huì)影響開發(fā)同學(xué)的代碼規(guī)范，就像我們在完成一個(gè)設(shè)計(jì)稿的時(shí)候，產(chǎn)品經(jīng)理突然改變需求，我們也是擔(dān)心做好的設(shè)計(jì)稿因?yàn)樾薷亩淮騺y。
如果實(shí)在需要修改，一定要說明原因，而不是突然一個(gè)想法覺得這里設(shè)計(jì)不合適就進(jìn)行修改（產(chǎn)品需求修改除外），我們要換位思考，具有同理心去工作，并且讓開發(fā)同學(xué)感受到我們是在幫助他們減少工作量，這樣在后續(xù)的一些需求中，我們的對接會(huì)很順暢。
2. 重要信息及時(shí)通知
上面說的是站在設(shè)計(jì)師的角度去修改，還有一種情況是研發(fā)在開發(fā)過程中，作為設(shè)計(jì)師的我們突然收到產(chǎn)品經(jīng)理的修改建議，這時(shí)候我們需要及時(shí)的同步給開發(fā)，或者給開發(fā)同事達(dá)成共識(shí)信息，因?yàn)楹芏鄷r(shí)候，產(chǎn)品經(jīng)理讓我們修改的時(shí)候往往不會(huì)通知開發(fā)，因?yàn)閷τ诋a(chǎn)品經(jīng)理而言就是一個(gè)小的修改，例如改個(gè)位置、改個(gè)顏色等等，但不管是對我們還是對于開發(fā)其實(shí)都是比較重要的，不及時(shí)同步就會(huì)出現(xiàn)不好的結(jié)果，如果在測試階段沒有發(fā)現(xiàn)問題，上線后就會(huì)造成設(shè)計(jì)師背鍋的情況。
我曾經(jīng)在做一個(gè)頁面改版的時(shí)候，就遇到類似的問題，當(dāng)時(shí)產(chǎn)品找到我說改一個(gè)地方的交互，并且我也覺得那個(gè)交互方式應(yīng)該改，當(dāng)時(shí)的我以為產(chǎn)品經(jīng)理會(huì)同時(shí)告訴開發(fā)修改的地方，但是直到項(xiàng)目上線后開發(fā)都沒修改那個(gè)地方的交互，本來這個(gè)修改點(diǎn)是個(gè)小事情，誰知?jiǎng)偤媚且粋€(gè)版本被用戶吐槽那個(gè)頁面的交互，結(jié)果可想而知領(lǐng)導(dǎo)拉個(gè)會(huì)議開始復(fù)盤，為什么沒有改，索性大家沒有互相甩鍋的情況，產(chǎn)品經(jīng)理說沒有同步到開發(fā)，而我也是幫產(chǎn)品兜了一下說更新設(shè)計(jì)稿沒有告訴開發(fā)，這個(gè)事情原本是個(gè)很小的事情，只需要我順口同步給開發(fā)，就能夠避免的，就因?yàn)槲覜]有及時(shí)同步，造成用戶的反饋，影響了產(chǎn)品的體驗(yàn)。
所以各位設(shè)計(jì)師工作中如果遇到類似的事情一定要及時(shí)同步！
3. 統(tǒng)一需求目標(biāo)
開始講到過，在需求評審的時(shí)候要與開發(fā)對齊目標(biāo)，為什么需要對齊目標(biāo)，因?yàn)橐粋€(gè)項(xiàng)目如果目標(biāo)不對齊，那么每個(gè)人都會(huì)站在自己的角度去做這個(gè)需求，設(shè)計(jì)師思考的是通過設(shè)計(jì)的手段，去幫助產(chǎn)品完成目標(biāo)，如果設(shè)計(jì)稿上的復(fù)雜效果較多的時(shí)候，開發(fā)則會(huì)考慮你為什么這么做，這么做開發(fā)成本非常高等等，這也是說為什么我們開始就講要輸出設(shè)計(jì)文檔，如果這一切都不存在的話就會(huì)導(dǎo)致開發(fā)是帶著疑問寫我們的頁面，如果過程中在修改需求什么的，那我們跟開發(fā)又要相愛相殺了。
我的設(shè)計(jì)方式是通常是在產(chǎn)品評審階段就與開發(fā)明確講清楚，我大概要做什么樣的效果，什么的交互形式，預(yù)計(jì)什么時(shí)候會(huì)交初步方案，中途也可能會(huì)有修改的點(diǎn)等等，提前讓開發(fā)有個(gè)心理預(yù)期，避免在開發(fā)過程中產(chǎn)生抵抗情緒。
我的經(jīng)驗(yàn)
4. 輸出交互動(dòng)畫
如果在前期沒有時(shí)間進(jìn)行動(dòng)效設(shè)計(jì)并沒有關(guān)系，研發(fā)在開發(fā)過程中可以在把動(dòng)效方面給空出來后續(xù)寫，這里講的交互動(dòng)畫分為兩種，一種是展示的動(dòng)畫，一種是 ui 中的動(dòng)效。
展示動(dòng)畫
目的是為了告知開發(fā)頁面運(yùn)動(dòng)的軌跡，在 1-4 中講到我個(gè)人用的方法，大家如果是剛對接研發(fā)的話，建議還是輸出完整的交互動(dòng)畫，這里推薦一些工具 AE、Principle、Pixso、Figma 等。
AE：大家就比較熟悉了，經(jīng)典的動(dòng)效繪制軟件，什么樣的效果都能實(shí)現(xiàn)，但是使用成本比較高（不建議）
Principle：國外的一款交互軟件，制作頁面交互很方面，可以直接導(dǎo)入 figma 和 sketch，由于是國外軟件需要使用英文界面，但是國內(nèi)也有漢化版。
Pixso：國產(chǎn)最新的設(shè)計(jì)軟件與 figma 類似，做交互的方式是使用多個(gè)頁面添加熱區(qū)進(jìn)行使用，具體體驗(yàn)如何還不清楚（可以用用）
Figma：設(shè)計(jì)軟件目前的天花板，流暢的體驗(yàn)，支持頁面動(dòng)畫設(shè)計(jì)，但是需要安裝插件才可以（建議使用）
動(dòng)效文件
這個(gè)比較重要！我們一定要與研發(fā)同事溝通好，產(chǎn)品內(nèi)使用什么樣格式的動(dòng)效文件，統(tǒng)一后能提升后續(xù)的開發(fā)效率，動(dòng)效格式使用亂套的話，后續(xù)我們做更新迭代時(shí)做替換會(huì)很麻煩，開發(fā)也同樣如此，這里推薦幾種動(dòng)效格式文件，分別是 GIF、json、pag、svga 這 4 種。
GIF：傳統(tǒng)的動(dòng)效文件格式，優(yōu)點(diǎn)是學(xué)習(xí)成本低，第一個(gè)缺點(diǎn)是內(nèi)存大，圖片容易失真模糊，他的原理就是把每一幀的圖片融合在一起，最后形成動(dòng)畫，圖片越多，內(nèi)存越大，第二個(gè)缺點(diǎn)是占用產(chǎn)品資源，當(dāng)內(nèi)存過高時(shí)，在加載時(shí)會(huì)出現(xiàn)卡頓。
Json：該文件格式是通過 Lottie 實(shí)現(xiàn)的，是 Airbnb 開發(fā)的一款能夠?yàn)樵鷳?yīng)用添加動(dòng)畫效果的開源工具，它的優(yōu)點(diǎn)就是內(nèi)存小、無需加載、動(dòng)畫不會(huì)失真，缺點(diǎn)呢就是支持得動(dòng)畫方式?jīng)]有 gif 那么全面，以及使用成本也比較高。
具體使用步驟是需要我們裝 ae 插件 bodymovin，通過插件導(dǎo)出 json，常遇見的問題就是在導(dǎo)出漸變動(dòng)畫時(shí)，漸變效果會(huì)消失，這是因?yàn)槲覀?ae 安裝得都是中文版，而該插件更多的適配是英文版，不過沒關(guān)系這里可以把漸變效果的名字改為 gradient fill1 就可以了，如果多個(gè)漸變的話我們更改后面序列號(hào)就可以，比如 gradient fill1、gradient fill2、gradient fill3…，這里把漢化插件鏈接也給大家找到了。
網(wǎng)站鏈接：https://zdo.fun/?p=557
我的經(jīng)驗(yàn)
Pag：pag 是騰訊研發(fā)的一種技術(shù)文件，最初主要用于游戲動(dòng)畫和直播動(dòng)畫，用來解決復(fù)雜的動(dòng)畫效果，目前在 ui 頁面中運(yùn)用也比較多，優(yōu)點(diǎn)是占比內(nèi)存比 json 文件更小，支持的動(dòng)畫方式也更豐富，運(yùn)行時(shí)可編輯，缺點(diǎn)是適配原生有些問題，壓縮位圖時(shí)會(huì)出現(xiàn)不顯示，這個(gè)軟件目前還在完善階段，我曾經(jīng)也使用過，后來因?yàn)檫m配問題就放棄了，感興趣的大家可以通過下面鏈接下載。
網(wǎng)站鏈接：https://pag.io/docs/install.html
svga：該文件格式的強(qiáng)大之處在于可以完整的將位圖轉(zhuǎn)換成二進(jìn)制代碼，并且內(nèi)存占比較于 json 更小，播放資源占用更低，并且技術(shù)上相對穩(wěn)定（建議使用）
網(wǎng)站鏈接：https://svga.io/designer.html
我們看下 svg 實(shí)現(xiàn)的效果
最后，我們一定要統(tǒng)一產(chǎn)品內(nèi)使用的動(dòng)效文件格式，這樣既方便我們，也方便開發(fā)，讓開發(fā)看到我們設(shè)計(jì)師的嚴(yán)謹(jǐn)性，便于后續(xù)合作。
1. 跟進(jìn)開發(fā)進(jìn)度
作為設(shè)計(jì)師，我們需要實(shí)時(shí)了解開發(fā)的進(jìn)度，這樣能夠保證我們在過程中掌握自己的設(shè)計(jì)節(jié)奏，什么時(shí)間交給開發(fā)動(dòng)效文件，如果進(jìn)行修改也可以不影響上線時(shí)間（當(dāng)然不建議這樣做），那么具體需要怎么跟進(jìn)呢，大概分為以下幾個(gè)維度。
時(shí)間進(jìn)度跟進(jìn)：
設(shè)計(jì)師可以時(shí)不時(shí)的問一嘴，是否能按照正常的計(jì)劃時(shí)間節(jié)點(diǎn)提測（正常需求提交后，開發(fā)會(huì)給出開發(fā)排期，盡量按照時(shí)間排期走，否則項(xiàng)目進(jìn)度會(huì)變得很不可控）。
如果開發(fā)反饋時(shí)間會(huì)有延期風(fēng)險(xiǎn)，那設(shè)計(jì)師第一時(shí)間就要了解原因，以及預(yù)計(jì)延期多久，然后自身評估以下對設(shè)計(jì)上是否有影響。
需求變更跟進(jìn)：
一般開發(fā)過程中，或多或少都會(huì)出現(xiàn)一些需求調(diào)整/變更的點(diǎn)，那么其中就會(huì)涉及設(shè)計(jì)上的改動(dòng)，改動(dòng)小的話產(chǎn)品經(jīng)理有時(shí)候會(huì)直接告訴我們，并不會(huì)告訴開發(fā)，這時(shí)候如果身為設(shè)計(jì)師的我們要及時(shí)通知開發(fā)，并說明原因（避免爭論）。
并且，需求變更后，需要和開發(fā)評估新的項(xiàng)目上線時(shí)間點(diǎn)，站在我們或者產(chǎn)品角度理解有時(shí)候我們認(rèn)為的修改，對于開發(fā)來講是耗費(fèi)時(shí)間較長的，需要我們注意是否會(huì)影響上線時(shí)間。
交互動(dòng)效實(shí)現(xiàn)跟進(jìn)：
在 2-4 中講到我們要輸出交互動(dòng)畫，雖然我們輸出的動(dòng)畫很直觀，以及動(dòng)效文件也完整，但是避免不了認(rèn)知上的偏差，有時(shí)候開發(fā)會(huì)按照技術(shù)難度以及自身理解去完整交互效果，我們中途要隨時(shí)跟進(jìn)了解，避免開發(fā)在錯(cuò)誤的路上越走越遠(yuǎn)。
測試跟進(jìn)：
及時(shí)了解該需求是否已經(jīng)提測、哪些還未提測，若到了提測時(shí)間的功能未進(jìn)入測試，可以詢問產(chǎn)品或開發(fā)什么原因，這樣對項(xiàng)目或設(shè)計(jì)師都是負(fù)責(zé)的。
另外一點(diǎn)是我們設(shè)計(jì)師需要在提測階段介入 UI 走查，因?yàn)楦鱾€(gè)公司或者項(xiàng)目測試時(shí)間有長有短，所以我們要及時(shí)把 UI 走查工作介入進(jìn)去，給開發(fā)預(yù)留出修改時(shí)間，有的小公司不重視 UI 走查流程，這里我們就可以自驅(qū)進(jìn)行走查，主動(dòng)找測試同學(xué)了解提測時(shí)間，及時(shí)走查，保證頁面還原度。
2. 設(shè)計(jì)走查
走查是 UI 工作中最為重要的工作，它決定著產(chǎn)品上線后能否完美的展現(xiàn)給用戶，下面我大致把走查的流程以及范圍給大家梳理下。
創(chuàng)建走查文檔
在 UI 走查階段，我們首先需要建立走查文檔便于開發(fā)瀏覽解決，走查文檔主要包含日期、版本、項(xiàng)目名稱、模塊、端口、問題描述、修改狀態(tài)、圖片標(biāo)注，這樣一方面能夠讓問題更加詳細(xì)，體現(xiàn)設(shè)計(jì)師的專業(yè)度，一般我是使用在線表格去建立走查文檔，當(dāng)然這個(gè)看每個(gè)公司所使用的協(xié)作平臺(tái)。
開通手機(jī)權(quán)限
一般在走查移動(dòng)端產(chǎn)品時(shí)，安裝測試包需要開通賬號(hào)權(quán)限，這里可以找公司的開發(fā)或者測試同事給開通，避免影響走查效率。
走查范圍
分為基礎(chǔ)走查、細(xì)節(jié)走查、適配走查
基礎(chǔ)走查包含字體、顏色、圖標(biāo)、間距、對齊方式等具體可根據(jù)產(chǎn)品形態(tài)進(jìn)行延伸，其中間距走查比較費(fèi)時(shí)間，需要我們通過測試機(jī)截圖后，按照倍數(shù)縮放到源文件內(nèi)進(jìn)行測量，測試機(jī)分辨率需要保證與設(shè)計(jì)稿一致，否則測量不準(zhǔn)確，例如設(shè)計(jì)圖是 375*812，以 ios 為例測試機(jī)則需要使用與 375*812 分辨率相同的尺寸測試。
細(xì)節(jié)走查包含字體截字、按壓狀態(tài)、組件內(nèi)容、交互狀態(tài)
適配走查包含關(guān)鍵信息是否超出屏幕、是否出現(xiàn)擠壓、是否出現(xiàn)重疊、識(shí)別度是否清晰
3. 避免添加復(fù)雜交互
在走查階段如果我們發(fā)現(xiàn)部分的交互效果不太理想，并未達(dá)到預(yù)期，我們可以與開發(fā)進(jìn)行溝通是否可以修改，或者添加新的交互效果，因?yàn)樵谶@個(gè)階段我們重新設(shè)計(jì)或者定義一個(gè)新的交互動(dòng)效的話，會(huì)增加非常大的開發(fā)工作量，可能也會(huì)與開發(fā)產(chǎn)生爭吵，我們在這個(gè)時(shí)期盡量避免這個(gè)問題，如果實(shí)在沒有解決辦法的時(shí)候再去添加新的交互。
我在工作中，如果遇到這種事情，會(huì)分兩點(diǎn)考慮這個(gè)事情。
第一評估下當(dāng)下這個(gè)交互效果是否會(huì)影響用戶體驗(yàn)，如果影響用戶體驗(yàn)我會(huì)要求開發(fā)必須 100%還原，當(dāng)然我會(huì)講述清楚為什么改，避免讓開發(fā)產(chǎn)生情緒抵抗。
第二是如果不影響用戶體驗(yàn)，但是還原度沒有達(dá)到預(yù)期，我同樣會(huì)先找開發(fā)進(jìn)行溝通，例如按照交互稿還原會(huì)有什么困難，是時(shí)間上的困難還是技術(shù)上的困難，時(shí)間上如果困難我會(huì)溝通好下一期必須還原到位，技術(shù)上困難我一般會(huì)修改交互形式，盡量保證上線后給用戶展現(xiàn)的是完美的狀態(tài)。
4. 數(shù)據(jù)追蹤
作為設(shè)計(jì)師在需求上線后并不代表需求就結(jié)束了，我們還需要追蹤數(shù)據(jù)情況是好是壞，為什么我們設(shè)計(jì)師要去追蹤這個(gè)數(shù)據(jù)呢，追蹤數(shù)據(jù)是為了讓我們在工作中提升自己的設(shè)計(jì)價(jià)值，隨著現(xiàn)在互聯(lián)網(wǎng)發(fā)展逐漸飽和，那么企業(yè)對于各個(gè)崗位的要求也跟互聯(lián)網(wǎng)初期不一樣，以前我們只需要畫畫圖交付就可以了，但是現(xiàn)在的企業(yè)更看重的是綜合能力，說簡單點(diǎn)就是做 UI 的人很多，優(yōu)秀的 UI 一樣很多，那么我們就得被迫提升核心競爭力否則就是被淘汰。
而追蹤數(shù)據(jù)其實(shí)就是增加我們得核心競爭力，同時(shí)也是能夠體現(xiàn)自己設(shè)計(jì)能力的一項(xiàng)內(nèi)容，設(shè)計(jì)最終是為商業(yè)而服務(wù)的，但我們不能嘴上說說，而是要拿出實(shí)際的行動(dòng)，這個(gè)行動(dòng)就是數(shù)據(jù)，我們的設(shè)計(jì)如何為數(shù)據(jù)賦能的，如何幫業(yè)務(wù)達(dá)到目標(biāo)等等，數(shù)據(jù)如何分析是個(gè)很龐大的體系這里只講下我們身為設(shè)計(jì)師為什么需要追蹤數(shù)據(jù)。
簡單講下工作中數(shù)據(jù)解析的案例。
下面是我做的一個(gè)直播商業(yè)化改版需求，改版背景呢是直播業(yè)務(wù)由原先的為 c 端用戶賦能改為，為 b 端企業(yè)賦能，通過與企業(yè)合作而產(chǎn)生價(jià)值，那么基于這個(gè)直播形態(tài)肯定是需要變化的，需求目標(biāo)由原先的「用戶收益」改為「企業(yè)收益」，新的目標(biāo)具體為提升企業(yè)品牌曝光點(diǎn)擊、互動(dòng)、預(yù)約人數(shù)、提升直播在企業(yè)客戶測的感知收益。
案例
基于這個(gè)目標(biāo)，其實(shí)不難發(fā)現(xiàn)，目標(biāo)已經(jīng)從用戶側(cè)改為大客戶，更多的是為企業(yè)去賦能，頁面的結(jié)構(gòu)肯定需要進(jìn)行變化的，左邊的圖呢是改版之前的，右邊的是改版之后的，那么我當(dāng)時(shí)的思路呢其實(shí)就是基于數(shù)據(jù)方面去進(jìn)行優(yōu)化。
整體：產(chǎn)品策略添加了二級浮窗用來承載更多內(nèi)容。
直播介紹：首先舊版策略是直播介紹對于用戶而言并不重要，用戶只需要通過看到直播標(biāo)題就能夠了解大致直播內(nèi)容，更多是以引導(dǎo)形式存在，所以信息外漏較少，而新的策略是講企業(yè)介紹默認(rèn)展示在二級浮窗內(nèi)，用戶可選擇關(guān)閉，提升企業(yè)感知。
投遞簡歷：舊版策略是需要側(cè)重用戶投遞率，因此在預(yù)約界面就展示入口，而新的策略是需要給企業(yè)強(qiáng)化觀看人數(shù)、預(yù)約人數(shù)從而提升客戶價(jià)值，基于這一點(diǎn)，我當(dāng)時(shí)是通過數(shù)據(jù)后臺(tái)看了下預(yù)約頁面的點(diǎn)擊數(shù)據(jù)，發(fā)現(xiàn)點(diǎn)擊率最最高的是「投遞簡歷」入口，而「預(yù)約直播」入口點(diǎn)擊率相對較低，因此把投遞簡歷入口調(diào)賬到浮窗 tab 區(qū)域，降低層級，讓預(yù)約直播成為視覺焦點(diǎn)，而上線后數(shù)據(jù)也是符合預(yù)期。
企業(yè)關(guān)注：將企業(yè)名稱與關(guān)注結(jié)合并且放大，提升關(guān)注量，強(qiáng)化企業(yè)品牌感知和數(shù)據(jù)感知，關(guān)注與預(yù)約直播兩者無論數(shù)據(jù)高低，都是符合企業(yè)目標(biāo)，從而便于業(yè)務(wù)人員與企業(yè)進(jìn)行合作溝通。
從我這個(gè)案例中我們能清楚看到，基本上任何需求都是可以通過數(shù)據(jù)的維度，進(jìn)行優(yōu)化，并且通過量化指標(biāo)提升設(shè)計(jì)價(jià)值，無論對公司還是個(gè)人都有很大收益，并且我們追蹤數(shù)據(jù)也便于后續(xù)我們與開發(fā)對接時(shí)，可以通過數(shù)據(jù)維度去促進(jìn)我們設(shè)計(jì)上的修改、完善等工作，這也是為什么說我們需要對每個(gè)需求都要進(jìn)行數(shù)據(jù)追蹤。
無論是對接前、對接中、對接后，在哪個(gè)階段都需要我們認(rèn)真對待，熟知這些細(xì)節(jié)后，才能更好的與開發(fā)合作，進(jìn)行項(xiàng)目推進(jìn)，優(yōu)秀的設(shè)計(jì)師不僅是專業(yè)和技術(shù)上的成熟，還需要有協(xié)作上下游的能力，在很多團(tuán)隊(duì)中設(shè)計(jì)師跟開發(fā)都會(huì)面臨不一樣的挑戰(zhàn)最終可能會(huì)因?yàn)槟承﹩栴}發(fā)生沖突，我們需要減少這樣的沖突。
作者：愛吃貓的魚
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
奇數(shù)法則意思是說，在設(shè)計(jì)作品中奇數(shù)元素比偶數(shù)元素更有趣。偶數(shù)元素在圖像中產(chǎn)生了對稱，這可能會(huì)顯得過于正式和不自然。比如，在一行中排列三個(gè)或五個(gè)卡片會(huì)比 2 個(gè)或 4 個(gè)效果更好，作品會(huì)更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數(shù)原則做的網(wǎng)頁設(shè)計(jì)
三分法構(gòu)圖（也被稱之為黃金網(wǎng)格規(guī)則），在畫面中以水平和豎直方向分成 3×3 的網(wǎng)格和 4 個(gè)交叉點(diǎn)。這個(gè)規(guī)則能很好的協(xié)助設(shè)計(jì)師將最重要的元素放在網(wǎng)格的交叉點(diǎn)上，這樣可以很容易的設(shè)計(jì)出滿意的構(gòu)圖。
為什么會(huì)這樣？因?yàn)槿址?gòu)圖創(chuàng)造了類似斐波那契數(shù)列(黃金比例)那種不對稱的美，產(chǎn)生了更有吸引力的構(gòu)圖。
你希望用戶關(guān)注哪些地方？高級設(shè)計(jì)師非常擅長引導(dǎo)用戶的視覺焦點(diǎn)，這種引導(dǎo)可以通過可見和不可見的引導(dǎo)線來完成。這些線條在構(gòu)圖中也可以打造一種動(dòng)感，也能為畫面增添視覺沖擊力。
達(dá)到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導(dǎo)線來實(shí)現(xiàn)。利用透視、顏色、對比度和正負(fù)空間同樣可以幫助達(dá)到這種想要的效果。
從左到右的不易察覺的曲線將用戶的視線引導(dǎo)到頁面文字上
大?。╯cale）是設(shè)計(jì)中一個(gè)元素與另一個(gè)元素的相對大小。元素通過大小不同創(chuàng)建視覺層次，其中最大的元素首先會(huì)吸引用戶的注意力，因此看起來是最重要的。常規(guī)的設(shè)計(jì)策略就是將最重要的元素做成最大的，然后逐級遞減。
比例(Proportion)不同于大小，類似但有區(qū)別。比例原則是指一個(gè)整體設(shè)計(jì)中各部分的尺寸關(guān)系。設(shè)計(jì)中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。
熟練地使用大小和比例是實(shí)現(xiàn)設(shè)計(jì)統(tǒng)一的關(guān)鍵。當(dāng)一些元素的大小過大或過小，或者比例失調(diào)時(shí)，設(shè)計(jì)組合就會(huì)失去統(tǒng)一性。這種錯(cuò)誤可能發(fā)生在排版和其他元素上。例如，標(biāo)題與子標(biāo)題和正文相比顯得過大。當(dāng)設(shè)計(jì)元素失衡時(shí)，設(shè)計(jì)就會(huì)“感覺不平衡”。
大小和比例都沒做好時(shí)(左圖)，看起來處理的比較細(xì)致了，但依然沒有做到很好，在大小上正文和標(biāo)題分不清(右圖)。
強(qiáng)調(diào)原則用于使設(shè)計(jì)的某些元素突出(使用對比、接近、比例、留白等)或不突出，即弱化強(qiáng)調(diào)(例如在頁面底部有一個(gè)幾乎看不見的“小字”)。強(qiáng)調(diào)是層級之母，因?yàn)闆]有強(qiáng)調(diào)就沒有層級。
與其他一些設(shè)計(jì)原則一樣，“強(qiáng)調(diào)”是用來引導(dǎo)人們關(guān)注設(shè)計(jì)，并強(qiáng)調(diào)需要重點(diǎn)關(guān)注的第一、第二和第三點(diǎn)。首頁面和電商轉(zhuǎn)化頁面在 99%的情況下都使用這種原則。
使用這個(gè)原則，在購物網(wǎng)站上強(qiáng)調(diào)了標(biāo)語和產(chǎn)品，轉(zhuǎn)化效果非常好
統(tǒng)一是指設(shè)計(jì)元素如何很好地結(jié)合在一起，形成“視覺凝聚力”。它指的是設(shè)計(jì)中的連貫性，讓人們覺得所有部分都是一起的。每個(gè)元素都應(yīng)該具有清晰的視覺關(guān)系，以幫助傳達(dá)清晰、簡潔的信息。整體性好的設(shè)計(jì)比整體性差的設(shè)計(jì)更有條理，質(zhì)量也更高。
運(yùn)用統(tǒng)一的配色，重復(fù)、平衡和對稱之類的原則將有助于在設(shè)計(jì)中形成一種和諧感，也就是一致性。設(shè)計(jì)中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個(gè)完美的整體。
一致的顏色、重復(fù)的圖案、平衡和對稱在蒂芙尼的網(wǎng)站上創(chuàng)造了一種統(tǒng)一的感覺。
格式塔的接近原則讓設(shè)計(jì)師將同類型的相關(guān)元素進(jìn)行分組。把它們分開得更遠(yuǎn)，元素就顯得越不相關(guān)，它們之間的關(guān)系就會(huì)減弱。一般來說，人們會(huì)認(rèn)為遠(yuǎn)離的元素是不相關(guān)的。
不應(yīng)該讓用戶在設(shè)計(jì)中分辨哪些元素是相互關(guān)聯(lián)的，正如美國郵政服務(wù)的例子所顯示的那樣，缺乏對鄰近性的關(guān)注會(huì)導(dǎo)致直接的認(rèn)知緊張，損害用戶體驗(yàn)。
接近原則沒做好的案例。由于字段標(biāo)簽離它們下面的字段更近，人們可能會(huì)搞混
下面是一個(gè)鄰近性原則做的好的案例，我們可以看到相關(guān)元素是如何通過鄰近性關(guān)聯(lián)起來的(分組的元素用紫色表示)。
一個(gè)把接近原則用好的網(wǎng)頁設(shè)計(jì)案例
一致性原則使數(shù)字產(chǎn)品的使用更加可預(yù)測，符合用戶的期望。設(shè)計(jì)中的一致性可以培養(yǎng)熟悉度，它可以提高用戶體驗(yàn)、可用性和用戶使用效率。另一方面，不一致的設(shè)計(jì)將產(chǎn)生更多的認(rèn)知負(fù)荷/腦力勞動(dòng)，并導(dǎo)致困惑和挫折。這就相當(dāng)于在用戶的路徑上設(shè)置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強(qiáng)“審美凝聚力”。“我們都知道，當(dāng)我們使用應(yīng)用時(shí)，應(yīng)用的導(dǎo)航位置如果經(jīng)常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺一致性和易用性，品牌一致性在產(chǎn)品設(shè)計(jì)中也發(fā)揮著重要作用。如果沒有一致的元素呈現(xiàn)，如排版、配色和圖案，高質(zhì)量的品牌體驗(yàn)將無法傳遞。
在用戶體驗(yàn)方面，一致性意味著在設(shè)計(jì)中使用相似的 UI 元素來完成相似的任務(wù)，即在整個(gè)產(chǎn)品中擁有相似的功能和行為。因?yàn)榭捎眯允且环N評估用戶界面易用性的質(zhì)量屬性，所以一致性對用戶體驗(yàn)的可用性有很大的貢獻(xiàn)。
一致性是通過使用相同的配色、排版、間距、模式和交互來實(shí)現(xiàn)的。
顏色在設(shè)計(jì)中是非常重要，幾乎是設(shè)計(jì)中最具影響力的創(chuàng)意元素。一個(gè)深思熟慮的配色可以讓一個(gè)設(shè)計(jì)從普通到驚艷，而一個(gè)平庸的配色會(huì)降低用戶的體驗(yàn)，甚至阻礙他們使用產(chǎn)品的能力。
明亮、豐富的顏色比柔和的顏色更引人注目，因此有更大的視覺沖擊。柔和的顏色可以提供一個(gè)令人愉快的，微妙的配色方案，但適當(dāng)?shù)膶Ρ缺仨氁?，特別是文字，必須保證可讀性。
顏色甚至可以用于呈現(xiàn) UI 中的結(jié)構(gòu)感并指向可用的交互，但為設(shè)計(jì)制作一個(gè)配色方案并不是一項(xiàng)簡單的任務(wù)。除了品牌化，還必須非常小心地創(chuàng)造顏色的和諧和耐用性，使得它能在各個(gè)場景下都能正常使用。
色彩心理學(xué)也不容忽視。色彩承載著意義和情感，可以向人的潛意識(shí)傳遞信息。在品牌方面，人們對顏色做了大量的心理學(xué)研究，因?yàn)樵谌藗兣c品牌進(jìn)行任何互動(dòng)之前，顏色會(huì)讓他們產(chǎn)生一種本能的反應(yīng)。例如，藍(lán)色通常被認(rèn)為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認(rèn)為是增加人們的心率，想想飲料包裝。
一個(gè)極簡主義的暗色主題設(shè)計(jì)傳達(dá)了一個(gè)特定的品牌氣質(zhì)，并使用了少量的顏色。
排版在設(shè)計(jì)中扮演著非常重要的角色，它的重要性再怎么強(qiáng)調(diào)都不為過。在構(gòu)圖中，字體樣式對人們感知設(shè)計(jì)的影響比任何其他元素都大，可能除了顏色。
因?yàn)槲覀兊拇竽X以閃電般的速度運(yùn)轉(zhuǎn)，一個(gè)字體會(huì)對一個(gè)設(shè)計(jì)產(chǎn)生影響，以至于它可能在不到一眨眼的時(shí)間內(nèi)改變用戶的印象。與顏色一樣，字體甚至?xí)绊懳覀兊那榫w，資深設(shè)計(jì)師可以通過字體傳達(dá)情緒和風(fēng)格。通過選擇合適的字體，我們可以傳達(dá)出穩(wěn)定、優(yōu)雅、舒適、可靠、有力等信息。
排版層次結(jié)構(gòu)可以快速建立視覺層次結(jié)構(gòu)，并且通常在其中扮演重要角色。因此，在設(shè)計(jì)中經(jīng)常使用不同的字體和字體大小來表示層次結(jié)構(gòu)，例如標(biāo)題、副標(biāo)題、正文和引用。
“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達(dá)重要內(nèi)容，并表達(dá)你的品牌?！?——蘋果的人機(jī)界面指南
蘭博基尼的網(wǎng)站巧妙地使用了排版風(fēng)格和比例來賦予其設(shè)計(jì)力量。
Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點(diǎn)也適用于設(shè)計(jì)，元素之間的負(fù)空間給予設(shè)計(jì)強(qiáng)調(diào)、平衡和統(tǒng)一。
元素周圍適當(dāng)?shù)呢?fù)空間將焦點(diǎn)集中在元素本身。它強(qiáng)調(diào)了內(nèi)容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點(diǎn)，更容易感到困惑。
蘋果官網(wǎng)提供了一個(gè)利用負(fù)空間創(chuàng)造強(qiáng)烈焦點(diǎn)的杰出例子。
人們已經(jīng)開始期待所有平臺(tái)和設(shè)備上的優(yōu)化、無阻礙的用戶體驗(yàn)。理解設(shè)計(jì)原則及其交互方式對所有設(shè)計(jì)師來說都是至關(guān)重要的。使用專業(yè)技能設(shè)計(jì)它們是創(chuàng)造具有視覺吸引力的功能性設(shè)計(jì)的關(guān)鍵。我們不要忘記，美學(xué)的完整性會(huì)嚴(yán)重影響用戶體驗(yàn)。
基于原則的設(shè)計(jì)是設(shè)計(jì)師在感覺有點(diǎn)迷失或用盡創(chuàng)意時(shí)可以依賴的黃金標(biāo)準(zhǔn)方法。在沒有理解和實(shí)現(xiàn)設(shè)計(jì)原則的情況下，也可能實(shí)現(xiàn)可接受的設(shè)計(jì)。然而，這可能需要大量的嘗試和錯(cuò)誤才能創(chuàng)造出看起來不錯(cuò)的內(nèi)容，并創(chuàng)造出最佳的用戶體驗(yàn)。
產(chǎn)品的美學(xué)質(zhì)量與它的實(shí)用性密不可分，因?yàn)槲覀兠刻焓褂玫漠a(chǎn)品影響著我們和我們的幸福。但只有精心制作的物品才會(huì)美麗。— Dieter Rams(迪特爾·拉姆斯)
當(dāng)我們不關(guān)注由設(shè)計(jì)原則驅(qū)動(dòng)的設(shè)計(jì)質(zhì)量時(shí)，我們可能會(huì)忽視品牌質(zhì)量及其所代表的一切。當(dāng)某些東西設(shè)計(jì)不好時(shí)，品牌就會(huì)受到傷害，產(chǎn)品也會(huì)受到影響。這就是為什么偉大的設(shè)計(jì)師在他們的工作中極其嚴(yán)謹(jǐn)， 他們知道“你永遠(yuǎn)不會(huì)有第二次機(jī)會(huì)給人留下良好的第一印象?！?
設(shè)計(jì)的細(xì)節(jié)成就了設(shè)計(jì)本身。—— 查爾斯 伊姆斯（Charles Eames）
作者：彩云Sky
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
懸浮小窗是什么？
先看張圖，對懸浮小窗有一個(gè)大致的概念，下圖是花椒直播 APP 中的直播懸浮小窗。（為方便書寫，下文將懸浮小窗簡稱為小窗）
本文的懸浮小窗指的是視覺空間上的層級概念。
用戶的感知是：
為什么這種感知能應(yīng)用到互聯(lián)網(wǎng)產(chǎn)品中？
原因就在于這符合尼爾森可用性原則中的系統(tǒng)與用戶現(xiàn)實(shí)匹配原則。
即：設(shè)計(jì)應(yīng)與用戶現(xiàn)實(shí)生活中對相關(guān)產(chǎn)品的認(rèn)知、經(jīng)驗(yàn)、習(xí)慣等相符，以用戶期望的方式表現(xiàn)出來，使用戶可以利用已有的知識(shí)經(jīng)驗(yàn)來執(zhí)行操作任務(wù)。
翻譯成人話就是讓用戶在使用我們的產(chǎn)品時(shí)能夠和現(xiàn)實(shí)生活中的習(xí)慣對應(yīng)起來。
舉個(gè)例子：
電商軟件中“購物車”為什么使用購物車這一形象和名稱？
其實(shí)就是和現(xiàn)實(shí)生活對應(yīng)起來的，生活中逛超市的時(shí)候會(huì)把要買的東西加入購物車一起結(jié)算。所以“購物車”這個(gè)概念遷移到互聯(lián)網(wǎng)后用戶的理解成本就非常低。
懸浮小窗也是一樣的道理，小窗模擬了生活中的空間轉(zhuǎn)移，在用戶的心智層，界面與界面之間的跳轉(zhuǎn)就類似于從一個(gè)房間到達(dá)另一個(gè)房間。
即使某些時(shí)候多個(gè)界面在技術(shù)的角度其實(shí)就是一個(gè)頁面，但是站在用戶的角度看不到這些底層邏輯，最直觀的就是一個(gè)個(gè)房間之間的切換。
（其實(shí)這里還涉及到另一個(gè)概念，把簡單留給用戶，把復(fù)雜留給程序。不管邏輯多復(fù)雜，對用戶來說，就是兩個(gè)空間的跳轉(zhuǎn)。）
懸浮小窗有三個(gè)特點(diǎn)：可切換界面、Z 軸最高、可拖拽（一般情況）。
① 可切換界面
如上一節(jié)所說，懸浮小窗就像是房間的切換，所以感官上懸浮小窗就是切換界面的作用。
② Z 軸最高
二維界面如何存在 Z 軸的概念？
大家在使用 APP 過程中一定遇到過彈窗和浮層的情況，如下圖，可以看到圖中 APP 的彈窗在感知上是覆蓋在內(nèi)容層上的。
而右邊的截圖中的浮層是浮在正文內(nèi)容上的，這就是 Z 軸，在互聯(lián)網(wǎng)應(yīng)用中這是比較抽象的空間維度。但是卻是用戶可以明確感知到的，而感知的最直接方式就是覆蓋或者懸浮，感覺到 A 元素是覆蓋在 B 元素之上，或者 A 元素懸浮在 B 元素之上。
而懸浮小窗所謂 Z 軸最高則是因?yàn)閼腋⌒〈霸?Z 軸的維度一般位于 APP 界面所有元素之上。
③ 可拖拽
可拖拽很好理解，即用戶可以通過拖拽移動(dòng)懸浮小窗的位置，不過一般非直播音頻類產(chǎn)品會(huì)喜歡固定在界面的某個(gè)地方。比如得到 APP 在聽書時(shí)退出聽書頁面會(huì)在底部固定一個(gè)播放條。
技術(shù)維度把懸浮小窗分為兩種：系統(tǒng)自帶和自行開發(fā)。
內(nèi)容維度上把懸浮小窗分為三種：視頻小窗、音頻小窗、文檔小窗（含白板）
由于系統(tǒng)自帶畫中畫功能自定義程度不高，無參考意義，下文主要從自行開發(fā)的懸浮小窗入手，從視頻小窗、音頻小窗和文檔小窗（含白板）三種分類來進(jìn)行分析。
此部分內(nèi)容是對第三部分的總結(jié)提煉，相關(guān)產(chǎn)品詳細(xì)分析、截圖以及錄屏細(xì)節(jié)請查看第三部分。
① 視頻小窗
GIF 演示（左滑屏幕邊緣開啟小窗）
GIF 演示（拖拽小窗超出屏幕邊緣后關(guān)閉）
視頻小窗 UI 集合
② 音頻小窗總結(jié)
音頻小窗 UI 集合
③ 文檔小窗
文檔小窗 UI 集合
本次調(diào)研 APP 覆蓋直播、音樂、社交、教育、會(huì)議、資訊四個(gè)方向，包括斗魚、虎牙、花椒直播、企鵝直播、CC 直播、阿里巴巴、淘寶、酷狗直播、陌陌、微信、陌陌、百度知道、邁聆會(huì)議、金山會(huì)議、網(wǎng)易會(huì)議、共計(jì) 15 款 APP。
視頻小窗將從功能和 UI 兩個(gè)大的維度進(jìn)行分析，細(xì)分維度如下表格。
斗魚
APP 簡介：以游戲直播為主的互動(dòng)式直播平臺(tái)
亮點(diǎn)
a 導(dǎo)航欄免遮擋，小窗拖拽移動(dòng)過程中不會(huì)覆蓋一級導(dǎo)航和一級頁面的底部 tab 欄，可避免將主要導(dǎo)航遮擋住
b「關(guān)閉」按鈕視覺強(qiáng)度較弱的同時(shí)能夠看清 icon
槽點(diǎn)
放大縮小不流暢，有卡頓的感覺
虎牙直播
APP 簡介：包含游戲、娛樂的互動(dòng)式直播平臺(tái)
亮點(diǎn)
a 滑動(dòng)小窗到屏幕關(guān)閉小窗：除了點(diǎn)擊關(guān)閉按鈕，還可以左滑小窗到左右屏幕邊緣，超出屏幕 2/3 時(shí)關(guān)閉小窗
b 同斗魚，導(dǎo)航欄免遮擋，小窗拖拽移動(dòng)過程中不會(huì)覆蓋一級導(dǎo)航和一級頁面的底部 tab 欄，可避免將主要導(dǎo)航遮擋住
槽點(diǎn)
自動(dòng)打開聲音：在小窗上將聲音關(guān)閉后，點(diǎn)擊小窗上的放大按鈕進(jìn)入全屏模式，此時(shí)聲音會(huì)自動(dòng)打開。聲音的開關(guān)應(yīng)該由用戶自行選擇而非幫用戶做選擇，萬一用戶所處場合不適合開聲音，突然開啟的聲音豈不是很尷尬。
花椒直播
APP 簡介：包含游戲、娛樂的互動(dòng)式直播平臺(tái)
槽點(diǎn)
a 同虎牙，關(guān)閉聲音的情況下打開直播間會(huì)自動(dòng)打開聲音
小窗會(huì)移動(dòng)時(shí)可以擋住頂部一級導(dǎo)航欄
得到
APP 簡介：知識(shí)服務(wù) APP，提供電子書、課程等服務(wù)。視頻以點(diǎn)播為主。
亮點(diǎn)
向下滑動(dòng)視頻觸發(fā)小窗的方式交互非常友好且順手
頁面切換到有『發(fā)布』懸浮按鈕時(shí)，懸浮按鈕位置位于小窗之上，避免遮擋發(fā)布按鈕
作者：土撥鼠
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
① 導(dǎo)航的起源與本質(zhì)
導(dǎo)航，英文是 Navigation，是 Navigate 的名詞形式，源于 1530 年代，由詞根 Navis 船+agere 駕駛組合而成。指的是借助某些科學(xué)儀器，找到從一個(gè)島嶼到另一個(gè)島嶼的路徑。
圖1 導(dǎo)航的起源
誕生于中世紀(jì)大航海的導(dǎo)航，從誕生之初就跟起點(diǎn)、目標(biāo)和路徑密切相關(guān)。隨著導(dǎo)航的發(fā)展，導(dǎo)航領(lǐng)域從海洋擴(kuò)展到陸地，航空、太空，以及互聯(lián)網(wǎng)。
圖2 導(dǎo)航領(lǐng)域的類型
今天我們重點(diǎn)要聊的就是移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的導(dǎo)航設(shè)計(jì)，雖然脫離了物理空間，但導(dǎo)航的本質(zhì)始終是不變的。
圖3 導(dǎo)航的本質(zhì)
導(dǎo)航本質(zhì)：告訴用戶“我”在哪里（起點(diǎn)）？“我”能去到哪里（目標(biāo)）？“我”該怎么去（路徑）？
基于此，導(dǎo)航設(shè)計(jì)一定要能清晰的體現(xiàn)用戶當(dāng)前所在的位置（一般用選中態(tài)表示），并通過其他未選中的導(dǎo)航，來告知用戶可以去的目標(biāo)，再通過最簡單的點(diǎn)擊或滑動(dòng)等操作讓用戶去往目的地。
圖4 互聯(lián)網(wǎng)產(chǎn)品導(dǎo)航示意
我歸納了移動(dòng)端常見的 10 種導(dǎo)航形式，大家可以根據(jù)其優(yōu)缺點(diǎn)和適用場景按需選用。
圖5 移動(dòng)端常見的10種導(dǎo)航形式
① 底 Tab 導(dǎo)航
底 Tab 導(dǎo)航在 iOS 中叫標(biāo)簽導(dǎo)航，在 Android 中稱之為底部導(dǎo)航，我將其稱為底 Tab 導(dǎo)航，它是 iOS 中最倡導(dǎo)和常見的導(dǎo)航形式。（現(xiàn)在也全面征服了 Android 系統(tǒng)）
圖6 底Tab導(dǎo)航
優(yōu)點(diǎn)：清晰直觀的展示了產(chǎn)品的核心功能，點(diǎn)擊切換方便快捷。
缺點(diǎn)：只能容納 3-5 個(gè)，數(shù)量有限。
使用場景：產(chǎn)品包含 3~5 個(gè)需要高頻切換使用的非同類型模塊時(shí)可用。
② 舵式導(dǎo)航
舵式導(dǎo)航可以看做是底 Tab 導(dǎo)航的一個(gè)變異，區(qū)別就在于把中間的導(dǎo)航像船舵一樣凸顯，以此來強(qiáng)調(diào)中間的導(dǎo)航功能（一般用于承載發(fā)布類功能）。
圖7 舵式導(dǎo)航
優(yōu)點(diǎn)：舵式導(dǎo)航特殊的造型和顏色可以很好的吸引用戶注意力，促進(jìn)功能轉(zhuǎn)化。
缺點(diǎn)：為了讓舵居中，導(dǎo)航個(gè)數(shù)只能為 3 個(gè)或 5 個(gè)，數(shù)量有限制。聚合多個(gè)發(fā)布類功能時(shí)，需要二次選擇，操作不夠便捷。
使用場景：對于強(qiáng)調(diào) UGC 類的產(chǎn)品或者特別高頻的操作可以使用。
③ 頂 Tab 導(dǎo)航
頂 Tab 導(dǎo)航最開始是 Android 推出用以抗衡 iOS 底 Tab 導(dǎo)航的，結(jié)果大家已經(jīng)有感知了（抗衡徹底失?。５?Tab 導(dǎo)航并沒有因此而消失，而是重新找到了自己作為次級導(dǎo)航的生態(tài)位。
圖8 頂Tab導(dǎo)航
優(yōu)點(diǎn)：可以承載 2~N 個(gè)導(dǎo)航，可拓展性強(qiáng)，手勢切換比較便捷。
缺點(diǎn)：手勢切換有學(xué)習(xí)成本，頂部點(diǎn)擊不方便，看不見的導(dǎo)航內(nèi)容不容易被發(fā)現(xiàn)和使用。
使用場景：作為主導(dǎo)航幾乎已被底 Tab 取代，作為次級導(dǎo)航非常常見，特別是有多個(gè)并列層級的內(nèi)容需要展示時(shí)。
④ 抽屜導(dǎo)航
如果產(chǎn)品只有一類核心展示的內(nèi)容，可以使用抽屜導(dǎo)航而不用底 Tab 導(dǎo)航，以最大限度的利用屏幕空間。
圖9 抽屜導(dǎo)航
優(yōu)點(diǎn)：可拓展性強(qiáng)，可以收納多個(gè)不常用的功能，釋放屏幕展示空間。
缺點(diǎn)：被隱藏的功能不容易被發(fā)現(xiàn)和使用。
使用場景：某些核心功能比較單一的產(chǎn)品，或者跟底 Tab 導(dǎo)航組合使用，收納不常用的功能。
⑤ 菜單式導(dǎo)航
跟抽屜式導(dǎo)航類似，把一組操作收納到一個(gè)地方，用戶可以點(diǎn)擊快速選擇。
圖10 菜單式導(dǎo)航
優(yōu)點(diǎn)：可拓展性強(qiáng)，可以收納多個(gè)功能，釋放屏幕展示空間。
缺點(diǎn)：被隱藏的功能不容易被發(fā)現(xiàn)和使用。
使用場景：當(dāng)頁面功能較多，無法全部直接展示時(shí)，可以使用下拉菜單統(tǒng)一收納。
⑥ 宮格式導(dǎo)航
早期比較流行的主導(dǎo)航，現(xiàn)在是比較常用的局部導(dǎo)航。
圖11 宮格式導(dǎo)航
優(yōu)點(diǎn)：信息層級扁平，個(gè)數(shù)較少時(shí)，核心功能一目了然，用戶選擇成本低。
缺點(diǎn)：個(gè)數(shù)較多時(shí)視覺認(rèn)知成本、查找成本都很高，進(jìn)入功能后切換成本也高。
使用場景：平臺(tái)類產(chǎn)品的核心功能展示，或者普通產(chǎn)品的重要功能/運(yùn)營入口。
⑦ 列表式導(dǎo)航
對于主要以文本為載體的產(chǎn)品，采用列表式導(dǎo)航非常常見，比如短信、郵件、記事本、設(shè)置等。
圖12 列表式導(dǎo)航
優(yōu)點(diǎn)：有足夠的文本/圖標(biāo)顯示空間，可以顯示標(biāo)題和輔助文字，傳遞的信息內(nèi)容相對豐富、直觀，而且可以顯示多條內(nèi)容。
缺點(diǎn)：整體頁面信息會(huì)比較密集，頁面布局相對呆板，條目多時(shí)查找會(huì)比較困難。
使用場景：適用于展示多條以文本為主體的內(nèi)容。
⑧ 瀑布流導(dǎo)航
對于主要以圖片/視頻為載體的產(chǎn)品，采用瀑布流導(dǎo)航的非常常見，比如花瓣、點(diǎn)評、淘寶、bilibili 等。
圖13 瀑布流導(dǎo)航
優(yōu)點(diǎn)：能夠凸顯圖片的吸引力，讓用戶聚焦在圖片上，促進(jìn)內(nèi)容的轉(zhuǎn)化。同時(shí)可以承載無限多的內(nèi)容，自動(dòng)加載不翻頁，增強(qiáng)用戶瀏覽的沉浸感和效率。
缺點(diǎn)：屏幕空間占用較大，依賴于信息推薦的精準(zhǔn)度。
使用場景：適用于展示多條以圖片為主體的內(nèi)容。
⑨ 輪播式導(dǎo)航
當(dāng)產(chǎn)品/模塊提供的信息足夠簡單扁平，一屏即可顯示全部核心信息時(shí)，可以采用整屏輪播或區(qū)域輪播的導(dǎo)航形式。
圖14 輪播式導(dǎo)航
優(yōu)點(diǎn)：操作簡單，信息呈現(xiàn)直觀。
缺點(diǎn)：未輪播的信息曝光率和轉(zhuǎn)化率都比較低。
使用場景：簡單的小工具類產(chǎn)品可以整屏顯示核心信息。運(yùn)營廣告位可以區(qū)域輪播展示。
⑩ 沉浸式導(dǎo)航
在活動(dòng)類、游戲類產(chǎn)品中，常常采用沉浸式導(dǎo)航，增強(qiáng)用戶沉浸感。
圖15 沉浸式導(dǎo)航
優(yōu)點(diǎn)：導(dǎo)航與頁面融為一體，視覺感受沉浸，頁面更有吸引力。
缺點(diǎn)：用戶可能注意不到某些是內(nèi)容的元素，導(dǎo)致該元素的轉(zhuǎn)化率較低。
適用場景：活動(dòng)類、游戲類的產(chǎn)品中。
① 確認(rèn)信息結(jié)構(gòu)
導(dǎo)航設(shè)計(jì)是以信息結(jié)構(gòu)為基礎(chǔ)的，所以在進(jìn)行導(dǎo)航設(shè)計(jì)之前，我們需要將范圍層提供的所有信息進(jìn)行分析，刪減、分類、整理形成特定的信息結(jié)構(gòu)。
圖16 從信息到信息結(jié)構(gòu)
以微信的部分信息為例，我們將信息進(jìn)行分類、整理、命名形成了上述的組織系統(tǒng)，讓信息與信息之間的邏輯關(guān)系一目了然。
這里大家可以參考行業(yè)競品的信息架構(gòu)，結(jié)合自己對業(yè)務(wù)關(guān)系的理解，輔助以卡片分類的方式，整理出最適合的信息結(jié)構(gòu)。
PS：為了提升導(dǎo)航的易用性，建議的導(dǎo)航廣度最好不超過 5，深度不超過 3。這樣符合米勒定律，用戶的選擇壓力較小，也不容易迷失在較深的路徑中。（當(dāng)然這只是一個(gè)建議，優(yōu)先要保證的還是信息結(jié)構(gòu)的合理性，不能為了滿足上述建議而破壞信息之間本身的邏輯關(guān)系，時(shí)刻牢記認(rèn)知成本＞操作成本，不能為了減少操作成本而增加認(rèn)知成本）
② 選擇導(dǎo)航形式
根據(jù)信息結(jié)構(gòu)中主導(dǎo)航功能的個(gè)數(shù)，以及主導(dǎo)航功能之間的優(yōu)先級關(guān)系，再結(jié)合各導(dǎo)航的適用場景、個(gè)數(shù)限制、內(nèi)容豐富度、功能可見性、操作便捷性等，匹配合適的主導(dǎo)航、次級導(dǎo)航和局部導(dǎo)航形式。
圖17 導(dǎo)航總結(jié)
從現(xiàn)況來看，多數(shù)產(chǎn)品都愿意采用底 Tab 的主導(dǎo)航形式，因?yàn)榭梢云毓舛鄠€(gè)功能，用戶點(diǎn)擊操作方便，學(xué)習(xí)成本低，利于其他功能的轉(zhuǎn)化，后續(xù)拓展也比較方便（可以配合抽屜式導(dǎo)航、頂 Tab 導(dǎo)航，菜單式導(dǎo)航和局部導(dǎo)航混合使用）
③ 優(yōu)化導(dǎo)航路徑
信息結(jié)構(gòu)梳理了信息節(jié)點(diǎn)之間的邏輯關(guān)系，但用戶在真正使用產(chǎn)品時(shí)，有些子節(jié)點(diǎn)的功能/信息，其優(yōu)先級和頻率反而更高，為了讓用戶能夠方便快捷的使用這些子功能，還需要結(jié)合用戶的使用場景，在合適的場景下添加一些節(jié)點(diǎn)和路徑，以提升用戶操作的流暢性和效率。
圖18 組織系統(tǒng)和導(dǎo)航系統(tǒng)的關(guān)系
還是以微信的導(dǎo)航設(shè)計(jì)為例，因?yàn)樘砑雍糜眩瑨咭粧?、收付款功能重要性和使用頻率，微信特地在首頁增加了一個(gè)菜單導(dǎo)航，方便用戶能更快捷的觸達(dá)這些功能。
所以導(dǎo)航設(shè)計(jì)，不僅要正確的反映信息之間的結(jié)構(gòu)關(guān)系，選擇合適的導(dǎo)航形式，更重要的是根據(jù)用戶的目標(biāo)、認(rèn)知和習(xí)慣來組織導(dǎo)航節(jié)點(diǎn)，讓用戶可以很直觀的理解“我”在哪，“我”可以去哪？并通過最便捷的操作到達(dá)目的地。
作者：悅姐聊設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在選擇網(wǎng)頁設(shè)計(jì)尺寸時(shí)，我們并非只讓產(chǎn)品在部分設(shè)備上對訪問者保持可訪問性以及吸引力，而是希望他們無論使用什么設(shè)備都可以更好的進(jìn)行體驗(yàn)瀏覽。
在早期的設(shè)計(jì)中我們可能需要針對不同的分辨率輸出不一樣的設(shè)計(jì)稿，但現(xiàn)在大部分網(wǎng)站平臺(tái)都是響應(yīng)式，這意味著我們只需要做一個(gè)在不同設(shè)備上都兼容良好的設(shè)計(jì)即可。
因此我們可以得出B端Web設(shè)計(jì)中采用主流的最大寬度并非最佳選擇，而是要基于不同設(shè)備上的尺寸選擇最具合適的那個(gè)。
由于Web端分辨率太分散，我們只考慮占比最大的前幾個(gè)，根據(jù)百度流量學(xué)院里面有關(guān)PC端分辨率的占比，排名前三的是1920×1080、1440×900、1366×768。
這三個(gè)主流的尺寸在市場中總計(jì)占比70.38%，意味著這幾個(gè)分辨率的市場占有率體量巨大。它的背后說明了16:9的分辨率已經(jīng)逐漸的形成一定的規(guī)模和使用習(xí)慣，我們只需要按照當(dāng)下主流的分辨率進(jìn)行針對性的設(shè)計(jì)即可。
設(shè)計(jì)稿可在1920、1440以及1366這三個(gè)尺寸中進(jìn)行選擇。
為了更好的在不同的尺寸中都保持體驗(yàn)的一致性，兼容性原則作為我們選擇最主要的設(shè)計(jì)標(biāo)準(zhǔn)。
更直白點(diǎn)就是設(shè)計(jì)尺寸在放大或者縮小的情況下都可以減少因?yàn)榉直媛蕩淼牟町愋?。因此?440作為基礎(chǔ)的設(shè)計(jì)尺寸的話，向上或向下適配誤差會(huì)較小。
那么假設(shè)我們用1366的尺寸做設(shè)計(jì)稿適配到1920的界面上，界面看上去肯定會(huì)特別松散。反之，如果我們用1920的尺寸適配到1366上，界面又會(huì)顯得擁擠，甚至可能會(huì)出現(xiàn)錯(cuò)位，這個(gè)時(shí)候，就只剩下1440的尺寸最適合做設(shè)計(jì)稿。
設(shè)計(jì)分辨率的建立要優(yōu)先考慮目標(biāo)用戶主要使用的設(shè)備，以真實(shí)的用戶的應(yīng)用設(shè)備作為基準(zhǔn)。這個(gè)基準(zhǔn)以外的分辨率都是可以進(jìn)行次要考慮。
由于B端的業(yè)務(wù)屬性，它需要滿足更細(xì)分、特定的商業(yè)目標(biāo)受眾，我們對其進(jìn)行定制化需求設(shè)計(jì)。
通過前期調(diào)研，發(fā)現(xiàn)該集團(tuán)所有的操作電腦都是由企業(yè)統(tǒng)一派發(fā)的24寸、分辨率為1920×1080顯示器。那么我們在設(shè)計(jì)中只需要選擇該分尺寸即可，不需要考慮上下兼容的事。
同理，假如我們的目標(biāo)用戶都使用1366寬的商務(wù)筆記本，那么我們的設(shè)計(jì)尺寸則可以改為1366×768。
當(dāng)我們確定好設(shè)計(jì)尺寸是1440×900后，最好不要直接使用900作為基礎(chǔ)的設(shè)計(jì)高度，那么高度該如何定義呢。
這里我們不得不提首屏的概念，它指的是不滾動(dòng)web網(wǎng)頁屏幕的情況下就能被用戶看到的畫面。
根據(jù)尼爾森的可用性研究報(bào)告，首屏的關(guān)注度在80.3%，首屏以下的關(guān)注度僅有19.7%，這兩個(gè)數(shù)據(jù)足以表明每一個(gè)需要轉(zhuǎn)化率的網(wǎng)站首屏的重要性，因此我們需要掌握頁面高度，盡可能的把頁面中重要信息在首屏展示。
B端web界面的展示依托于瀏覽器，而瀏覽器除了主窗口顯示的頁面外，還包含了瀏覽器高度（頁簽欄、地址欄、書簽欄）、底部狀態(tài)欄。因此我們真實(shí)的設(shè)計(jì)高度=電腦分辨率-瀏覽器高度（130px左右）-底部狀態(tài)欄（30px左右），因此可以得出首屏高度≤740為安全區(qū)，我們在這個(gè)區(qū)域內(nèi)設(shè)計(jì)的話基本可以保證首屏的內(nèi)容的展示效率最高。
作者：江鳥的設(shè)計(jì)生活
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
間距指的是界面各元素彼此相隔的距離，可以是文字自身的行距、與圖片、與組件、與模塊的間距，或是界面兩側(cè)的安全距離（如網(wǎng)頁的寬度為1920px，內(nèi)容區(qū)為1400px，那么安全距離為兩側(cè)各260px）等。
作為UI設(shè)計(jì)師，在設(shè)計(jì)界面的每一個(gè)元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調(diào)整間距，利用各間距之間的規(guī)律來組織界面內(nèi)容，確保信息的節(jié)奏性，給用戶輕松、預(yù)約的瀏覽體驗(yàn)。
間距可以讓界面信息更有節(jié)奏，提升內(nèi)容的可讀性，還能通過不同的疏密程度來闡述各元素之間的關(guān)系，以吸引用戶的注意力，所以在控制界面間距時(shí)，一定要有“較真”的心態(tài)，任何一次的改動(dòng)與調(diào)整都要先考慮清楚為什么，能給產(chǎn)品和用戶帶來什么。要做好間距，不能僅停留在視覺層面，需要進(jìn)行多方面思考。
設(shè)計(jì)師層面：規(guī)范的定義間距，不必每個(gè)元素都去考慮間距的大小，有效減少?zèng)Q策和思考時(shí)間，提升效率。
開發(fā)層面：開發(fā)可以按照基礎(chǔ)間距去定義變量，長期如此，雖然不能煉成像素眼，但僅憑視覺也能看出間距的倍數(shù)。例如基礎(chǔ)間距以8px增量，在使用8px、16px、24px、32px、48px...等，開發(fā)直接使用基礎(chǔ)間距x1、x2、x3...，以此類推，在開發(fā)眼中，肉眼定然看不出1px的差別，但卻能區(qū)分出8px的差距，不必每次都去測量，還能減少誤差，高度還原設(shè)計(jì)效果。
用戶層面：有節(jié)奏且具備一致性美感的界面效果，信息的有效傳遞變的輕松，用戶體驗(yàn)?zāi)艿玫胶艽蟪潭鹊奶嵘?
設(shè)計(jì)規(guī)范的目的是提升設(shè)計(jì)師的工作效率、團(tuán)隊(duì)之間的高效溝通、讓設(shè)計(jì)風(fēng)格始終保持高度統(tǒng)一。同理，間距也是設(shè)計(jì)規(guī)范中非常重要的一環(huán)，它作為規(guī)范中的最小單元，如果沒有遵循統(tǒng)一，將會(huì)直接影響界面整體的版式和布局，信息的疏密程度嚴(yán)重影響用戶的瀏覽。不僅是設(shè)計(jì)師，開發(fā)每次面對同樣的模塊都需要定義不同的間距也是崩潰的，毫無規(guī)律可循。
統(tǒng)一的間距能讓界面的視覺效果更有節(jié)奏，設(shè)計(jì)師在設(shè)計(jì)某些相似的模塊時(shí)可直接復(fù)用組件，即便是多人共同完成同個(gè)項(xiàng)目或更換成員，也不會(huì)因間距不統(tǒng)一的問題造成整個(gè)APP的風(fēng)格混亂。
對開發(fā)來說，如果清楚間距的使用規(guī)律，即便有小的誤差，也能自行更正，例如使用8px增量，8、16、24...按倍數(shù)規(guī)律以此類推，若出現(xiàn)9的間距，開發(fā)會(huì)更正為8、15則會(huì)更正為16，自行多退少補(bǔ)，雖然設(shè)計(jì)師需要細(xì)心、盡量不出現(xiàn)這種小的出入，但任何事情都沒法做到絕對，統(tǒng)一的間距能讓減少設(shè)計(jì)的出入以及與設(shè)計(jì)師之間的頻繁溝通，能進(jìn)一步提高開發(fā)效率。
▲ 從上圖可以看出，間距不規(guī)范、信息就像一鍋粥，而規(guī)范的使用間距就能將信息自動(dòng)分組。
文字是UI設(shè)計(jì)中非常重要的信息元素，雖然大多數(shù)設(shè)計(jì)師對文字的屬性比較了解，但在真實(shí)設(shè)計(jì)中總會(huì)因其他信息的干擾不能合理運(yùn)用，與上線后的視覺效果預(yù)期相差甚大。文字的各種間距處理看似簡單，但實(shí)際上有很多因素要考慮，例如字間距、行高、段落等，下面帶大家一起了解。
字符間距一般都是設(shè)計(jì)工具的默認(rèn)數(shù)值，無需調(diào)整。當(dāng)碰到多行文字需要避開頭尾的標(biāo)點(diǎn)符號(hào)時(shí)，使用工具中的避頭尾功能即可自動(dòng)調(diào)整字間距，如無此功能，則需手動(dòng)調(diào)整，這里并沒有所謂的技巧與方法，頭尾避開標(biāo)點(diǎn)符號(hào)即可。
另外，在設(shè)計(jì)卡片、瓷片區(qū)的標(biāo)題時(shí)，有時(shí)需要通過調(diào)整字符間距來提升界面的舒適度，間距數(shù)值自行定義，但相同層級的內(nèi)容標(biāo)題字間距一定要保持一致。
行高是指上邊框+下邊框+字號(hào)的高度之和，這里主要針對多行文本。在平面設(shè)計(jì)中，行高沒有一定的標(biāo)準(zhǔn)，如無特別需要，使用系統(tǒng)默認(rèn)的行高即可。
在UI設(shè)計(jì)中，文字會(huì)有5～6個(gè)不同的等級，為便于用戶閱讀，一般會(huì)設(shè)定行高標(biāo)準(zhǔn)，尤其是新聞資訊類型的應(yīng)用本身就以文字內(nèi)容為主，不同的行高對文字的易讀性會(huì)產(chǎn)生較大的影響。
文字行高一般會(huì)設(shè)定為字號(hào)的1.2～1.5倍，具體值跟字號(hào)有很大關(guān)系，文字越小，行高就越大。例如，我們可以設(shè)定字號(hào)32px為中間值（非絕對），小于或等于32的字體、行高為字號(hào)的1.5倍，大于32的為1.2倍。另外，也可以直接將所有行高固定在字號(hào)的1.5倍，不難發(fā)現(xiàn)，字體越大其折行的概率就越低，試想一下，如果將48px的文字折成幾行，界面還能剩下多少空間？
文本段落間距的重要性在移動(dòng)UI界面中并不明顯，更多體現(xiàn)在網(wǎng)頁設(shè)計(jì)中。需要著重糾正一點(diǎn)的是，部分設(shè)計(jì)師在設(shè)置段間距時(shí)習(xí)慣性的多敲一次回車鍵，這種方式并不可取，會(huì)造成間距過大、內(nèi)容脫節(jié)。
如有需要，一定要手動(dòng)設(shè)置段間距，這里沒有固定的數(shù)值和規(guī)律，視覺舒適即可。筆者習(xí)慣將段間距設(shè)定為字號(hào)的0.5倍，例如字號(hào)為30、段間距為15，字號(hào)為40、段間距為20，僅供參考。
定義間距其實(shí)并沒有一個(gè)絕對的標(biāo)準(zhǔn)，主要取決于最小單位，例如4px、5px、6px、8px都是可以的，到底使用哪個(gè)數(shù)值還得根據(jù)產(chǎn)品自身定位及內(nèi)容組織形式，前提是所有間距都要遵循最小單位并基于倍數(shù)形成規(guī)律。
在設(shè)計(jì)界面時(shí)，需要利用間距來建立信息層級、提升瀏覽體驗(yàn)以及表達(dá)各元素之間的關(guān)系，這就是為什么當(dāng)我們打開新聞資訊、電商類應(yīng)用會(huì)發(fā)現(xiàn)信息非常緊湊，而打開工具、社交類應(yīng)用時(shí)感覺信息比較寬松。間距的基數(shù)越小、頁面就越細(xì)碎；基數(shù)越大、頁面的留白就越多，使用不同的基數(shù)，呈現(xiàn)出來的視覺效果也形態(tài)各異。
筆者在工作中通常以8px作為基數(shù)，以此衍生出8、16、24、32、48、64這6個(gè)間距數(shù)值，完全能夠滿足絕大多數(shù)的使用場景。當(dāng)然，針對信息較少的頁面也會(huì)使用到120、160、200...其他間距數(shù)值，例如缺省頁、登錄頁面等。不難看出，上述以8px為基數(shù)定義間距數(shù)值時(shí)，沒有40、56這兩個(gè)數(shù)值，難道他們不是8的倍數(shù)嗎？我們以8和16做對比，后者是前者的2倍，其間距的變化尤為明顯；但如果用56和64做對比，后者是前者的1.14倍，其間距的差別微乎其微。敲重點(diǎn)，設(shè)計(jì)師在定義間距時(shí)，需要遵循倍數(shù)規(guī)則，但同時(shí)也要為考慮界面美觀及用戶的瀏覽體驗(yàn)而跳出呆板的規(guī)則，當(dāng)間距數(shù)值越大時(shí)，根據(jù)基數(shù)所跳躍的倍數(shù)就越大，其實(shí)設(shè)定字號(hào)也是相同的邏輯（后期詳解）。
從信息層級角度來看，等級權(quán)重越高、間距就越大，在現(xiàn)實(shí)世界中也是如此，一個(gè)物體周圍的空間越大，就越容易吸引人們的注意力。
模塊間距分為塊內(nèi)間距（同一模塊中不同元素或信息組之間的距離）和塊外間距（同一個(gè)頁面中不同模塊的之間的距離），為了更好的區(qū)分信息層級，塊外間距一定會(huì)大于塊內(nèi)間距，也能保持塊內(nèi)信息的親密性。
如下圖所示，將裝修序列步驟、官方攻略、常用服務(wù)等看作不同的信息模塊，每個(gè)模塊內(nèi)元素的間距都會(huì)比各模塊之間的間距小很多。
需要通過各元素的間距來體現(xiàn)出信息的關(guān)聯(lián)性，格式塔原理中的“接近性”原則告訴我們，相互靠近的物體被認(rèn)為比相互距離較遠(yuǎn)的物體更有關(guān)聯(lián)性，因此，相關(guān)聯(lián)的元素之間靠的越近，用戶越能感知到信息的關(guān)聯(lián)，同時(shí)更能了解整個(gè)界面中各模塊信息的邏輯關(guān)系。
很多時(shí)候，想讓一個(gè)元素變的突出，可以用加大字號(hào)、修改色值或后加粗等方式進(jìn)行強(qiáng)調(diào)，但這并不是突出信息的唯一方式，當(dāng)所有元素都變的突出，那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出，留白也是一種強(qiáng)調(diào)信息的方式，它能引導(dǎo)用戶將注意力集中在特定的內(nèi)容上。
善用柵格系統(tǒng)（上述有詳細(xì)說明），通過最小間距值進(jìn)行遞增，讓整個(gè)界面看起來更協(xié)調(diào)。柵格系統(tǒng)可以讓設(shè)計(jì)師在元素的親疏關(guān)系上更快作出決策，后續(xù)不管是迭代還是更換設(shè)計(jì)成員，都能保持統(tǒng)計(jì)的間距規(guī)范。
這個(gè)問題在很多團(tuán)隊(duì)中都是硬傷，甚至在設(shè)計(jì)驗(yàn)收時(shí)還被直接忽略。在主流UI設(shè)計(jì)工具中，添加文本元素時(shí)，都會(huì)有默認(rèn)行高，在前面的內(nèi)容中有講過多行文本的行高為字號(hào)的1.2~1.5倍，那么單行文字的行高到底是需要手動(dòng)設(shè)置還是遵循默認(rèn)，筆者認(rèn)為都是可以的，但一定要與開發(fā)保持一致。
行高決定著文字邊緣與定界框的間距，而開發(fā)只能看到定界框與其他元素的間距。
1）默認(rèn)行高
默認(rèn)行高值會(huì)隨著字號(hào)的變化基于一定的倍數(shù)自動(dòng)增減，需要將此規(guī)律或倍數(shù)告知開發(fā)，開發(fā)將此規(guī)則植入代碼方能最大化還原設(shè)計(jì)效果。另外在設(shè)計(jì)界面時(shí)，尤其是多組文字元素的上下間距，需要通過計(jì)算（文字邊緣到定界框的間距+文字元素間距=實(shí)際間距）或手動(dòng)測量才能達(dá)到精準(zhǔn)狀態(tài)，下圖為例：
2）手動(dòng)設(shè)置行高
手動(dòng)設(shè)置即字號(hào)是多少、就將行高設(shè)置為多少，確保文字邊緣緊貼定界框，在設(shè)計(jì)過程中調(diào)整間距時(shí)，無需計(jì)算，根據(jù)設(shè)計(jì)工具的智能提示調(diào)整即可。
在同一APP應(yīng)用中，根據(jù)最小基數(shù)定義的間隔值數(shù)量不易過多，一般在6個(gè)左右就能滿足絕大多數(shù)的設(shè)計(jì)場景。例如以8px的基數(shù)為8、16、24、32、48、64等，以5px的基數(shù)為5、10、15、25、40、60等。數(shù)量過多會(huì)導(dǎo)致界面不同元素、模塊的間距差異化不夠明顯，數(shù)量太少無法滿足多元素、模塊使用場景，也會(huì)導(dǎo)致間距跨度較大。
設(shè)定間距值需遵循一個(gè)原則“數(shù)值越大、遞增的倍數(shù)就越大”。當(dāng)相鄰間距值的差異化較小時(shí)，用戶很難感知到界面中信息之間的邏輯關(guān)系，我們需要根據(jù)柵格系統(tǒng)中間距值的增大、設(shè)置更大的區(qū)間值，讓相鄰間距值之間的視覺差異更加明顯。
當(dāng)界面中的信息較為密集、間距不足以滿足信息的突出程度時(shí)，需跳出純粹的間距規(guī)范束縛，換種方式或許更好。例如：給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調(diào)整元素大小等，需知「此消彼長」的道理。
如果在處理界面信息層級時(shí)，改來改去還是覺得很亂，不防從間距角度出發(fā)，或許會(huì)有不一樣的收獲。雖然在剛開始的時(shí)候，規(guī)范間距帶來的效果甚微，但隨著團(tuán)隊(duì)規(guī)模不斷擴(kuò)大、界面數(shù)量越來越多、內(nèi)容越來越復(fù)雜時(shí)就會(huì)發(fā)現(xiàn)，所有內(nèi)容統(tǒng)一間距規(guī)范，不管是構(gòu)建一致性界面視覺效果、還是對開發(fā)和設(shè)計(jì)師來說，既能提升用戶體驗(yàn)、還能提高團(tuán)隊(duì)的工作效率。
間距是否規(guī)范使用，決定著界面是否規(guī)整、信息傳達(dá)是否清晰，即便如此，間距也只是解決信息層級方式的其中之一，切不可讓其限制設(shè)計(jì)師的發(fā)揮和思考空間。制定設(shè)計(jì)規(guī)范有助于項(xiàng)目的高效運(yùn)轉(zhuǎn)，間距也好、色彩也罷，設(shè)計(jì)師依然需要從實(shí)際用戶場景出發(fā)，通過不斷的思考和經(jīng)驗(yàn)總結(jié)，打磨出更合理、更符合項(xiàng)目需求的設(shè)計(jì)規(guī)范。
作者：大漠飛鷹CYSJ
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在設(shè)計(jì)一個(gè)產(chǎn)品的時(shí)候，我們要透過現(xiàn)象看本質(zhì)。
我們是為誰？解決什么問題？分析的結(jié)果將直接影響到方案的好壞。 這里推薦大家采用5W1H分析法，5W1H分析法也叫六何分析法，是一種思考方法，也可以說是一種場景創(chuàng)造分析法。
5W1H分析法包含如下幾個(gè)方面：
Why：為什么要做，是原因。
What：做什么、做成什么，是目標(biāo)。
Where：在哪兒做，是地點(diǎn)。
When：什么時(shí)候做，是時(shí)間。
Who：誰來做，是執(zhí)行對象。
How：怎么做，是方法。
通過上述分析我們可以（假設(shè)）知道：我們的用戶是技術(shù)人員、基層管理人員；做這個(gè)頁面的目的是為了讓用戶隨時(shí)掌握各項(xiàng)工作的進(jìn)展情況，快速進(jìn)入需要處理的工作事項(xiàng)。 根據(jù)結(jié)論可以得出工作臺(tái)是一個(gè)導(dǎo)航頁面或者綜合管理頁面，它是用戶感知產(chǎn)品價(jià)值的重要“門面”，使用者有一定的經(jīng)驗(yàn)，屬于高級用戶。從設(shè)計(jì)角度來看，首頁工作臺(tái)是整個(gè)系統(tǒng)規(guī)范與視覺風(fēng)格的核心場景。
主要是技術(shù)人員、基層管理人員
P0:各類數(shù)據(jù)指標(biāo)的匯總、我的動(dòng)態(tài)
p1:總量趨勢、數(shù)據(jù)排名、操作匯總
p2:分發(fā)匯總、待辦事項(xiàng)
重點(diǎn)突出、簡潔、清晰
下面這張圖是產(chǎn)品給的原型，也是B端面試題中經(jīng)常會(huì)遇到的題目。如果你打算就按照產(chǎn)品給的原型直接做美化，那估計(jì)很難被選中。
做需求分析的目的之一就是為了做信息處理，這里要提到一個(gè)詞叫“屏效”。B端產(chǎn)品我們都知道，目的是“降本增效”，在合理的信息布局下盡量利用交互等手段讓頁面縮短。
比如：上面原型中有兩個(gè)top10排名，如果一行展示會(huì)比較擁擠，也體現(xiàn)不了top10排名?？紤]“易讀性”我們會(huì)放兩行，但這樣又占據(jù)了屏幕空間，在與產(chǎn)品溝通后我們把它整合到一起，利用按鈕組切換進(jìn)行查看。同時(shí)排名也是業(yè)務(wù)人員需要關(guān)注的，所以我們把它們往上放。
頂部個(gè)人信息內(nèi)容比較少，也沒必要占一整行，我們把它移到右邊；各類指標(biāo)因前3個(gè)是不能點(diǎn)擊的，為了和后面可點(diǎn)擊按鈕做區(qū)分，我們整合到一個(gè)卡片上；待辦事項(xiàng)與產(chǎn)品溝通后說不太重要，移動(dòng)到了最下面，操作匯總模塊往上移；
到這里模塊之間的信息優(yōu)先級基本處理完成，下面就要對單個(gè)模塊進(jìn)行拆解處理。
首先我們要觀察哪個(gè)是：重要信息、次要信息、輔助信息，上面我們提到了“效率”，把重要信息突出顯示，就是為了讓用戶一眼就能看清，不需要去尋找或被次要信息干擾。
最后一個(gè)模塊原型上只有一個(gè)標(biāo)題，這真是驗(yàn)證了一句話：“巧婦難為無米之炊”，所以又去找產(chǎn)品溝通，為什么單個(gè)模型可以點(diǎn)擊查看更多？用戶在這個(gè)地方想要獲取什么樣的數(shù)據(jù)？
經(jīng)過一番溝通，拿到了一些“米”，巧婦終于可以干活了。為了體現(xiàn)“易發(fā)現(xiàn)性”，我們在后面這個(gè)模塊上加了一個(gè)詳情按鈕。
其實(shí)上面的圖是我處理過的，產(chǎn)品的原型可不長這個(gè)樣子，模塊大小、間距都是隨便給的。你如果也按照產(chǎn)品給的原型模塊大小做，估計(jì)研發(fā)會(huì)“罵娘”，因?yàn)檫@樣沒法按照比例進(jìn)行換算，也就沒法做自適應(yīng)。
這一步主要就是做柵格化處理，我們需要定義每個(gè)模塊的占比與間距。B端產(chǎn)品通常選用24柵格布局，也就是24欄+23水槽+2頁邊距。
我遇到的工作臺(tái)頁面有兩種，一種是帶左側(cè)樹，一種是不帶，這兩種對應(yīng)的柵格化數(shù)值不太一樣。 按照目前常用的尺寸1440*900來計(jì)算：不帶左側(cè)樹我采用的是1440=2*20+43*24+16*23。
如果大家做的是帶左側(cè)樹，可以參考下圖數(shù)據(jù)
重點(diǎn)來了，我個(gè)人覺得這一節(jié)才是工作臺(tái)、數(shù)據(jù)分析頁面的核心，但很多人都忽略了，覺得不就是幾個(gè)圖表，唰唰唰一下就搞定了......
上面我們提到過B端測試題給的都是原始數(shù)據(jù)（表格），需要設(shè)計(jì)師自己根據(jù)數(shù)據(jù)找合適的可視化圖形進(jìn)行展示。
如果你對可視化圖表不熟悉，不知道什么時(shí)候該用柱圖、折線圖、餅圖；不知道隨時(shí)間變化該用什么圖形；不知道體現(xiàn)排名的數(shù)據(jù)該用什么圖形。那你很難輸出一份有理有據(jù)的作品。
因圖表類型太多，詳細(xì)的留到后面文章討論，這次只對原型中使用的到圖表進(jìn)行分析：
柱狀圖是常用的數(shù)據(jù)可視化圖形之一，可用于隨時(shí)間變化而產(chǎn)生變量的數(shù)據(jù)統(tǒng)計(jì)，也可用于數(shù)據(jù)類別的對比、排名。
如圖，柱狀圖能展示知乎文章觀看者地域分布，也能反應(yīng)出不同時(shí)間段的情況，并通過圖形能夠快速了解 分布最多和最少的省份。
優(yōu)點(diǎn)：
人眼對長短（高度）比較敏感，可以直觀體現(xiàn)數(shù)據(jù)差異性。
缺陷：
分類過多時(shí)數(shù)據(jù)的展示效果會(huì)降低。
能把圖形視覺與體驗(yàn)都兼顧好，才能體現(xiàn)設(shè)計(jì)師的價(jià)值。 設(shè)計(jì)師的能力不僅體現(xiàn)在技法上，更多的是體現(xiàn)在思考能力上。圖形擴(kuò)展性設(shè)計(jì)和創(chuàng)新性設(shè)計(jì)都需要設(shè)計(jì)師做縝密的思考，只有這樣才會(huì)有出彩的設(shè)計(jì)結(jié)果。
信息層級：
視覺展示：
2個(gè)人站在一起我們除了對比高度、顏值，還有會(huì)對比胖廋。那么，柱狀體的粗細(xì)和間距如何定義呢？ 在圖中，中間柱狀圖的柱子間距過于疏散沒有規(guī)律；右邊圖中的柱子間距又過小，視覺上顯得擁擠，并且當(dāng)分類過多時(shí)，過小的間距會(huì)導(dǎo)致柱狀體之間沒有獨(dú)立性，不易閱讀。
定義柱狀體的間距可以用5分原則設(shè)計(jì)法，即柱子之間的間距為N，左右兩邊與柱子之間的距離就是2/N。 如圖所示。這也是很多界面設(shè)計(jì)中常用的技法，其原理就是接近黃金比例，視覺上較為舒適。同時(shí)，在保證界面元素整體協(xié)調(diào)性的情況下，盡可能把柱子的寬度設(shè)計(jì)成N，這樣視覺上最為協(xié)調(diào)。
另外，在設(shè)計(jì)圖形前，設(shè)計(jì)師最好能了解到真實(shí)數(shù)據(jù)，這樣才能結(jié)合真實(shí)的數(shù)據(jù)來設(shè)計(jì)圖形，盡可能還原落地后的樣子。在圖中，圖形的設(shè)計(jì)和落地后的樣子存在較大的差異。問題就出在設(shè)計(jì)前設(shè)計(jì)師沒有了解數(shù)據(jù)的真實(shí)情況，前端工程師按照設(shè)計(jì)圖把X軸的數(shù)值固定了。
相似圖表：
堆積柱狀圖：堆積柱狀圖可以展示兩個(gè)或多個(gè)數(shù)據(jù)的變化，以及數(shù)據(jù)之間的綜合比較情況。
分組柱狀圖：分組柱狀圖可以在同一數(shù)軸上展示各個(gè)分類下的不同分組數(shù)據(jù)。
有序柱狀圖：與有序條形圖一樣，有序柱狀圖也能呈現(xiàn)數(shù)據(jù)的排名情況。
折線圖常用于表示一個(gè)連續(xù)時(shí)間段內(nèi)數(shù)據(jù)的變化趨勢，主要功能是能夠清晰地反映出數(shù)據(jù)隨時(shí)間變化的趨勢。
如圖，折線圖不僅能展示不同月份的價(jià)格趨勢，還能清晰呈現(xiàn)數(shù)據(jù)的峰值和低谷。折線圖也可以是多條線，用來分析多組數(shù)據(jù)隨時(shí)間變化的趨勢及數(shù)據(jù)間的趨勢比較。
優(yōu)點(diǎn)：
直觀反映數(shù)據(jù)變化趨勢
缺陷：
無序的類別無法展示數(shù)據(jù)特點(diǎn)。
折線圖可以用于展示數(shù)據(jù)的趨勢變化，通過折線的起伏波動(dòng)可以幫助人們探究數(shù)據(jù)背后的邏輯。但如果折線圖的設(shè)計(jì)不夠合理，在視覺上會(huì)讓人產(chǎn)生錯(cuò)誤的認(rèn)知。在圖中，有的折線圖的刻度值設(shè)置不合理，如中間折線圖的刻度值未從0開始，導(dǎo)致折線的呈現(xiàn)夸大；右邊折線圖的刻度值過高，趨勢變化呈現(xiàn)過于平緩，這些都是在不客觀地表達(dá)數(shù)據(jù)。正確的方式應(yīng)該是刻度值從0開始，隨著數(shù)據(jù)的增減，刻度值也做相應(yīng)的變化。
視覺展示：
在折線圖設(shè)計(jì)中，還需要注意折線的粗細(xì)要適中。在圖中，其中一條折線過細(xì)，這會(huì)降低數(shù)據(jù)可視化的表現(xiàn)；另一條過粗，就會(huì)損失折線中的數(shù)據(jù)波動(dòng)細(xì)節(jié)。在產(chǎn)品的圖形設(shè)計(jì)中，一般網(wǎng)格線和起始線都是1像素，折線一般用2像素，這樣的粗細(xì)會(huì)有較好的視覺表現(xiàn)。
相似圖表：
階梯線圖：線在數(shù)據(jù)點(diǎn)之間形成一系列步驟。
面積圖：與折線圖唯一不同的是，其自變量數(shù)據(jù)和坐標(biāo)軸之間有顏色填充，這樣能更加突出數(shù)據(jù)的趨勢變化。
提到數(shù)據(jù)的占比，相信你第一個(gè)就會(huì)想到餅圖，主要用來展示數(shù)據(jù)分布情況。 餅圖是展示占比數(shù)據(jù)最直觀的圖形，通過弧度大小來表示分類的占比多少。但餅圖有一定的局限性，當(dāng)占比數(shù)值接近或占比分類過多時(shí)，在視覺上就不容易辨別各個(gè)類別占比的大小。在數(shù)據(jù)可視化產(chǎn)品中，因?yàn)轱瀳D是大面積的色塊，視覺上會(huì)非常突顯，很容易搶走重要數(shù)據(jù)的風(fēng)頭，所以使用時(shí)要酌情考慮。
優(yōu)點(diǎn)：
直觀顯示各項(xiàng)占總體的占比，分布情況，強(qiáng)調(diào)整體與個(gè)體間的比較。
缺陷：
分類過多，則扇形越小，無法展現(xiàn)圖表。
每個(gè)圖形都有自己的設(shè)計(jì)規(guī)范，如當(dāng)餅圖分類過多時(shí)，一般不把文字放在圖形元素上，因?yàn)橐坏┏霈F(xiàn)幾個(gè)相對較小的占比數(shù)據(jù)，字就很容易溢出，不容易辨別指向的分類，如圖中的右圖所示。好的解決方案就是，在圖形的外圍用引線指出分類數(shù)據(jù)，或者加示例圖展示。
視覺展示：
另外，餅圖的分類最好從12點(diǎn)鐘的位置開始，這樣較為符合人的閱讀習(xí)慣，即從上到下、從左到右，如圖中。如果餅圖隨意從不同位置開始展示，就會(huì)缺少規(guī)范，這樣當(dāng)多個(gè)餅圖同時(shí)展示時(shí)容易出現(xiàn)混亂。
同時(shí)，在餅圖的分類中如果沒帶排序，如1月、2月……，那么占比最好能夠從大到小依次排列，這樣還能直觀地呈現(xiàn)出分類的排名情況。任何時(shí)候，如果有“其他”這項(xiàng)分類，無論其占比多少都要放在最后，因?yàn)槠鋽?shù)據(jù)通常是最不被關(guān)注的數(shù)據(jù)。
相似圖表：
嵌套圈餅圖：用于一個(gè)指標(biāo)在不同維度的占比。
跑道圖：看到占比的同時(shí)，可以直觀看到指標(biāo)在當(dāng)前維度下的排名情況。
表格看起來簡單，但想設(shè)計(jì)好也不是一件容易事。通常我們見到的（產(chǎn)品中）表格都屬于比較簡單的表格。
在BI系統(tǒng)中有一些復(fù)雜的表報(bào)，如果直接用組件信息會(huì)很難閱讀。我們需要對表格的視覺進(jìn)行調(diào)整，讓信息獲取更高效，這就需要一些設(shè)計(jì)技巧和原則。
而圖中（上圖）的項(xiàng)目名稱長短不一，居中對齊在視覺上會(huì)使切入點(diǎn)呈現(xiàn)“Z”字形，影響閱讀效率。左對齊可以使線性結(jié)構(gòu)在視覺上不跳躍，閱讀流暢且更具美感。表格中的數(shù)字需要右對齊，因?yàn)楫?dāng)我們在面對一個(gè)長數(shù)字時(shí)，一般會(huì)從右往左讀。比如數(shù)字￥368,568,023.00，我們一般是從個(gè)位到最后的千萬位順序識(shí)別數(shù)字體量，有的人可以通過千分符迅速判斷數(shù)字的體量，但其實(shí)也是從右到左的瀏覽順序，因此數(shù)字右對齊最符合人的閱讀方式。
在圖中（下圖），讓我們感受一下數(shù)字左對齊、居中對齊、右對齊的閱讀效率，以及對各個(gè)數(shù)據(jù)體量的對比感知。
文字左對齊和數(shù)字右對齊，針對的是長短不一的名稱和大體量的數(shù)字，而對于文字?jǐn)?shù)量一樣、體量較小的數(shù)字也可以嘗試用居中對齊的方式，對稱的元素本身就具有美感。如圖所示，通過對表格中的文字和數(shù)字的重新排版，相信在閱讀效率上會(huì)有較大的提高。雖然提高了閱讀效率，但這相比優(yōu)秀的表格設(shè)計(jì)還差得很遠(yuǎn)，其中最明顯的是表格的邊框在視覺上過于突出，接下來我們繼續(xù)調(diào)整。
如圖（下圖）所示，通過弱化邊框在視覺上能夠突出表格的內(nèi)容。表格邊框可以讓信息的呈現(xiàn)更有條理，能夠提高易讀性，但在視覺層級上不能高于內(nèi)容信息。
將表格的邊框與分割線去掉，用留白分隔內(nèi)容，無框勝有框，增大留白可以使表格更有空間感。這樣的設(shè)計(jì)需要注意的是，元素的間隔不能太小，不然會(huì)顯得擁擠。由于去掉邊框后有些問題會(huì)被放大，比如標(biāo)題與內(nèi)容沒有對比，因此需要增強(qiáng)對比，在整體上要有層次。
圖中的表格加強(qiáng)了標(biāo)題，這樣看起來更有層次。強(qiáng)調(diào)標(biāo)題的方法有很多種，不一定只是加粗字體或加大字號(hào)，還可以給標(biāo)題欄添加背景，以形成對比。
如果在一組數(shù)據(jù)中有重要數(shù)據(jù)和次要數(shù)據(jù)之分，那么就需要在對重要數(shù)據(jù)的設(shè)計(jì)上著重突出，表格的設(shè)計(jì)同樣如此。圖中所示就是把重要的數(shù)據(jù)信息通過增加背景色與其他元素形成較為突出的對比，這種設(shè)計(jì)是一種為用戶做選擇的設(shè)計(jì)方法，容易讓用戶的視覺停留在他本想重點(diǎn)關(guān)注的地方。
由于人們常常會(huì)對熟悉的事物產(chǎn)生審美疲勞，因此設(shè)計(jì)中有創(chuàng)新才容易給人眼前一亮的感覺。
下圖在背景上面給了一根橫線，來凸顯這一列的數(shù)據(jù)，這樣除了可以加強(qiáng)信息傳達(dá)也可以打破常規(guī)的表格樣式（這里只是提供一種思路）。
表格數(shù)字最容易出問題的是數(shù)字字體的運(yùn)用，因?yàn)楹芏鄶?shù)字字體不是等距設(shè)計(jì)，比如數(shù)字“1”所占的字間距面積要小于“8”的。如果遇到一組大量級的數(shù)字，就有可能會(huì)誤導(dǎo)觀者。
如下圖所示，本來32,118,116,00大于28,558,363,00，但由于不同數(shù)字所占寬度不一樣，這樣的設(shè)計(jì)在視覺上容易誤導(dǎo)用戶。因此，表格中的數(shù)字要使用表格字體，因?yàn)楸砀褡煮w每個(gè)數(shù)字所占面積一致，這樣就不會(huì)出現(xiàn)案例中的問題了。
其實(shí)很多表格里面的數(shù)字字體都存在類似問題。下圖是修改數(shù)字字體后的設(shè)計(jì)，這樣就能客觀地呈現(xiàn)數(shù)據(jù)了。
表格中常用的字體有Roboto、DIN、微軟雅黑、思源黑體、宋體、蘋方字體等。
四、視覺設(shè)計(jì)
參考631配色法
對有含義的顏色要謹(jǐn)慎使用，例如：紅、黃、綠
常用的圖標(biāo)分為兩類：
工具圖標(biāo)：包含一定產(chǎn)品功能隱喻的簡化抽象圖形，代替文字節(jié)省界面空間，方便用戶理解，常用于b端產(chǎn)品里面。
如圖，里面來自不同產(chǎn)品的圖標(biāo)，雖然表現(xiàn)形式不太一樣，風(fēng)格不太一樣，但都是為了體現(xiàn)圖標(biāo)后面文字的意思。
裝飾圖標(biāo)：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于產(chǎn)品宣傳、活動(dòng)等頁面。 如圖，云計(jì)算、大數(shù)據(jù)相關(guān)的產(chǎn)品，語義都比較復(fù)雜，很難通過圖標(biāo)去表達(dá)，既然看不懂，就抽象點(diǎn)。
在 B 端產(chǎn)品中，應(yīng)用最廣泛的還是工具圖標(biāo)。 可能有人覺得工具類圖標(biāo)太簡單了，它是看起來簡單，想做好一點(diǎn)都不容易。
首先要保證“一致性”， 粗細(xì)一致、圓角一致、透視一致、大小一致，同時(shí)還要把語義用圖形表達(dá)出來。
一般采用8的倍數(shù)：8、16、24、32、40、48、...
12px、14px、16px、20px、24px，可采用“回退機(jī)制”
作者：夜鶯YEAH
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
根據(jù)公司結(jié)構(gòu)和職能角色的需求不同，用研中部分是行為觀察，部分是商業(yè)戰(zhàn)略，部分是心理學(xué)，部分是數(shù)據(jù)分析，部分是設(shè)計(jì)，部分是團(tuán)隊(duì)促進(jìn)。用研可以有不同的風(fēng)格，因此可以在行業(yè)范圍內(nèi)四處移換位置。根據(jù)公司規(guī)模和類型的不同，我見過很多用研團(tuán)隊(duì)變成設(shè)計(jì)部門的一部分，有些則變成營銷部門的一部分，還有一些則在產(chǎn)品管理部門——最終在哪都根據(jù)公司的規(guī)模和類型來決定。在我任職期間的某個(gè)時(shí)候，我自己的團(tuán)隊(duì)已經(jīng)集結(jié)到了之前提到的各個(gè)部門。
所以...有沒有一個(gè)部門可以更加適合配備用研部門，讓用研更加成功且具有影響力呢? 這是我想找到的答案。
...
用研部門應(yīng)該存在于...
...在設(shè)計(jì)團(tuán)隊(duì)？
攝影：Harpal Singh 于 Unsplash
優(yōu)勢：
研究與設(shè)計(jì)交織在一起：用研已經(jīng)成為許多用戶體驗(yàn)設(shè)計(jì)師工作職位描述中的一部分，而用研的核心就是指導(dǎo)設(shè)計(jì)。研究結(jié)果可以指導(dǎo)交互行為，并且它從一開始就已經(jīng)嵌入了設(shè)計(jì)過程里。如果一個(gè)設(shè)計(jì)團(tuán)隊(duì)有專門設(shè)立研究部門，會(huì)讓這個(gè)團(tuán)隊(duì)變成一個(gè)強(qiáng)大的聯(lián)盟。讓更大的設(shè)計(jì)團(tuán)隊(duì)統(tǒng)一研究整體用戶策略，會(huì)讓之后的調(diào)研和設(shè)計(jì)過程更加整體和完善。同樣，設(shè)計(jì)師也有想改善用戶體驗(yàn)的眾多想法，并且通常很高興能看到用戶和他們的想法進(jìn)行交流。這直接與這些創(chuàng)造用戶體驗(yàn)改善的設(shè)計(jì)師們，促成了一個(gè)強(qiáng)有力的文化測試、迭代、再測試的過程。由于設(shè)計(jì)與用研的過程是結(jié)合在一起的，因此可以立刻將這些用戶洞察應(yīng)用到設(shè)計(jì)中去。
類似的工作流程：用研的工作流程與傳統(tǒng)的設(shè)計(jì)流程十分相似。設(shè)計(jì)領(lǐng)導(dǎo)者可以無縫地理解研究的各個(gè)階段：復(fù)查現(xiàn)有的數(shù)據(jù)，引導(dǎo)生產(chǎn)性研究，匯編各種信息從而尋找新的模式，創(chuàng)建一份報(bào)告，陳述研究結(jié)果，在上線后測試等等。同時(shí)，從設(shè)計(jì)概念開始，征求意見、進(jìn)行測試比較設(shè)計(jì)方案的好壞、迭代設(shè)計(jì)、產(chǎn)出最終的版本、呈現(xiàn)并且在上線之后進(jìn)行迭代。設(shè)計(jì)和用研通常希望攜手合作，共同努力改善數(shù)字化體驗(yàn)。
劣勢：
設(shè)計(jì)≠用研：不是所有的設(shè)計(jì)師都會(huì)進(jìn)行研究，要么是因?yàn)樗麄儧]有時(shí)間，要么是因?yàn)樗麄儧]有接受過理解研究方法的訓(xùn)練。（相反，也不是所有的研究人員都是設(shè)計(jì)師）通常，公司會(huì)安排設(shè)計(jì)師同時(shí)做研究員的工作，反之亦然。這對最終實(shí)現(xiàn)的產(chǎn)品來說可能是災(zāi)難性的。尤其是在較小的公司中，設(shè)計(jì)師需要扮演很多職能。這意味著他們“有時(shí)候“有時(shí)間能親自調(diào)研。不幸的是，在設(shè)計(jì)和用研沒有明確定義的前提下，這意味著雇傭部門和領(lǐng)導(dǎo)團(tuán)隊(duì)認(rèn)為這兩者是可以互換的 (注意: 這并不意味著某些設(shè)計(jì)師沒有資格，只是“視覺設(shè)計(jì)師 / 平面設(shè)計(jì)師”、“UI設(shè)計(jì)師”和“UX設(shè)計(jì)師”的技能組合是有區(qū)別的，但我不會(huì)在這里討論這些!)
用戶需求可能會(huì)被遺忘: 有時(shí)候，一個(gè)設(shè)計(jì)規(guī)劃圖會(huì)被過分熱烈的創(chuàng)造性驅(qū)動(dòng)從而創(chuàng)建，而不是來自于數(shù)據(jù)或研究。很多時(shí)候，創(chuàng)意人員會(huì)對他們喜歡的新想法產(chǎn)生依戀，即使它并非源于用戶需要的東西(有時(shí)候我們都會(huì)為此感到內(nèi)疚)。不幸的是，這意味著研究可能是事后的想法，更經(jīng)常地被作為驗(yàn)證工具而使用，而不是在產(chǎn)品生命周期中預(yù)先定義需求。這對于用研來說可能成為難以克服的一個(gè)障礙，特別是如果設(shè)計(jì)概念與利益攸關(guān)方或決策者領(lǐng)導(dǎo)人一起審查，他們喜歡并認(rèn)為這是一個(gè)“ 可以去做的設(shè)計(jì)”。這意味著研究的機(jī)會(huì)很有可能喪失。
...在市場運(yùn)營團(tuán)隊(duì)？
攝影：Carlos Muza 于 Unsplash
優(yōu)勢：
相似的技能組合:市場研究和 UX / 產(chǎn)品的研究在他們特定的核心研究中，共享相似的過程和研究方法。在社會(huì)心理學(xué)、市場營銷學(xué)、人類學(xué)、人的因素、運(yùn)作和設(shè)計(jì)等許多領(lǐng)域進(jìn)行 “人的研究” 所使用的工具包非常相似：定量方法，如大樣本調(diào)查和分析；定性方法，如面對面的觀察，焦點(diǎn)小組，適度的訪談，日記研究以及其他。每個(gè)領(lǐng)域的方法都需要研究設(shè)計(jì)、用戶招募和研究分析。對于市場團(tuán)隊(duì)來說，這是一個(gè)非常熟悉的世界，作為 用研 流動(dòng)到這個(gè)部門意味著領(lǐng)導(dǎo)者可能會(huì)對你的角色需求有一個(gè)徹底的了解。
共同的目標(biāo)是了解用戶: 市場團(tuán)隊(duì)也將是你的擁護(hù)者。無論如何，源自于產(chǎn)品和設(shè)計(jì)的用戶研究的洞察力，為市場部門關(guān)注的許多舉措增添了直接價(jià)值。透過略微不同的角度來看，市場營銷和用戶體驗(yàn)有著相似的目標(biāo)(理解客戶) 。盡管如此，當(dāng)團(tuán)隊(duì)協(xié)作并共享信息，在以業(yè)務(wù)或用戶為中心的舉措之間建立平衡時(shí)，用研結(jié)果還是能夠幫助我們進(jìn)行決策。
劣勢：
商業(yè)需求可能與用戶需求相反:如果組成“聚焦點(diǎn)”的事物變化太大，那么這個(gè)”聚焦點(diǎn)“既可以將市場營銷與用戶體驗(yàn)結(jié)合起來，也可以將它們分開。當(dāng)業(yè)務(wù)需求與用戶需求相矛盾時(shí)，可能會(huì)產(chǎn)生摩擦。如果市場部門的領(lǐng)導(dǎo)層將眼前的業(yè)務(wù)優(yōu)先級置于用戶研究之上，那么獲取工具和客戶的途徑就可能受到限制。在一天結(jié)束的時(shí)候，市場團(tuán)隊(duì)關(guān)注創(chuàng)收，即使這對用戶來說不是最好的體驗(yàn)(比如在某個(gè)地方放置廣告，可能會(huì)干擾網(wǎng)頁，以確保用戶看到它) ; 而用研團(tuán)隊(duì)關(guān)注什么是對用戶體驗(yàn)最好的(比如在頁面上放置一個(gè)廣告，使其不會(huì)干擾用戶的任務(wù)，冒著用戶看不到并參與其中的風(fēng)險(xiǎn))。
用研 ≠ 市場研究: 有時(shí)候，流動(dòng)到市場部門意味著其他人將 用研視作為市場研究的延伸。由于這一點(diǎn)，一些項(xiàng)目有可能被認(rèn)為應(yīng)該由市場專家處理，而不是用戶體驗(yàn)專家。例如，營銷活動(dòng)的目標(biāo)可能是“我們?nèi)绾巫層脩羰褂眠@次促銷活動(dòng)” ？另一方面，用研 可能會(huì)強(qiáng)調(diào)用戶的需求，比如“用戶希望如何獲得有關(guān)促銷活動(dòng)的通知” ？這種情況（關(guān)注點(diǎn)的轉(zhuǎn)移）并不可能經(jīng)常出現(xiàn)在市場部的議程表上。
...在產(chǎn)品管理團(tuán)隊(duì)？
攝影：Marvin Meyer 于 Unsplash
優(yōu)勢：
為產(chǎn)品使用路徑圖研究分配時(shí)間:通過將 用研 嵌入到產(chǎn)品管理團(tuán)隊(duì)中，研究有機(jī)會(huì)通過在產(chǎn)品路徑圖中劃出其應(yīng)有的空間和時(shí)間來充分發(fā)揮其潛力。通過讓 用研 和產(chǎn)品經(jīng)理向同一個(gè)領(lǐng)導(dǎo)層匯報(bào)，這意味著目標(biāo)和優(yōu)先級可以被共享，并且在同一時(shí)間被一起審查。這可能是一個(gè)有效的工作方式，特別是當(dāng)你與產(chǎn)品經(jīng)理一起工作的項(xiàng)目，他們知道如何使他們的產(chǎn)品更直觀地呈現(xiàn)給用戶。用研的產(chǎn)品管理為定義實(shí)際產(chǎn)品需求創(chuàng)建了一種更加無縫的方法。這意味著路線規(guī)劃圖中留出了時(shí)間，在積壓成定局之前走出去，獲得用戶見解。這告知了大家需要開發(fā)的功能的優(yōu)先級，并在完成設(shè)計(jì)之前，就形成產(chǎn)品了本身的特性。當(dāng) 用研 與產(chǎn)品經(jīng)理的目標(biāo)緊密相連時(shí)，每個(gè)注入了用戶見解的產(chǎn)品階段都變得更加容易(因?yàn)樗鼞?yīng)該是在一個(gè)理想的世界中!)
更容易地與決策者進(jìn)行知識(shí)交換:將產(chǎn)品經(jīng)理的內(nèi)部結(jié)構(gòu)與 用研 的內(nèi)部結(jié)構(gòu)相結(jié)合，也意味著他們可以獲得更多用戶關(guān)于他們的體驗(yàn)的言論，從而形成定期更新，并且可以更容易地進(jìn)入用戶途徑。用研經(jīng)常關(guān)注復(fù)查定性趨勢的反饋(比如 Qualtrics 或者 Medallia 系統(tǒng))（在線調(diào)查或客戶體驗(yàn)管理系統(tǒng)），這意味著產(chǎn)品經(jīng)理聽到這些趨勢的機(jī)會(huì)變得更加頻繁。產(chǎn)品經(jīng)理一般來說應(yīng)該對他們的用戶群有深刻的理解，但是他們通常很難在傾聽用戶的基礎(chǔ)上來保持沖刺、業(yè)務(wù)分析、 KPI 和產(chǎn)品路線圖規(guī)劃。因?yàn)閳F(tuán)隊(duì)會(huì)議中現(xiàn)在有一個(gè)指定的用戶代言人一直在場，這就是為什么與 用研 如此緊密地聯(lián)系在一起對產(chǎn)品經(jīng)理來說是有益的。參加這些會(huì)議使得 用研 有機(jī)會(huì)直接與那些最需要了解用戶需求的人進(jìn)行自發(fā)的對話。加入同一個(gè)團(tuán)隊(duì)可以使這些溝通渠道更加開放，并且可以更加頻繁地了解用戶對產(chǎn)品經(jīng)理的需求。
劣勢：
研究的優(yōu)先級可能會(huì)降低:不幸的是，轉(zhuǎn)到產(chǎn)品管理團(tuán)隊(duì)意味著有時(shí)研究的優(yōu)先級會(huì)降低。當(dāng)利益相關(guān)者對產(chǎn)品交付施加壓力時(shí)，這通常意味著產(chǎn)品需要盡快推出。然之后，產(chǎn)品經(jīng)理必須專注于發(fā)布他們產(chǎn)品路線圖規(guī)劃上的項(xiàng)目，并在時(shí)間表和開發(fā)周期內(nèi)實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。為了滿足這些時(shí)間要求，盡快交付某些東西成為更緊迫的目標(biāo)，而不是交付一個(gè)經(jīng)過研究和磨練的產(chǎn)品(這需要更多的時(shí)間)。
更多的評估而不是生產(chǎn)性研究: 把用研流動(dòng)這個(gè)部門可能意味著這項(xiàng)研究變得更加可評估(或者驗(yàn)證、可用性和迭代測試) ，而不是生產(chǎn)性(或者理解需求、價(jià)值和概念發(fā)現(xiàn)或開發(fā)的測試) ，就像在設(shè)計(jì)團(tuán)隊(duì)下可以做的那樣。這不是一件壞事，而只是需要牢記在心，以便作為一個(gè)用戶倡導(dǎo)者，用研 的工作可以更直言不諱地說，需要留出時(shí)間來做更深入、生產(chǎn)性的工作，從長遠(yuǎn)來看而不是短期內(nèi)為產(chǎn)品提供信息。提前了解這個(gè)可能的障礙意味著用研可以更好地裝備自己的 ROI（投資回報(bào)率）影響，以便為更深入的研究騰出時(shí)間。
...在自己獨(dú)立的部門？
攝影：José Alejandro Cuffia 于 Unsplash
注意: 我還沒有在一個(gè)獨(dú)立的，指定的 UX 研究部門作為一個(gè) UX 研究員的工作經(jīng)驗(yàn)。我只能推測將一個(gè)獨(dú)立的 用研 團(tuán)隊(duì)集合起來會(huì)是什么樣子，或者當(dāng) 用研 成為一個(gè)大型組織中自己的分支時(shí)，領(lǐng)導(dǎo)力的優(yōu)缺點(diǎn)是什么。
優(yōu)勢（推測）：
擁有自己帶領(lǐng)的用研部門，可以為更深入地研究需求提供機(jī)會(huì)。它將有能力根據(jù)合作伙伴的規(guī)劃路線圖從而制定自己的規(guī)劃路線圖。它可以讓部門領(lǐng)導(dǎo)層能夠深入地支持研究人員的需求，因?yàn)樾枨蠼?jīng)常遇到障礙（如招聘、用戶日程安排、預(yù)算、批準(zhǔn)、 ResearchOps（ Research Operation service 研究運(yùn)營管理） 的行政工作等)。能夠擁有一個(gè)研究路線規(guī)劃圖，并為發(fā)現(xiàn)和生成性研究騰出時(shí)間，從長遠(yuǎn)來看，可能會(huì)大大有助于產(chǎn)品和客戶體驗(yàn)的信息共享。擁有一個(gè)獨(dú)立的團(tuán)隊(duì)可以使這些研究成為奢侈品。當(dāng)一個(gè)領(lǐng)導(dǎo)者致力于使研究成功，這意味著他們希望研究可以帶來更多戰(zhàn)略上的影響。
正如我之前提到的，一些被稱為 “ ResearchOps（研究運(yùn)營管理）” 或者研究操作的東西，是一個(gè)趨勢短語，類似于 “ designnops①” 或者 “ DevOps②” 等等。拋開時(shí)髦不說，設(shè)立一個(gè)獨(dú)立的部門和領(lǐng)導(dǎo)層可能意味著在決策層有一個(gè)更大的席位，這反過來又意味著在使體驗(yàn)研究產(chǎn)生影響方面有更多的投資。當(dāng)投入更多資金進(jìn)行研究時(shí)，業(yè)務(wù)側(cè)就有機(jī)會(huì)進(jìn)行戰(zhàn)略思考并得到支持。一個(gè)獨(dú)立的 用研 部門反過來將能夠雇傭人來支持行政管理，為研究人員能夠?qū)Ｗ⒂谒麄冄矍暗墓ぷ骱头治龆?fù)責(zé)。在小型組織中，甚至在大型組織中的小型 用研 團(tuán)隊(duì)中(比如我的團(tuán)隊(duì)) ，研究人員往往負(fù)責(zé)所有的職能，這也是可以的！但是，如果有一個(gè)專門關(guān)注于這些研究人員需求的部門，并擴(kuò)大他們工作的影響(不管團(tuán)隊(duì)規(guī)模有多大) ，我相信將有更大的機(jī)會(huì)去收集更好、更深入的見解，研究過程也能充分發(fā)揮其影響力和潛力。
①Design Systems Ops 是設(shè)計(jì)團(tuán)隊(duì)的一部分，他需要足夠了解設(shè)計(jì)，并且要了解他們試圖概念化什么。同時(shí)，Design Systems Ops 需要理解工程師的需求和定義方法，這將有助于設(shè)計(jì)系統(tǒng)的裝運(yùn)和規(guī)?；Ｔ谀承┏潭壬?，一個(gè) Design Systems Ops 是兩個(gè)世界的翻譯。
② DevOps（ Development和Operations的組合詞）是一組過程、方法與系統(tǒng)的統(tǒng)稱，用于促進(jìn)開發(fā)（應(yīng)用程序/軟件工程）、技術(shù)運(yùn)營和質(zhì)量保障（QA）部門之間的溝通、協(xié)作與整合。它是一種重視“軟件開發(fā)人員（Dev）”和“IT運(yùn)維技術(shù)人員（Ops）”之間溝通合作的文化、運(yùn)動(dòng)或慣例。透過自動(dòng)化“軟件交付”和“架構(gòu)變更”的流程，來使得構(gòu)建、測試、發(fā)布軟件能夠更加地快捷、頻繁和可靠。
劣勢（推測）：
相反，單獨(dú)作為一個(gè)獨(dú)立的 用研 部門，也可能使得決策層難以接受。如果不流入一個(gè)直接產(chǎn)生收入影響的部門內(nèi)（至少在短期內(nèi)，比如在銷售或營銷方面) ，那么 用研 的工作就很難得到認(rèn)可。利益相關(guān)者之間的伙伴關(guān)系和一致性，對于用研人員能夠成功地完成他們的工作來說至關(guān)重要。如果沒有它，如果 用研 的需求被認(rèn)為不是直接以產(chǎn)品為中心，同樣的職位可以幫助 用研， 也可能會(huì)阻礙他們。開展生產(chǎn)性研究的時(shí)間可能被視為“有風(fēng)險(xiǎn)” ，而且當(dāng)團(tuán)隊(duì)的領(lǐng)導(dǎo)層與其他更為成熟的角色(即風(fēng)險(xiǎn)較低的角色)分離時(shí)，可能很難獲得合作伙伴和利益相關(guān)者的支持。
同樣，投資一個(gè)獨(dú)立的用研團(tuán)隊(duì)總的來說可能是有風(fēng)險(xiǎn)的?？赡芎茈y預(yù)測到有形的ROI（投資回報(bào)率）預(yù)測，以便業(yè)務(wù)合作伙伴能夠理解，并在第一時(shí)間投入資金。這意味著，決策者們可能認(rèn)為給用研分配預(yù)算或增加人數(shù)是有風(fēng)險(xiǎn)的，其他研究需求也是如此。一般來說，R&D（產(chǎn)品研發(fā)）在組織中是一個(gè)棘手的領(lǐng)域，而 用研 肯定會(huì)在這個(gè)預(yù)算范圍內(nèi)。盡管有證據(jù)表明，對研發(fā)的投資有能力改變企業(yè)經(jīng)營的底線，并且可以通過創(chuàng)新保持企業(yè)價(jià)值，所以相對于獨(dú)立的用研部門，緊迫的商業(yè)需求可能話語權(quán)更大。
...
作者：三分設(shè)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn