如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
篩選是資源聚合類APP中不可缺少的功能,可幫用戶快速、精準地找到需要內容信息,根據資源分類形式的不同有多種篩選類型,并且不同的篩選類型還可以進行自由組合,讓復雜的內容信息更容易被篩選出來。
1. 橫向tab式篩選
2. 標簽篩選
3. 下拉篩選
4. 底部篩選
5. 抽屜式篩選
這是最常見的篩選樣式,屬于一級篩選。通常出現在導航欄或者是導航欄目的下方,根據分類層級的多少有4種展現形式。
一個層級
分類2~5個:所有類目都可以直接在tab欄目上展示出來,用戶可快速地在各個分類之間進行切換;
分類大于5個:所有類目以相同的間距進行橫向排布,引入橫滑操作,方便用戶瀏覽被隱藏的分類信息;有些產品也會在欄目右側增加下拉操作,點擊后下拉展示所有的分類,用戶可對所有分類進行直觀的瀏覽;
兩個層級分類
Tab 欄目上只展示推薦分類或者用戶自己選擇的分類
當內容分類有兩個層級且分類比較多的時候,產品會根據用戶的喜好推薦幾種分類在tab上進行展示;右側有篩選操作,點擊后在一個頁面里展示所有的分類。用戶可以在這個頁面自主選擇增減展示在tab上的分類,并且可以調整展示的順序。
交互細節
用戶在不同的類目間進行切換的時候,篩選內容在當前頁面刷新展示;
不同的tab分類可以通過橫滑進行切換;
位于內容信息的上方,對下方的列表內容進行控制;
當觸發篩選條件時,篩選欄目直接定位到導航欄下方。
是一種輔助篩選樣式,通常位于某一分類標題下方,或者跟tab篩選和下拉篩選搭配使用,有4種表現形式
① 內容分類標簽,充當內容入口。產品設定的內容分類,分類層級較高,且內容之間無交集,當觸發操作的時候,會跳轉頁面進行內容展示。
② 大分類下的子篩選條件,分類層級比較低,當用戶觸發操作時,內容在當前頁面進行展示。
③ 篩選頁面,多維度的篩選條件以列表的形式進行排布,標簽是單一維度下的多種分類,可橫滑操作,這種方式可以幫助用戶快速進行多維度的內容篩選。篩選的結果直接展示在篩選條件下方,最常出現在視頻類APP內做電影、電視篩選;馬蜂窩游記中也使用了這種分類形式。
通常是在一個大的分類下做具體選擇的時候使用,這種篩選樣式可以承載1~3級分類層級。
單一層級
分類以列表的形式展示在頁面中,當分類字段少且分類較多的時候也可以排2~3列進行展示。
兩個層級
有三種排布方式
①直接以欄目標題加列表內容的形式排列。適用于兩個層級分類都較少,或需要用戶進行操作(比較輸入框、滑塊)的場景使用。
②左側為一級分類信息展示區,右側為二級分類信息展示區,可以通過左側的一級分類控制右側的二級分類。適用于兩個層級分類都比較多的情況使用。
③上面為tab式的一級分類,下面是二級分類內容的展示。適用于一級分類較少,二級分類較多的場景使用。
三個層級
一級分類為tab形式展示在最上面,二三級為左右排布形式。
交互細節
放在內容信息的上面,對下方內容進行控制;
當觸發篩選條件時,篩選欄目直接定位在導航欄下方;
有2~3種信息層級的篩選,結果通常取得是不同信息之間的交集,所以需要在篩選中向用戶展示篩選結果數量,幫助用戶判斷是否調整篩選條件 ;如圖左
我們也可以選擇在篩選結果頁展示篩選標簽,用戶可以在當前頁面刪除部分標簽,以查看更多的內容信息;如下圖
備注:下拉篩選通常是多維度組合在一個欄目上展示,通常應用在電商、外賣等內容分類層級比較多,且層級內的分類也比較多的場景里
某一具體內容需要通過多個篩選維度輔助篩選時使用,比如XX-XX的火車票展示列表、馬蜂窩的地圖酒店篩選。這種篩選通常能承載1~2級的篩選層級,每種層級下的分類目都不能過多,是一種比較簡單輕便的篩選過程
單一篩選層級
① 與下拉篩選篩選一樣都是以列表的形式展示在篩選內容
兩個篩選層級
① 直接以欄目標題加列表內容的形式排列。
② 左側為一級分類信息展示區,右側為二級分類信息展示區
交互細節
處于頁面的底部導航欄的位置
當用戶出發操作的時候,內容從下往上彈出展示。
電商平臺應用較多的分類形式,通常是有兩個分類層級,一、二級的分類類目都比較多,默認情況下,如果分類特別多時可以只展示第一層級信息,用展開收起輔助用戶瀏覽二級類目信息。
交互細節
因為篩選的分類比較多,且通過展開收起會將已選擇的內容遮擋上,所以我們需要以一種方式將已篩選的條件展示出來,方便用戶及時調整。eg.馬蜂窩將所有用戶選擇的內容都放置在最前面,而京東選擇在欄目上方展示出來。
顯示有多少個符合篩選條件的內容,幫助用戶決策篩選條件是否合理。
本文主要講述了5種內容篩選種類:tab篩選、標簽篩選、下拉篩選、底部篩選和抽屜式篩選,選擇何種篩選類型跟內容分類層級和分類數量相關,所以設計之前要先了解產品的分類及數量,有助于選擇更適合用戶使用的篩選樣式。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
情感化設計已經不是一個新概念,唐納德·諾曼在《情感化設計》一書中,清晰地闡述了情感化設計的重要地位與作用?,F階段,同類型的產品在功能、服務、內容上日益趨同,差異越來越小,想讓產品觸及用戶的內心,除了功能滿足需求之外,也需要進行情感化運營。微云在不斷完善基礎功能的同時,還基于用戶行為,增加了許多情感化的體驗,比如往年今日、人臉相冊等。在情感化運營上,微云在2018年開始了較為完整的節日閃屏設計,希望向用戶傳達節日的祝福,拉近產品與用戶的距離。
節日閃屏是指在特定的節日進行情感化設計,傳遞品牌關懷的閃屏。優秀的節日閃屏,在內容上不僅能夠觸達用戶的記憶點,也能夠與品牌相融合,這樣既拉近了用戶與產品的距離,也強化了品牌的認知和記憶。
在開始設計之前,我們期望節日閃屏能夠達到以下兩個目標:
不同的節日有不同的文化背景和風俗習慣,節日祝福可以結合最典型的特征,這樣更有利于喚起用戶回憶,后文會結合案例進行分析。然而,品牌調性是貫穿所有節日的,在設計之初,我們明確微云的品牌調性,這樣更有利于品牌的傳達。
1. 品牌調性研究
Alan Cooper在《About face 4》中提到,在傳達品牌調性時,可以用一組形容詞來描述產品及體驗,這些詞可以組成詞云,用來指導視覺設計。如何創建這組詞云呢?Allan Cooper 提供了四個方法:從品牌大綱提煉關鍵詞、分析現有產品的界面和服務、分析競品的界面和服務、收集用戶反饋。
結合微云的特征,我們從現有產品的界面和用戶反饋兩個角度進行分析,提煉符合微云調性的詞云。
2. 分析現有產品界面
微云的平臺較多,包括WEB端、PC端、移動端、小程序等,其中WEB端和移動端的用戶最多,就從這兩個端入手,分析產品界面的品牌特征。從結構布局和色彩比例上,可以歸納兩端的共同點:結構清晰、留白較多、簡約干凈。
3. 分析用戶反饋
微云用戶在職業分布上,白領用戶占最大。結合使用場景分析,用戶反饋最多的詞是:輕量、方便、下載快速。
4. 提煉微云品牌詞云
結合產品界面「結構清晰、留白較多、簡約干凈」的特征和「輕量、方便、下載快速」的用戶反饋,我們提煉出適合描述微云品牌的詞云:簡約、干凈、留白。
接下來就以勞動節閃屏為例,從節日特征和品牌調性兩個維度來闡述節日閃屏的設計過程。
利用窮舉法,篩選最典型的節日特征。
微云是一個工具化的產品,旅行/度假更適合旅行類產品,勞動/休息與微云更契合。結合產品功能,定了兩個方向,第一個是「五一不勞你動,微云幫你整理」,與備份照片功能結合;第二個是「勞動光榮」,凸顯節日氣氛。以下是一些草圖方案:
前面三個方案重點在于功能的表達,把用戶目光吸引到場景上,內容豐富,但可能造成用戶在3秒內無法明白畫面主題。方案四重點在于氣氛的表達,關注人物故事,角色正在辛勤的勞動,直接點題,場景只起烘托作用。結合「簡約、干凈、留白」的品牌調性和「喚起美好回憶」的品牌期望,我們選擇了氛圍方向進行深入設計。
主題確定之后,就開始進行優化設計了。圍繞著關鍵詞,采用扁平化的設計手法,在色彩搭配上,由于勞動節沒有明顯的色彩傾向,故以品牌藍為主色調,橙色來源于產品的圖標,作為輔助色提亮整體畫面;在頁面排版上,保持大面積的留白,簡約清爽。
勞動節閃屏上線后,我們進行了復盤,我們希望微云的節日閃屏給用戶傳達的是「你的珍貴回憶微云幫你記錄」這樣的小心思,而不是「我們有xx功能」之類的廣告,所以在以后的節日閃屏中,我們會更加傾向節日故事性的表達。視覺風格則采用簡約、干凈、留白的方式,重點突出人物故事,不在場景上過多渲染。
按照上面的思路,我們完善了其他的節日閃屏設計。
母親節閃屏
母親節是一個西方的節日,在這一天,孩子給母親送康乃馨,來表達自己的愛意。在節日故事上選擇了最具代表性的孩子給母親送花的場景。
端午節閃屏
一提到端午節,就會想起粽子的「甜咸之戰」,可見粽子在端午節的重要地位,所以端午節的節日故事就圍繞粽子開展,三個好友齊心協力包粽子。
七夕閃屏
牛郎織女,鵲橋相會,是七夕節的美麗傳說,這一天情侶相聚,相互表達愛意。七夕故事定格在情侶相會的瞬間,女生飛奔向男生,在銀河上翩翩起舞,表達久別重逢的喜悅。
中秋閃屏&圣誕節閃屏
中秋節故事主題是合家團圓、賞月吃餅。圣誕節故事則以父女二人齊心協力裝飾圣誕樹為主題。
△ 備注:圣誕節最終效果圖由另一同事繪制
所有節日閃屏合集
節日閃屏除了故事性的表達之外,在設計上我們也輸出了一部分規范,用來把控風格的統一。
1. 配色規范
色彩作為用戶最容易感知的部分,使用時與品牌相呼應,主色與輔助色均來源于產品圖標。有明顯色彩屬性的節日,以節日固有色為主,比如春節紅色,中秋黃色等等。無明顯色彩屬性的節日,可以以品牌藍為主,強化品牌印記。
2. 角色規范
我們希望重點展示的是人物的珍貴回憶,基于此,我們設計了一批角色,講述角色的故事,讓用戶產生代入感。為了保證統一性,我們制定了人物的細節規范,包括角色頭身比=1 : 9、服裝款式以休閑為主、服飾顏色與品牌色呼應等。
在設定好人物細節規范之后,我們也完善了角色資源庫,方便后期在其他場景的應用。
3. 場景規范
在場景設計上,我們以簡潔,明確為主,場景主要起烘托人物故事的作用,而不進行過多的渲染。
做了一系列閃屏之后,這些插圖和角色并沒有閑置,我們在線下挖掘了一些新的使用場景。這些素材被重新利用起來,變身為辦公室的裝飾掛畫,營造出一個充滿品牌氣氛的辦公環境。
2018年微云希望通過節日閃屏的情感化運營,給用戶傳達節日關懷的同時也強化微云的品牌認知。在后續的規劃中,我們希望節日閃屏不僅僅是單方面的給用戶傳遞關懷,還能夠和用戶互動,實現更深層次的情感交流,比如點擊節日閃屏,跳轉到往年今日,幫助用戶回憶起以往的美好回憶,增加用戶粘性。2019年微云會繼續給大家傳遞節日的祝福,也會不斷探索新的閃屏設計風格,敬請大家期待。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
我們已經或多或少看過一些優秀作品,也知道了一些設計方法和技巧,了解到了一些相關的理論知識,自己也做過一些項目或者是練習,總體來說都掌握了一定的設計能力;但是設計師想要擁有更多的資源(指薪資、工作機會等等)或者是想職業進階,除了一定的設計能力之外是遠遠不夠的。
設計師還需要掌握更多的能力,才能讓自己成長提升,并且擁有他人無法取代的價值。我通過自己的經歷和整理收集,發現目前如今不同階段的設計師對待同一個問題不同的角度以及特征,如下圖所示:
不難發現,當大家還是初級設計師的時候,剛剛接觸設計行業,我們更多的是去觀察、學習、臨摹一些“好看”的作品,熟練地使用設計軟件和提升設計技法,最后的是自己做出來的產品是否漂亮美觀,最重要的是客戶/老板是否會買單,而自己無法清晰地定義自己設計的產品價值,也不能很好表達出自己的想法和觀點。所以產品走向會根據老板/客戶的水準來定義,輪到自己表達只是支支吾吾,最后只是做為執行無休止地改改改。一切由老板/客戶說的算,無法清晰地了解自己產品的定位,缺乏表達觀點的能力,缺乏一定的審美,作為執行角色無休止加班成為了初級設計師最大的痛點。
而經過一段時間的學習和工作后,逐漸轉型成為中級設計師后,有了一定的設計技法和軟件使用熟練度,有了一定的審美和視覺表現能力,平臺規模合作團隊也逐漸變大,基本能滿足老板/客戶/業務方提出的需求。開始學習一些設計相關理論,開始拆解自己或別人產品的交互架構,更多地開始關注用戶體驗起來,也會融入品牌元素到自己的產品當中,為自己的產品做情感化設計和制定設計規范,會組織一些專業語言和業務溝通以及陳述自己的產品。但是如何從眾多的設計方案中找到最優的方案來解決問題,如何更多地體現產品的價值,產品利益鏈如何形成商業閉環,如何在團隊/設計圈體現自己個人的價值,如何提升自己的個人影響力,成為了中級設計師這階段的痛點。
通過三年五年的沉淀,成為高級設計師后,形成了自己獨有的一套方法論和設計思維,能熟練地拆解每款產品和定義產品,視覺表現層已經完全能駕馭,能清晰地闡述自己的設計思路和結論,產品用戶體驗層也有了一定的經驗和方法,在團隊中或者設計圈有自己一定的個人影響力,更多地會在工作中思考產品帶來的社會價值和商業價值,會用不同的思維去思考產品的各個維度,找到最優的方法解決問題,會把固有的利益鏈轉換成商業閉環,提升用戶轉化率等等。而這階段的設計師的主要痛點就是面臨著團隊管理和溝通,朝著資深設計師和設計專家轉型,以及如何為平臺帶來的利益價值考核等等問題。
資深設計師或者設計專家這里不談,因為這階段所思考的問題大都和設計無關了。通過上述不難發現,每個階段的設計師都有各自的特征和痛點,雖然其中都包含著設計相關的能力,但是隨著階段的進階設計相關的能力占比逐漸變少,更多的是其他的能力增長,所以設計師除了設計以外其他能力的重要程度顯而易見,那么我們來看看除了設計以外,設計師應該掌握其他什么能力。
思考能力作為首要的能力,不僅僅是設計師,其他職業一樣需要這個能力,這里所涵蓋的面太廣泛了也說不了,這里主要針對三點來講:核心競爭力、批判思維和分析能力。思考分為兩個層面:自我層面的和業務層面的思考;自我層面的思考就是要通過深度剖析自我,發掘自己處于哪個階段,有什么長處和不足,自己想要什么,需要往怎樣的方向發展;而業務層面的則是要需要思考業務產品的結構框架、用戶體驗、商業價值等等等等,前者更加關注自身的成長,后者更加關注業務的成長。
· 核心競爭力
核心競爭力就是有與別人不一樣的競爭力,想要做到別人無法替代你的地步,就要有自己個人核心的競爭力。如果你會做一張 Banner,我也會做一張 Banner,你會搞一個頁面,我也會搞一個頁面,那么你這個人就成為了可有可無的螺絲釘,唯一的優勢就是年輕能拼能熬,等你熬銹了老了,隨時可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段,我們要深度剖析自己,認清自己的優勢劣勢,并采取相應的措施。
剖析自己的核心競爭力給大家一個大致思路,從異樣性和共通性入手。自己周圍或多或少有團隊,條件不足的話現在網絡各大平臺都很發達,也能融入一些設計圈子中,和不同的人對比尋找自己的核心競爭力。異樣性是當前的優勢,找出其中的優點,不斷地放大深造,變成你的核心競爭力,而和別人不一樣的缺點找出來摒棄改正;共通性就是和大家一樣的地方,可以看作是偽劣勢,因為諸多共通性中總有你最喜歡最擅長的一個,將它單獨拿出來不斷擴大,逐漸就拉開了差異性,慢慢就轉化成你的核心競爭力了,而大家都有的缺點,你把它糾正了,就成為你的核心競爭力了。
來舉一個栗子:小王是一名工作了3年的設計師,研究生畢業,由于公司的原因平時工作最多接觸的就是一些運營圖 banner,也有過很多品牌 VI 的經驗,逐漸自己在視覺表現上有自己一定的見解和想法,也更加感興趣做視覺表現的東西。
那么他的共通性就有:1.工作3年之久;2.研究生畢業;3.視覺表現能力強也更感興趣;4.做過品牌 VI 的經驗;5.有自己的見解和想法。
由此推斷出小王的共通性是:1.工作經驗豐富;2.視覺表現力強;3.有想法和見解;
異樣性是:1.學歷優勢;2.品牌 VI 相關經驗
那么小王可以保持自己學歷優勢下,可以繼續深造品牌 VI 相關,逐漸轉型成為高學歷的品牌 VI 設計師,那么學歷和很多品牌 VI 的經驗就是小王的核心競爭力;也可以通過熱愛去學習 C4D 動效等軟件繼續增強自己視覺表現力,配合自己豐富的工作經驗逐漸轉型成高學歷的創意藝術設計師,然后通過將自己的想法見解通過分享會、文章等模式產出,將這一點升級成個人影響力,那么綜合下來更加優秀的視覺表現力、豐富的工作經驗和個人影響力也會逐漸變成小王的核心競爭力。
只有通過不同維度深度地剖析自己,找到自己的共通和異樣點,清晰自己的價值定位,然后制定出適合自己成長目標和方案,不斷放大增加自己的核心競爭力,成為不可取代的那個人。
· 批判思維
批判思維是一名設計師必須具備的思維能力,我們不僅僅要學會批判別人的作品,還要學會自我批判。這里不是指無腦的批判(之前遇到過一個實習生剛進到公司里,就把之前所有人做的東西全部批判了一遍,重點是只說產品好看與否,完全不顧及平臺一致性商業價值用戶體驗等等,最后只批判卻沒有任何實質性的建議,頗有一種指點江山的感覺,然后后面再也沒見到過他了),這里是指在自己通過批判別人或自我的方案,不斷地優化糾正,最后產出最優質的方案,這是批判思維的出發點。
不同的人有不同的經歷,看待問題的維度是多種多樣的,所以一個方案產出后,通過不同的人思考后的結果是最好的解決方案。這也印證了波克定理:只有在爭辯中,才可能誕生最好的主意和最好的決定。所以當設計師接到產品交互給到的原型圖后,不要上手就做圖,要通過自己經驗和想法去看待原型圖,然后提出更加優質的方案進行討論,如果你的方案更加優質,那么不僅是產品的質量得到了優化,你個人的經驗也得到了沉淀,下次遇到相同的場景就可以拿出來復用,直到遇到更好的方案。
唯一注意的事項就是注意溝通的方法,這里后文會提到,比你資歷高的人提出的觀點更加具有建設性,在毫無頭緒沒有創新的情況下就聽比你更有經驗的人的;遇到比你資歷低的人提出的觀點也不要嗤之以鼻,抓取其中有用的點,沒準是一個新的思維方向;總之,有數據說數據,沒數據舉案例,沒案例講觀點,如果連觀點都沒有的話,照著大佬說的話做就是了。
· 分析能力
分析能力也是設計師必須掌握的能力之一,無論你是創意藝術設計師,還是用戶體驗設計師,譬如一張 Banner 氛圍傳遞或者文案排版,譬如插畫的配色或者場景搭建,譬如產品的布局結構或者用戶體驗,這些都需要有一定的分析能力。通過拆解改版/競品/參照產品等,明確產品的最終目的、商業價值等等,有了這些準備后才能對自己的產品進行設計或者改版。而分析產品可以以用戶體驗五要素的角度來分析,分別是:戰略層、范圍層、結構層、框架層和表現層,具體相關的文章站酷、PM 社區、36氪等等都搜的到,這里不再細說;之前在分析產品的時候發現有些產品強行套用這五個要素進去不適用,因為有些產品的頁面它不存在戰略層或者范圍層的東西,所以我總結歸納了三個角度來分析產品。
案例就用淘搶購 v4.1 頁面(已上線)來講,三個角度主要是:表現層、用戶體驗層和價值層。表現層主要就是產品頁面的配色、布局結構之類的;用戶體驗層就是產品的心智透出、交互流程之類的;價值層就是產品深度的價值體現了,比如商業價值、社會價值和用戶留存率之類的;大致可以套用這個公式去思考:為什么這里會用這種表現形式,它想要表達怎樣的效果,它要達到怎樣的最終目的,如果是自己去設計會怎樣做。舉例:因為淘寶規范為卡片式設計,在視覺表現上要統一,所以淘搶購 v4.1 的業務目的是統一視覺樣式,并且它需要給用戶產生一種“商品很便宜快去搶購再不搶購就沒了”的心智認知,它的最終目的是引導用戶去商品 Detail 頁面購買商品和提高商品的點擊率,這樣通過協調關系形成平臺、商家和用戶之間的利益鏈商業閉環。
想要提升自己的分析能力除了項目和時間的沉淀外,更多的時候需要自己平時的積累,站酷等平臺有很多優秀的作品,作者會把自己設計的分析和思路寫出來,我們可以看看別人的想法是否值得借鑒,然后再去分析一下,最后思考如果是自己的話會怎么去做;其次做設計的時候帶著同理心去做,把自己當作用戶去看待自己的產品,通過不斷的積累提升自己對產品的敏銳度,將一些產品的隱性問題挖掘出來;另外可以多看一些好的設計分析書,比如《U一點料1、2》、《以匠心 致設計》等等,將學到的分析方法代入自己的產品或作品中,逐漸分析能力就增強了。
規劃能力是日常工作生活中所需要掌握的能力,主要講業務規劃和職業生涯規劃,業務規劃能力應對的是我們工作中處理業務所需要具備的能力,而職業生涯規劃應對的是我們整個人生職業生涯規劃的能力。掌握這個能力后前者會給我們帶來業務處理效率上的提升,后者給我們帶來整個人生有益的好處,所以這個能力非常重要。
· 業務規劃
很多時候我們還在有條不紊地處理某個需求,心想著下班去吃個飯買水果回家洗澡睡覺的時候,突然來了一個緊急的需求,就把我們整天的計劃給打亂了,火急火燎地處理完這個需求,然后又把之前的需求做了,最后加班改改改導致整個計劃泡湯了。工作中遇到這樣的情況很多很多,處理方法有很多種,最經典的就是四象限法則,把事情的緊急重要程度分為:重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個象限。
很多時候都是道理我們都懂,可是一遇到情況依舊手忙腳亂,根本原因是沒有認真地把它代入自己的工作生活當中。畫一個象限表,把自己今天所要處理的事務陳列出來五分鐘都不需要,一開始可能因為事情不多就沒堅持下去,一旦養成習慣后,將來遇到多種緊急情況突發的時候就能認識到這個習慣給你帶來的好處了,所謂養兵千日,用兵一時就是這個道理。
在做業務需求的時候,可能會碰到有些需求價值高,有些需求價值低但又很緊急,不知道怎么處理之間的關系,我們依舊可以套用四象限法則來制定一個四象限表:價值高且緊急、緊急但價值低、價值高不緊急和價值低不緊急。什么是價值高的需求呢,就是能讓你有充分思考和分析的需求,比如某個頁面的改版;價值低的需求則是相對不怎么需要思考和分析的需求,比如根據已有的規范改個顏色之類的。在時間的優先級前,價值高的需求大于價值低的,最后剩下的就是價值不高且不緊急的。因為我們無法拒絕需求,需求來了肯定要是做的,工作不是愛好可以有多種選擇性,但我們要學會將需求分解成不同類型的,對自己有成長沉淀的需求那可以作為最高優先級去處理,留夠充裕的時間去思考分析,然后沉淀經驗穩定提升。
· 職業生涯規劃
這個在大學期間就學過相關的課程,只不過當時并沒有太深的感觸,而是等工作以后才知道這項能力的重要性,它相當于關系著你每個階段的里程碑,當成游戲中的成就任務也不為過,還是自己設定的成就任務。某個階段想要達成什么樣的目標,想要獲得怎樣的成就,都是要自己一步一步慢慢規劃并且完成出來的。
因為我遇到過幾個非常努力的人,努力到讓人心悸的地步,每天除去吃飯睡覺工作時間就是在努力學習,到最后還是很迷茫,不知道做什么,不知道如何體現自己的價值。這類沒有目的的努力的人是很可怕的,他們努力得沒有錯,但是這樣下去沒有成效的努力會讓他們覺得努力并沒什么用,然后逐漸開始產生抱怨、泄氣和放棄等負面情緒。
舉個例子來說明:如果你剛畢業,給自己制定的長遠的職業生涯規劃是在工作3~5年后進到大廠工作提升自己,那么所拆分下來就需要一些項目工作經驗和優秀的作品,再拆分下來就是如何做出優秀的作品,細分到最后就是作品當中的元素,比如圖標排版布局之類的,那么就制定一段時間內的練習就按照各類元素去做,比如圖標畫兩個星期,APP 設計排版布局練習兩個星期,插畫練習畫兩個星期,這樣堅持下來就組成一個完整的項目作品了,以此類推。有了規劃目標并且在自我驅動的推動下,逐漸實現自己的職業目標。
執行能力是指自我在工作&學習中執行的能力,執行能力為一個設計師最主要的核心技能,一切的能力都凌駕于這個基礎之上;哪怕你再能說會道,能賦予你的設計各種價值,能給予你的設計各種環境,但這些都是第二步,第一步就是你的設計表現達到期望值,如若第一步稿子都不好看,那么沒人愿意會聽你敘述的。前文已經提及到了,設計師在初級至中級階段的時候大多數注重的就是表現手法,如同學說話一樣,表現手法可以看作是漢語拼音,然后才是組成一個個字,最后組成一句完整的話語。
· 自我執行力
提升自我執行的能力我大致分為兩個步驟:看和做。
首先先來說看,看其實是提高自己審美的一個過程,通過看一些平臺網站的優秀設計作品,久而久之自己的審美能力才會提高,然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或學習時間,通過瀏覽設計網站采集學習一些你覺得好看的作品;采集是一個很好的習慣,我覺得是每個設計師必須養成的習慣,把自己平時覺得好的表現形式收集起來,等到某一天需要用到的時候,腦海中對當前場景會有一定的印象,再根據印象去尋找采集到的作品,能很大程度上節省自己腦爆的時間,哪怕沒有采集或者文件丟失,自己的腦中大致也會有一個雛形方向。而帶有目的性地看是指針對某一個模塊去搜集整理,比如今天我需要做一個關于內容的模塊,那么我就會去尋找一些做內容的產品設計,搜集到的各類關于內容的表現手法,然后結合自己的經驗和分析,找出最適合自己產品的一種。
僅僅看是不夠的,在看過之后我們需要動手嘗試才能算真正地沉淀自己所看到、學到的東西。做設計最忌諱的就是“眼高手低或者眼低手高”這種狀態,有了審美但表現手法跟不上,或者說表現手法有但是審美跟不上。一定要在自己吸收了一定的審美后,通過自己的嘗試去做出來,才能真正的沉淀到自己的大腦當中,變成自己的表現手法之一。最后通過大量的積累,結合對商業需求的判斷形成設計策略,才能從容應對不同的產品需求,哪怕你今天做金融相關的產品,還是明天做電商的產品,后天又改做工具類產品,一旦形成了自己不同的應對策略,才能做到真正意義上的游刃有余。
很多時候我們只關注到魚的大小、魚的肉質是否鮮美那20%層面的東西,往往忽視了80%最重要的捕魚技巧和方法;看到的只是產品是否好看,交互是否流暢,體驗是否良好,沒有往更深層次地去想這個產品的商業背景是什么,設計師為什么要這樣設計,如果換做自己的話會去怎么做;畢竟我們所做的一切訓練、思考都是為了更好地為工作服務,就如同脫離了商業背景以后,有些設計就只是單純的炫技,并沒有解決問題的價值,而設計師的工作核心就是解決問題,所以我們要結合作品的背景、價值等因素,去看、去做、去學相應的表現手法才是自我執行的核心所在。
表達能力是設計師除去執行能力外第二重要的能力,小到平日里的溝通對接,大到述職晉升面試,都離不開表達能力的支持。有些設計師經常面試怎么都過不了關,我本以為是作品集的問題,可是看完之后作品方面完全沒有什么問題,具體了解后才知道是在面試過程當中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導致表達斷斷續續不順暢,面試官就會覺得這個人不靠譜然后 PASS,明明做圖很優秀卻輸在了表達上,這種情況就很憋屈。在廣告公司中,一個 LOGO 或者廣告視頻往往只是贈品,出售的卻是這個品牌VI的故事;如果一個設計師不懂得怎么闡述自己的業務,不懂得怎么推銷自己的方案,不懂得拓寬自己的個人影響力,就單純的只會執行作圖的話,那么這名設計師是不合格的。網傳有一個段子“一個公司的工資排名規律:用 Word 的不如用 Excel 的,用 Excel 的不如用 PPT 的,用 PPT 的不如講 PPT 的,講 PPT 的不如聽 PPT 的,聽 PPT 的不如聽匯報的,聽匯報的不如決定的,決定的不如簽字的”,由此可見表達能力在職場中的重要性。
· 業務表達
業務表達是指在自己工作的過程當中,對自己的設計方案進行闡述。大部分設計師會遇到一個困擾,當設計稿做完以后就不知道怎么去表達自己的設計理念,被業務方/面試官/老板提出質疑時,比如:“你這產品的設計為什么要用紅色?”、“聊天信息這塊兒為什么要用小氣泡的樣式?”,往往不知道怎么去說,有一種當時就覺得好看所以這樣做了,也沒有去想那么多的感覺,或者其他優秀的作品/競品是這樣做的,我也就這樣做了;那么結果往往就是自己的專業性遭到質疑,然后轉變成業務方/老板進行設計主導,形成“改來改去還是第一版好”這樣類似的惡性循環中。
那么如何提升自己的業務表達能力呢?首先設計師要提升在設計領域的專業度,通過學習吸納設計相關的知識,然后代入自己的設計當中去試著闡述設計稿,準備工作先做到位,收集相關的數據,掌握相對應的設計理論,先說服自己再去說服別人。比如:“通過色彩心理學得知,紅色能帶給人興奮、激動、熱情等積極情緒,而我們產品所需要透出的氛圍是熱情的、積極向上的,相對應地激發出用戶的正向情緒,所以我這里使用紅色。”、“根據近半年數據研究得出,產品聊天信息模塊使用過程當中女性用戶占總用戶數的85.9%,而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好,通過 A/B 測試結果得出,使用小氣泡樣式后數據上漲了15%左右,所以聊天信息模塊整體改版成小氣泡的樣式。”
通過自己前期的準備(設計理論知識補充、用戶調研、數據測試等),將自己的設計理念表達出來,主導整個設計的方向,必要時可以理性地堅持自己的設計方案,畢竟無論是老板還是業務方,出發點都是希望自己的產品能做到最好最完善,只要你給出數據支撐和專業性的建議,他們一定都會采納接受的,而最后你的能力和專業性也得到了對應的認可。
· 書面表達
我本人是強烈建議在能力達到一定程度的時候,通過寫作來檢視自己成果的。因為往往很多東西自己是明白的,但是寫出來讓其他人看懂是另外一種能力了。自己一段時間的職業經驗總結、對設計的見解看法、自己獨特的設計思維、一本書的讀后感等等都可以通過書面表達出來,某個知識理論難的不是學習,而是將它教授出去,因為只有你想要把某件事說明白,闡述得其他人都能看懂,那么首先你要對這件事理解得很透徹,然后通過自己的經驗和見解,轉化成通俗的語言說給別人聽。最好的狀態就是與你同樣級別的人你能與他用專業術語對話,級別比你低的人你能把理論轉換成他能聽懂的語言進行交流,這樣才算是對理論概念理解透徹到位。
大家也明白,學習最有效的方法不是輸入而是輸出,設計也是一樣的。在學習某種理論方法后,通過書面表達出自己的見解和想法,并代入到相應的例子當中,做到舉一反三才能算是真正的學到了這個知識點。
· 述職
述職一般出現在晉升報告或者面試當中,“諸侯朝于天子曰述職,述職者,述所職也。”述職可以說是工作報告中的總結性報告。向自己的老板述職是為了升職加薪,向面試官述職是為了獲取更好的工作機會;工作成果有了,但是述職做不好的話,在老板/面試官眼里你就做了無成效的工作,述職沒有想象的那么簡單,但是也沒有那么難,很多人都會經歷兩個述職的誤區,這些誤區我經歷過也看到過,所以總結出來警醒大家。
一、把述職當作流水賬
把述職當作流水賬是很多新人容易犯的錯誤,當述職的時候,有的人就會陳列出自己今年做了多少多少工作:“我今年改版了 XXX 模塊”、“我設計了 XXX 的首頁”、“我通過調查研究自主推導改版了 XXX 模塊并落地成功”等等,這時候你的老板/面試官會心里會想:“所以呢?”“然后呢?”,工作結果固然重要,但是決定你能否晉升/錄用的,不僅僅是把你做的工作進行流水賬般的描述就夠了的。
二、把述職當作邀功大會
這個誤區相對來說更高端一些,述職的時候有的人常常會像邀功一樣:“我今年通過改版了 XXX 模塊,導致用戶量從50%上漲到了80%”、“通過調查研究改版了 XXX 模塊,最后通過 A/B 測試發現數據上漲了5%,最后落地全部實施新的設計方案”,這些看似闡述了產品的背景、自己做了什么以及結果,但是往往來說還是不夠的,以上統統可以歸為無效述職。
你做了什么重要嗎?沒那么重要,重要的是你帶了什么樣的價值。述職所需要你做的,老板/面試官所想要了解的就是:分析為什么產品之前數據會那么低?你是通過那些方法得出解決方案的?為什么那么多種解決方案里你要選擇這一種?你這樣的方法能否沉淀成體系?如果換一個人來按照你的方法做是否可以得到同樣的效果?有效述職也就是決定你能向上一步的,是把你在工作中的感性認知上升到理性規律的歸納總結的能力體現。
· SCQA 模型
SCQA 模型是一個“結構化表達”工具,是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的,而這個模型可以套用在業務表達、書面表達以及述職任何場景當中;S是指場景(Situation),C是指沖突(Complication),Q是指問題(Question),A是指解決方案(Answer)。
無論你是在向業務方/老板闡述方案做工作匯報,還是自己寫作梳理都可以用到這個模型;S場景陳述的通常是大家都熟悉的事、普遍認同的事、事情發生的背景。由此切入既不突兀交代了事情背景又容易讓大家產生共鳴,產生代入感,然后引出沖突C。Q是其中發現的問題,最后A給出相對應的解決方案,是對Q的回答也是接下來我們要闡述的內容。整個結構其實是形成良好的溝通氛圍,然后帶出沖突和疑問,最后提供可行的解決方案。
我們熟知的廣告詞經常使用這個套路:
得了灰指甲——描述場景【S】
一個傳染兩——發生了沖突【C】
問我怎么辦?——提出問題【Q】
馬上用亮甲!——給出解決方案【A】
這個模型無論作為演講的開場白,作為向業務方/老板闡述設計方案的開場,還是作為一篇文章的序言都是屢試不爽的。S場景需要讓對方產生共鳴,必須讓對方產生一種:“是的,你說的好有道理”的反應,只有場景被認同了才能繼續故事的發展,這時候打破你給對方營造的安全感,制造C沖突,相繼提出Q問題,共同確認面臨的一個問題,然后你給出你的A解決方案,而這個解決方案就是你整個敘述的核心和中心思想。
比如你要向業務方/老板闡述你的設計方案,就可以這樣來描述:“在 XXv2.0 版本上線后(交代場景),收集了近半年以來的數據發現,女性用戶相對減少了20%(發生沖突),為什么會減少20%的女性用戶(提出疑問),根據我的調查研究發現原因是改版后整個產品色調偏男性化,由于我們產品的受眾群體大多是女性用戶,男女比例為1:3,所以在 v.2.1 的改版中我將整個產品色調改為偏女性化的方向(給出解決方案)”。
同樣,我寫這個章節的思路就可以這樣理解:設計師們工作中通常會面臨述職、面試以及寫文章等情況(交代場景),但是往往很多設計師不知道如何去表達,思路也不是很清晰,導致述職無效、面試失敗等情況(發生沖突),要如何避免這種情況發生?如何鍛煉自己的表達能力?(提出疑問),那就要多通過 SCQA 模型在生活工作中去練習表達(給出解決方案)。
最后是生活能力,設計不是工作的全部,工作不是生活的全部,我們應該過好自己的生活,產品設計都是從生活中獲得靈感和啟發的,我們如何對待自己的生活,我們就會得到怎樣的反饋。多陪伴下自己的家人、培養一個興趣愛好、保持學習新鮮事物的動力等等,成為一個有趣的靈魂。往往設計師能從多樣化的生活中發現靈感和啟發,也能從生活中找到不同用戶的痛點和感知;如何做一名好的設計師,就是帶著同理心去做設計,如何帶著同理心做設計,就是將自己當作用戶,而用戶是融入到生活中的。下面我就來例舉兩個通過生活中的啟發改變產品設計的例子。
· 用戶擁有感
在購買星巴克的時候,為什么服務員要把顧客的名字寫在杯子上呢?難道僅僅是為了分辨嘛?像其他奶茶店一樣貼一張打印好的便簽不就好了么?去宜家購置家具的時候,為什么要讓顧客自己親手組裝家具?可口可樂為什么可以定制自己城市的易拉罐?因為這一切都是要給用戶塑造擁有感,人是一種很不理性的生物,只要先拿到一個東西,就會覺得自己擁有這個東西,就不想放掉它了,這就是擁有感最根本的示范。從心理學的角度來說這被稱為稟賦效應,意思就是我們對于自己所擁有東西的價值往往會看得更重。這就是為什么小時候玩的玩具、收集的畫冊、穿的衣服都已經沒什么用了,我們還要留著當紀念的原因。因為我們的人性對于擁有感非常執著,對于自己得到的東西非常迷戀,當我們覺得要失去它的時候,會有一種損失感,覺得很不舍,會覺得心里很難受,這就是稟賦效應在我們身上發生了最明顯的效果。
而這樣的營銷策略被用到產品設計當中,例如前段時間很火的軟件 Zepeto,每個人都不一樣的生成圖片洗刷著我們的朋友圈;例如每年年末的賬單、網易云音樂總結等等,賬單它只是一份賬單,根據不同用戶生成不同的賬單,也就賦予了不同的意義;又例如各種 H5 性格測試生成的分享卡等等,這些都是產品設計中從生活中營銷案例中汲取經驗的體現。
· 線下導購轉線上
每當我們去到商場線下商店的時候,導購員和我們素未謀面,但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產品,然后向我們推銷對應的產品,如若剛好觸動我們的需求,于是我們就會發生購買這個行為。生活中線下導購的方式也被運用到線上導購的產品中,同樣平臺和用戶素未謀面,可是可以通過掌握大數據,分析用戶近半年、近一個月的購買和瀏覽商品的數據,結合相對應季節等因素推送給用戶所需要的產品。比如我平時經常瀏覽一些潮牌個性的衣物,現在正值冬季,想買一件冬季穿的棉衣,那么當我打開淘寶的時候,系統會推送一些潮牌大衣等冬季衣物在首頁,我正好有這個需求又符合我的口味愛好,自然而然就會點進去購買了。
有一條創業準則是這樣說的:“如果有點兒閑錢,還有點時間,但又找不到商機,最好的辦法就是去鬧市、電梯、小區人流量最高的那個大門口,端杯茶,靜靜的聽人們抱怨?!?,谷歌、蘋果公司的設計思維首當其沖的就是帶著同理心去設計、去制定設計策略,同理心來源于生活,而這一切只有設計師把自己的生活經營好,才能從當中獲得啟發和感悟,然后代入自己的設計理念當中,設計出真正能根本解決問題的產品。
其次偶爾會從網上看到或者聽說 XX 設計師猝死,XX 設計師檢驗出 XX 疾病等等,每每看到此類消息都會感到痛心,工作不是生活的全部,如果連自己的工作和生活都處理不好的話,那么說明這個人生活能力真的很糟糕。如果一個人整天筋疲力盡打不起精神,那么他的工作會做得好嘛?所以在這請求大家合理安排好工作時間,勞逸結合,多鍛煉身體,多花些時間陪伴父母、家人,這樣才能帶著健康的身心去工作,從而取得更好的工作成果,形成一個良性的循環。你怎樣對待生活,生活就會怎樣對待你。
以上是我總結的除設計之外設計師需要掌握的技能,如果將這些比喻成大樹的話,設計能力是大樹的根部,是設計師立足的根本;而執行能力則是這根樹的枝干,是支撐設計師全部的基礎;表達能力是樹枝,撐起設計師的整個世界;思考能力則是樹葉花果,是設計師綜合的產物;大地就是生活能力,當設計師的產物(物質、地位等)“落地”時,滋養著大地,大地越“肥沃”,越能催生出茂盛的枝葉;而規劃能力就是一位辛勤的園丁,什么時候需要澆水,什么時候需要修剪枝葉,都是由園丁來承擔。
想要跑贏別人,首先得跑過那個跑得最快的自己。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
五大漸變趨勢是什么?如何在你的工作中有效地使用?
你可能已經注意到,在17、18年的時候,漸變在印刷和web設計中的使用的越來越多了??雌饋碓O計行業已經接受了這種趨勢,這種漸變過渡在形狀和顏色上只會越來越動態。如果你不知道如何將彩色的形狀和背景應用到你想要通過設計傳達的信息中去,那么使用彩色的形狀和背景是一件棘手的事情。
5大漸變趨勢是什么,如何在你的工作中有效地使用漸變呢?
1、 雙色版的漸變
雙色調漸變是兩種顏色,它們之間有平滑過渡。沒有更多,沒有更少。使用Illustrator中的漸變工具創建這些類型的顏色過渡非常簡單。當為Duotone漸變組合顏色時,沒有規則。當你混合3種顏色或更多顏色時,規則就會出現.但是兩個,你可以做任何你想做的事情。這一切都取決于你對設計本身的意圖。如果你需要強大而大膽的信息,那么你可能需要考慮使用更鮮明,更高對比度的顏色組合。另一方面,如果你希望采用柔和,更安靜的方法,則使用較少飽和的顏色就好了??茨阍趺从昧?
如何使用雙色版的漸變?
你可以像Duotone Gradients一樣有創意。這種類型的漸變最廣泛使用是照片疊加。漸變主要用作內容的簡單背景。以下示例是由JessicaH?gg和Stink Studios為Spotify創建的此類案例之一。
Duotone Gradient的另一個例子是由Barthelemy Chalvet為AgenceMe創建的家庭導航設計。在這里,我們再次將Duotone視為內容的背景。內容包括文本和插圖。但是,圖中使用的顏色非常謹慎。插圖主要是淺色調,只是一些色彩鮮艷的細節,與背景雙色調(溫暖)相反(冷)。
總而言之,使用雙色調漸變趨勢的最安全方法是將漸變背景與黑白照片混合,或將它們作為照片疊加層應用。如果你將它們與其他顏色混合,請確保不要過分。多種顏色在設計中可能非常出色,但如果匹配不當,它們也會引入混亂和混亂。如有疑問,請使用較少的顏色。在大多數情況下,少即是多。
2、半透明漸變
前五大漸變趨勢包括半透明漸變。這些類型的漸變在它們中具有褪色效果,它們在一端具有全色調,而在另一端具有0%顏色不透明度。
這些半透明漸變可以是雙色調甚至是三色調漸變,但它們總是以透明度結束或開始。
如何使用半透明漸變?
使用半透明漸變的一種方法是將它們與其他漸變形狀和背景重疊,或者作為照片上的疊加層。下面的示例顯示了Studio-JQ制作的藝術作品
在這里,我們可以看到在三色漸變圓上使用一個半透明形狀。微妙的半透明形狀在漸變圓形前形成霧氣氛,就像褪色的月亮,簡單而有效地使用透明效果。
在Magdiel Lopez制作的海報藝術品中可以看到混合了攝影和紋理的半透明漸變的另一種奇妙用法。
三、網格漸變
網格漸變是在Illustrator中使用網格工具制作的漸變,因此是標題。這種類型的漸變需要更多的技巧來制作。通常它們將多種顏色混合在一起,這應該小心生產,因為某些顏色不能很好地匹配。除了將多種顏色混合在一起外,它們還形成一種類似于液體的紋理圖案,使其具有更加動感的外觀。
到目前為止,您可能已經注意到所有漸變如何與黑白照片完美配合,為他們提供增強色彩強度所需的對比度。它還消除了設計中“過多”的混亂和感覺。
如何使用網格漸變?
網格漸變可以用作獨立模式。由于它們通常具有動態外觀,因此可以作為簡約模式應用,并輔以創意印刷術。
使用網格漸變進行品牌推廣也越來越受歡迎。這種類型的使用可以在下面由Focus Lab制作的簡約品牌項目中看到。
4.漸變模糊
這是事情變得有趣的地方......。介紹漸變模糊!我相信你已經看到了這些有趣的外觀,有一種強烈的“藝術”感覺。它們現在是Top 5 Gradient Trends的一部分。
如何使用漸變模糊?
它們似乎經常被用作海報設計的一部分。抽象的偉大之處在于它可以用來描述各種情感和抽象概念。它可以說明聲音,光線,宇宙,幸?;虮瘋N覀兏静恢廊绾蚊枋鲞@些單詞中的許多單詞,但精心挑選的模糊彩色形狀可以幫助我們。
讓我們看一些使用漸變模糊的示例:
5.漸變球體
最后的漸變趨勢是漸變球體,具有強烈三維形狀的網狀圓圈,提醒我們在行星和氣泡上。
如何使用漸變球體?
Gradient Spheres在應用程序和網頁設計中占據了一席之地。由于它們與行星類似物體相似,因此它們通常用于技術未來類型的項目中。例如,Jiyoon Kim使用Gradient Spheres設計一個具有輕盈未來感的創意手表UI。
Mirtho Prepont為Asana制作的海報設計中使用的Gradient Sphere的另一個創意示例:
寫在最后
如果你使用漸變的照片,第一步應該是選擇正確的照片。最好的選擇是具有清晰焦點的照片,如果可能的話,焦點周圍沒有其他任何東西。值得花時間的第二件事是照片的顏色。如果顏色與你的漸變無任何關系,最安全的做法是將照片切換為黑白模式。
但是,有時可以通過在Photoshop中使用“顏色飽和度”工具或“顏色平衡”來調整顏色。這正是我在這個例子中所做的。第三是選擇漸變形狀和背景。
選擇正確的漸變對象時,請確保它們都具有相似的色調。在我的例子中,我使用藍色/紫色物體與粉紅色/黃色物體形成鮮明對比。這些都是我需要的顏色。任何更多的東西,組成會感到混亂。雖然很容易穿過線,所以如果你不確定,只需要減少顏色和減少形狀。
如果你感覺某些東西仍然缺失,請添加中性幾何形狀,如果背景為淺色,則為白色;如果背景為暗,則為黑色。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
Cheatsheet總結了我的方法
我最近致力于為電子健康記錄(EHR)產品定義間距系統,以改善產品頁面的可讀性和一致性。我提出了3個間距規則(3C規則)和以4為基準的間距網格,并且這些規則與新的印刷系統配合得非常好。
存在的問題
當定位垂直元素時,設計師不應做出隨意或者任其自然的判斷。通常設計師通過按住Shift和上下箭頭鍵在Photoshop中實現垂直增量:“根據實際情況來決定使用5px或10px?!边@種方法雖然是10的倍數并且可用,但是它不符合任何印刷要求的規范。
——Robert Bringhurst,著有《印刷風格元素》一書。
我們在EHR產品中使用了5px、10px、15px、20px的邊距/填充,但是在何時何種情況下使用這些間距,我們并沒有一個嚴格的規范。
邊距/填充只是間距系統的一部分,字體行高也會增加額外的高度空間,但目前我們沒有為現有(舊的)文字樣式創建行高規范。
相似的組件和內容在產品中看起來不一致,這造成了EHR產品的整體樣式不統一,并且因為數據疏密程度不同,造成了閱讀體驗的不流暢。
解決問題
步驟1:確定文本行高(確定基準網格)
首先我們假設使用非常流行的8點基準網格(即以8的倍數為一個間距規單位)會達到好的效果,因此在實驗中,我把基準主體字體大小設置為13px,行高設置為8的倍數即16px或則24px然后看看這兩個行高規則是否有用。如果沒用,則意味著8點基準網格是不適用的。
然后我將基準字體大小設置為13px,并在16px和24px之間的偶數尋找行高值。開始我將它與18px(6的倍數)匹配,如果成功那就意味著我采用了6點基準網格,也就是6的倍數(間距會是3、6、12、18、24)。后來我嘗試了20px的行高,使用起來效果很好,所以我采用了4點基準柵格(也就是間距為2、4、8、12、16、20等)。
步驟2:用??硕珊蛶缀渭墧祦泶_定間距值
“隨著可選擇數量的增加,做出決定的難度將會增加。”
——??硕?/span>
我們要想出一個可感知的間距系統來簡化設計決策,另外將所需值的數量保持在一個最小范圍內。
間距值是基準網格的倍數數值(如步驟1中確定的4點基準網格),因此我的間距值為4點基網格(2、4、8、12、16、20、24、28…)
一般來說,4–-5個間距值已經為產品設計提供了足夠的差異性,即使對于復雜的企業產品也足夠了,但是在實際過程中可能需要靈活的在規范中增加間距值。
我決定使用4點基準網格,因為它提供了更好的視覺可感知區間,對于層次結構的展示來說非常好,因此間距值應該是(2、4、8、16)。
如何以可預見的方式應用這些間距值?3C法則來拯救你。
我深受Nathan Curtis上面文章中介紹的Insets,Stacks&Inline等間距詞匯的影響。我決定在其基礎上構建一個額外的詞匯組,以便我的團隊更容易理解每個詞匯的使用環境。我將所有的間距規則分解成3個C:容器、內容和組件。
· 容器規則使用了平方差的概念(使用16px)
· 內容規則使用了堆棧的概念(頭部堆棧使用2px,葉節點堆棧使用0、4、8、16px具體取決于內容類型)
· 組件規則使用內聯的概念(大多數情況下使用8px,4px表示關聯關系)
第1C:容器規則
容器是UI中的框架,其中包含內容,通常這些內容是頁面、卡片、模態、彈窗等。由于容器在層次結構中處于最高層次,所以我確保所有容器的間距值(在我的例子中是16px)。提示:切勿在任何間距計算中包含邊框。
第2C:內容規則
內容存在于容器內部,內容包含:
標題(h1、h2、h3、h4、h5) 以段落,列表,表格,表格的形式穿插數據。
所有這些內容都是使用頁邊距垂直疊加的,但字體行高也為指定的頁邊距增加了額外的間距。我無法以一致的方式解決這個問題,因此我同時考慮了行高和邊距,創建了自己的處理堆棧的方法,以下是我的過程:
A)首先解決頭部堆棧
為了簡化這2個選項之間的行高決策,我計算了每個行高比,并決定使用等于1.5或更高的行高。對于選擇哪個行高,我仍然猶豫不決,但是在進行了視覺探索并回顧了設計團隊的結果之后,我們確定了應該采用那個行高選項。
視覺探索的過程
我從頂部的H1開始,嘗試使用2px、4px、8px等的不同間距選項。行高為36px的間距選項都很緊湊,但4px間距與行高40px感覺恰到好處!
然后我在所有標題(H2、H3、H4、H5)和列表、段落、表格之間進行了間距值0px、2px、4px和8px的實驗。2px和4px的間距相差無多,但是我們在設計團隊內部審查結果時,2px的視覺感知更好,盡可能的堅持只有一個邊際數值,因為它簡化了設計和開發過程。
標題和葉節點間距實驗
標頭堆棧 - 間距為2px和4px
B)接下來解決葉節點堆棧
EHR有4種主要類型的葉節點:
我開始為最簡單的內容類型——段落來處理間距。
每個段落內的間距
這非常簡單,只需要清空段落中的所有文本行空間,這樣兩行之間就有0px邊距。
Sketch中的排版段落(行高20px是通過視覺探索得出的,并使用WCAG SC 1.4.8進行驗證,其中規定“ 行間距至少是段落內的空間的1.5倍 ”(20/13 = 1.538)
兩個連續段落之間的間距
我第一個想法是使用行高為20px的間距,但后來看到了WCAG SC 1.4.8,其中指出 ? “段落間距至少要比行間距大1.5倍,因此一段最后一行的行高為250%,這樣可以保持距離下一段第一行間距更合適。 假設%值是根據基本字體為13px的大小計算的,我計算出兩段之間的實際間距應約為(ps - ls)= 13px,將使用margin-bottom:13px在CSS中定義。但是13px不是我們在步驟2中確定的間距值之一,因此我選擇了16px作為段落底部的邊距。
解釋WCAG SC 1.4.8中的段落間隔規則
在Sketch中多段落排版
如果對計算結果有疑問,我總是用視覺探索進行交叉檢查。與其他可能的值相比,段落之間的16px間距最佳。其實我認為12px間距會更好。但是我不想僅為這個用例為整個間距系統添加額外的值,另外我們的EHR產品沒有很多段落,幾乎沒有任何連續的段落。
列表中列表項內的間距
列表是由多個同質數據項組成的數據結構,由于列表將所有這些同質數據項組合在一起,因此列表項不像段落(它們之間有16px)那樣間距很重要。同時列表項仍然需要稍微分開,所以我嘗試了0px和16px之間的間距,我只有3個值可以試驗2、4、8,總體看起來列表項之間的間距為8px看起來最適合層次結構。
帶有標簽的2個連續輸入字段之間的間距
表單有連續的輸入字段,一個接一個地疊加在另一個之下。
無標簽2個連續輸入字段之間的間距
無標簽對于可訪問性來說并不是一個好的處理方式。然而在某些情況下,標簽最好不要顯示,這些情況是:
第3C:組件規則
組件有按鈕、輸入字段、圖標等,這些組件通常放置在一起(內聯)。此外所有的組件的尺寸均為4的倍數(也是8的倍數),因此按鈕和輸入域內部有一個24px高度的空間(加上1px 頂部和1px的底部邊框,整體高度為26px)。當組件能完美利用好基準網格,并且按規則設置間距時,整體布局才會完美和諧。
2個組件的間距
我用了一個簡單的規則,即在大多數時候任意2個相鄰組件之間使用8px間距。在少數情況下使用4px來顯示兩個組件之間更緊密的關系(格式塔的接近性原則)。
組件內部間距
我對組件內部的任何左/右填充都使用了8px。
圖標在組件內部間距
根據格式塔的接近性原則,將圖標放在組件內,將他們的間距設置為4px,而不是通常的8px。
外部圖標與組件間距
如果圖標與組件關聯組合,則其與組件間距為4px以顯示其關聯關系(格式塔的鄰近原則)。但是如果圖標與一組組件關聯,那么它與最后一個組件間距8px,以表明它不僅僅是與最后一個組件關聯,而是與整個組件關聯。
結論
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
UI走查表有什么用?
一套成熟的UI走查表能更科學更地改稿;減少設計中的反復試錯、評審交付時更言之有物;不僅僅停留于“看上去順眼”、“我覺得挺好”、“先這樣”的視覺表層。更深一層來說,走查表有助于培養設計師的結構化思維,形成一個完整的設計體系。
01.頁面要表達的意思是否正確
在設計頁面的時候,需要注意頁面要傳達給用戶的信息重點,例如本次案例的產品需求中,該頁面的功能是促使用戶快速下單,信息上則要側重于價格與優惠信息。
首屏信息是給用戶的第一印象,在用戶打開頁面,盡可能展現出更多用戶感興趣的內容, 而此次頁面需要突出促銷優惠信息,次要信息則放在后面。
02.頁面視覺重點
相信大家平時經常聽說0.618的黃金比例(斐波那契數列),屏幕方寸間合理運用黃金比例可以讓界面視覺重心更加平穩,視覺更加舒適。同時有助界面區域分割,集中視覺焦點,承載更重要的信息,讓整個界面布局更加合理。
淘寶、京東到家等成熟的一線產品黃金比例運用,o在視覺焦點區域都向用戶展示了關鍵信息。
02.元素間距符合各層級的關系
為什么頁面會雜亂無章?主要是信息一味地堆砌,分布沒有區別,但只要遵從以下方法,頁面就會清晰很多,有節奏的呼吸感也出來了。
同類的板塊不應被混亂的間距區隔開來,他們應該更集中,并且整體與別的板塊區別開來,同理,不僅僅是板塊,元素與元素之間也是如此,這樣用戶可以更加快速地看到自己想要的東西。
那么,如何更好地讓信息按照相似屬性分布合理呢?這就要利用5分、等分原則來讓分布變得更合理,假設相同板塊的間距值為a px,則不同板塊為2apx。這樣不僅在視覺可以將信息分布開來,還能讓整體的布局更加規整,不會凌亂,盡可能使用同一或者同倍數的間距,更便于開發。
案例中,相近元素的間距為16px(a px),則不同類別的元素則為32px(2a px)。
01.字體種類的控制
一個產品如果字體種類過多,會導致界面的不統一與混亂。通常字體控制盡量在3種以內,中文字體、英文字體以及特殊數字字體。如下圖:
02.字號與粗細控制
字號過多使信息失去重點,基礎字號控制在3種以內,目的在于清晰區分信息的層級。正文字號建議為28px,副文案為24px,大標題、價格等重要信息需按實際情況加大,令信息的層級區分更明顯。
加粗字體往往是整個界面的視覺焦點,重點的文本(如標題、價格)需要加粗處理,注意控制字體加粗的使用,以免造成信息層級的混亂。 下圖為調整字號及粗細的前后對比:
03.行距控制
行距太小不便于用戶閱讀,太大會顯得松散,所以控制在1.2-1.5倍的范圍是較為舒適的范圍。下圖為調整行距的前后對比:
04.字體顏色
字體主要以黑白灰為主:#333333?#666666?#999999;字體顏色深淺有序能讓信息層級主次分明,產品應該根據不同模塊以及同一模塊的層級需要調整不同的灰度值,并在產品中反復使用,統一規范輸出。
信息越重要,字體顏色越深。除此之外我們還需要注意到什么呢?也是很多剛入行的設計小伙伴很容易忽略的細節,產品的實際使用環境。比如,我們此次改版的產品詳情界面就是線上下單,線下提貨的運營模式,不僅需要考慮室內使用環境,還需要考慮到特殊的室外強光環境。結合下圖感受一下。
如何在強光環境下保證產品良好的視覺體驗呢?這也是UI走查表需要注意到的細節點:強光測試(大于4.5:1)。
4.5:1經驗數值參考前輩行業經驗總結:
https://www.sitepoint.com/making-bootstrap-accessible/
我們先觀察一組顏色對比,如下圖:
我們會發現字體顏色層級依然是深黑色、中黑色、淺黑色,相信很多設計師朋友已經注意到我們使用的顏色更深了,為什么呢?為了保證好在強光環境下的信息閱讀可閱讀性,如下圖:字體信息最淺層級,淺黑色的色彩數值對比數值都大于4.5:1。
強光測試鏈接:https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF
有細心的設計師朋友或許已經注意到色彩值并沒#333/#666/#999那么便于記憶了,為什么呢?
為了提升更好的視覺感受與界面的品質感,我們在字體顏色中采用了偏藍灰,至于為什么,大家不防給我一起觀察下圖,上圖灰色看上去略微有一些臟臟的感覺,下圖視覺更耐看、更有質感。
騰訊新聞、金色財經App中的也應用到了偏藍灰,帶來種撲面而來的清爽。
除了常用字體層級的顏色對比,在界面中針對關鍵的賣點信息還用到強調色,即品牌色
品牌色也會經常運用到特殊字體、提示文字、鏈接等等。
改版前,促銷信息缺少提示入口;改版后,以品牌色作為入口字體顏色,引起用戶注意。
01.視覺比例
由于圖標通常都是成群結對的出現,彼此之際的統一性顯得非常重要,但是常常容易被忽略,可以制定如下圖的圖標盒子來規范尺寸。
02.圖標設計要點
設計圖標時應注意基礎形狀復用,保持整體識別性。如下圖重復使用矩形、圓形、橢圓形等基礎形狀進行設計,既能統一大小又有整體感。
面性圖標
設計時需要注意挖空比例的一致性,保持圖標的整體性。如價格走勢、降價通知這一排圖標,挖空比例控制在20%
線性圖標
設計時應注意保持良好的線條粗細的統一,案例中使用2px的粗細線條重復使用,所有圖標的粗細與文字粗細一致,和諧統一
03.圖標尺寸
在app中,功能圖標大致可分成兩種:可以點擊的按鈕;不可點擊的展示圖標。
可以點擊的按鈕常用于導航欄、tab欄、操作欄(吸底按鈕圖示)常用尺寸為:48x48px 64x64px。如下如的導航和吸底按鈕都用了48x48px的大小。
不可點擊的展示圖標常用于信息展示位置(價格走勢/規格/評論等圖示)常用尺寸為:24x24px 32x32px,如下圖,評論模塊中的展示圖標使用24x24px,價格走勢則使用了32x32px的尺寸。
04.標簽的走查規范
從商業的角度,標簽是為了凸顯產品賣點,比如你在商場時常能看到“全場低至2.9折”這類的促銷信息,其實在界面中同樣也會有,目的就是為了抓住用戶貪小便宜的消費心理,對比沒有標簽的同類商品,用戶會更佳傾向與有有標簽的商品。
常用標簽樣式有三種表現樣式,面性:填充一整個色塊;線面結合:低飽和度的色塊結合高飽和度的描邊;線性描邊:1px粗細描邊;
如上圖:為展示清楚,在原來基礎上放大了1倍,運用規則與之前提到的圖標一樣,根據模塊功能的重要性去搭配,按照重要到次要的排序是:面性>線面>線性
標簽呼吸感規律:
很多初級設計師都在疑惑到底標簽文字定多大合適呢?標簽字號一般為:18-22px
以"自營"標簽為例
如上圖:外框邊距橫縱向成2倍的倍數關系,所以以后在畫標簽,只要先定好字號大小,剩下的邊框邊距就按照2倍的關系去拓展
為了確保我們做視覺稿的時候易于文本的閱讀我們通常會用到一些配圖,而這些配圖通常也影響著我們整個界面的美觀度,一個優秀的設計師在設計作品時都會特別的注重圖形與圖象的比例,圖片的選取當然也是重中之重,那么我們在項目中應該如何選取圖片并且正確的使用圖片的比例呢?
01.圖片使用的規范
第一點:首先就是要做到讓圖片的背景保持統一并且做到干凈整潔
第二點:圖片主體的比例大小跟其他圖片保持統一避免出現有些圖片展示局部有些圖片展示整體
02.圖片模塊的常用使用比例
UI設計中圖片的比例會比較的多常用的有下列幾種
1:1,這種比例比較適用于電商,它可以讓商品圖片展示最大化。也是目前電商最主流的圖片使用尺寸。如下圖:
16:9,這種比例比較適用于視頻,這是標準的人體工程學比例,根據人體工程學家的研究發現人的兩只眼睛的視野范圍并不是方的,而是一個長寬比例為16:9的長方形,所以我們看到的視頻比例通常會采用16:9。如下圖:
4:3,這種比例應用于新聞類APP比較的多,它源自于一些微小型相機最原始的尺寸比例,不需要進行過多比例的裁剪,應用起來比較方便,對于需要展示大量的圖片信息類的產品來說特別的適用。如下圖:
如果你還是不知道如何去使用尺寸,那么你可以直接查找相關競品進行設計。
壓軸給大家帶來一個小驚喜,我們整理了一個較為完整的設計走查表,希望在實踐中能夠幫到大家。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
上周和小伙伴一起翻譯了一篇 medium 上點贊量超多的文章(8.1k贊),該文作者在電子產品的界面設計領域有13年的從業經驗,也經歷了從架構師到用戶體驗設計師再到如今的產品設計師的多次職業轉換,文章主要是講他對用戶體驗設計的犀利吐槽,以及對產品設計所代表的工作方法的無限看好?;蛟S觀點上并沒有什么新意,但是,就像某大佬說的,設計是對混亂的馴服。想要馴服混亂僅憑理論套路是遠遠不夠的,而設計師真正的價值或許也就在于此:投身于未知與混沌的灰色之中,并且還要從中分出黑白。
那么為什么我要翻譯這篇巨長的文章呢?就我個人而言,單純很喜歡作者傲慢中帶著犀利的風格,就像看一篇文字版的吐槽大會般有趣。我在翻譯的時候加上了自己的思考和看法,所以,文末也留了 medium 的原文鏈接,可以去查看作者的本意,并觀看其中的演講視頻。
這是關于我從架構師轉變到用戶體驗設計師的一段經歷,以及我是如何看待行業現狀的。
十年前的某一天,我決定要把我的職業從架構師改成用戶體驗設計師。我記得當時很多可用性專家、架構師、界面設計師、交互設計師對我說:這只是潮流而已,「用戶體驗設計」這個表述并不,簡直就是胡說八道,體驗怎么可能被設計?
然后在去年,我又突然決定把我的職業從用戶體驗設計師改成產品設計師。同樣的,一群用戶體驗設計師又來對我說,這只是潮流而已,用戶體驗設計師和產品設計師之間并沒有什么本質的區別。
但是,對我來說,它們是不同的。在我看來,產品設計更加的謙虛真誠。我覺得這是用戶體驗設計師不具備但最應該學會的:謙虛務實。
我不是在勸你像我一樣改換職業名稱(坦白地說,你最好別這么做),我真的一點兒也不在意。我只是想告訴你,我決定轉變的原因,以及我是如何看待行業現狀的。
很膚淺的話題,聊職稱大概是世界上最無聊的事兒了,但是作為設計師們,我們又確實很喜歡討論它?;蛟S,這次我們可以聊的更深入一點。
我一直很喜歡 Alan Cooper 提出的這個詞:交互設計師(interaction designer)。我認為它很地抓住了這項工作的本質。但是早在十年前看來,這個詞的定義就已經很狹隘了。數字產品的設計師們希望工作能觸及到更多的內容,而「用戶體驗設計」似乎就承擔了這個「需要觸及更廣泛內容」的責任。
它確實抓住了這個需求,現在 UX 這個詞廣泛流傳,每個人都在使用這個縮寫,但問題是每個人對它的理解是不同的。所以,直到現在它也是個令人疑惑的概念。
在Peter Merholz 的一次訪談中,Don Norman 對創造 UX 這個詞的初衷做了如下解釋:
我發明了這個詞是因為我覺得人機交互和可用性這兩個詞兒太狹隘了。我想要創造一個可以覆蓋人們體驗各個方面的系統,包括圖形設計,界面,體感交互和這個系統的使用手冊。但從那之后,這個詞就開始廣泛地流傳,慢慢地失去了它本來的意義。
如今它偏離本來的意義越來越遠,以至于 Alan Cooper 先生說:根本沒有用戶體驗設計這回事。
在我們盡可能擴寬工作邊界的努力之下,我們把 UX 這個氣球吹得快要爆掉了。UX 現在承擔了「設計不同觸點的體驗」的任務,包括組織轉型,制定策略,改革創新,市場營銷,設計從 app 到廣告、服務、設備、地點、事件,甚至公司文化在內的所有事情。
或許用戶體驗確實應該做到這些,但是問題是,沒有一個用戶體驗設計師能一個人把所有的這些事情做好,要創造一個復雜的產品,你需要的是一個由不同領域專家組成的團隊。
我不得不說很多 UX設計師真的是眼高手低,他們根本不具備足夠的技能或者經驗去支撐他們的野心。
我同時也負責招聘的工作,大多數申請 UX 這份工作的求職者可以分為以下幾類:
當然,以上只是一種簡單的歸納,但是從我的觀察來看,很多做 UX 的都可以歸到這三類人當中,因為真的很少見到那種既懂戰略又會戰術,既有創造力又有執行力,既了解商業又懂設計的人才。
UX設計師日常做的事情以及他們對商業的價值根本配不上他們的自我認知:「用戶體驗設計很重要 」。
用戶體驗設計實際上并不像很多「什么是UX」的文章寫的那樣是所有事情的中心。我推薦你去看Paul Addams在UX London 2018上的優秀演講——《The end of Navel Gazing》。標題「用戶中心論的終結」很好地表達了這個意思。
我觀察到的另一個現象,是關于用戶體驗設計目前的狀態的。UX設計師們每天都會發表數不清的文章,它們大部分都是關于研究工具以及方法論(例如用戶畫像,用戶體驗地圖,原型制作工具,用戶研究方法等等),各種教程,無關緊要的圖形設計趨勢,或者用戶界面細節。
Fabricio Teixeira 和 Caio Braga 寫了一篇優秀的文章來說明這些理論的狹隘之處:
https://essays.uxdesign.cc/state-of-design-publishing/
然而,這些我們經常討論的東西,對于處在殘酷商業競爭環境下的產品設計團隊來說,并沒有什么用。因為計劃與管理實際的產品開發進程和理想的「Design thinking 五步法」之間并沒有太大的關系。
整個 UX 行業好像對商業這部分都沒什么興趣,也難怪,「用戶體驗設計」這個名字就暗示了他們只關注用戶。商業是別人的事。
也難怪會冒出 UX 的忠實捍衛者們了,如果你膽敢不同意他們的信仰,他們就會把你的心扯出來。
僅僅只要說一句:用戶研究不是總是被需要和有實際意義的。他們就會告訴你如果你不會用戶研究,你就不是一個合格的用戶體驗設計師。如果你個人并不是很喜歡一些方法論,像用戶畫像或者其他,你最好趕緊默默溜走。
可悲的是,UX們總是想成為最有創新能力的人。但是我認為他們并不是。因為,創新力需要嘗試不同的工作方法,考慮新鮮的想法,要求與眾不同以及靈活多變,敢于實驗,勇于實踐,并擁有商業頭腦與落地思維。想要成為真正的革新者,需要的是自己去開創自己的道路,去突破規矩,去冒險。而不是重復說那些所有人都在說的簡單的陳詞濫調,遵從那些輕而易舉的方法指南。我覺得 UX設計師整個群體都搞不清楚地圖和實際道路,模型(或其他噱頭)和現實之間的差別。(只有這些「革新者」的想法才很容易被預測:因為他們所有人都讀一樣的書,說著同樣的話。)
我從事數碼產品的設計有13年了,現在我不覺得我和大多數的 UX設計師之間有什么共同點。我覺得我已經超越了用戶體驗設計。我跟產品經理或產品需求方之間更為投契。
Peter Merholz 在他的一次演講中說過,用戶體驗這個行業的出現是因為產品經理對用戶體驗缺乏考慮,我同意這種說法。
數字產品就是我現在正在做的,像網頁,app,界面。我的目標是為我的客戶創造一個成功的產品,一個會幫助他們賺錢或者省錢的產品。可用性和用戶體驗只是實現這個目標的一部分,它們很重要,但是說實在的,并不是最終的目的。我不會像大多數的 UX設計師那樣不切實際的浪漫主義。
我也需要為我自己和我的公司賺錢,所以我要擅長規劃一個有效率的設計流程,估計好預算,有條有理地和客戶進行合作,銷售與推廣我的工作,招聘人才等等。
我知道我很擅長數字產品設計,但是我可能并不擅長做所有類型的設計。這就是為什么我更喜歡「數字產品設計師」這個頭銜的原因了。
我喜歡它的點在于,它更聚焦于產品而不是用戶。它把我的工作放在了資本市場的背景之下。產品需要對顧客有用,但是也需要切實地有利可圖。
對我來說,無論它是什么,聽起來,「產品設計」比「用戶體驗設計」都更加的落地。產品設計更容易被所有人理解,甚至你媽媽也能懂。它不需要太多解釋。用戶體驗只是它的一部分,但是從另一方面講,比起想要解決世界上所有問題的萬能藥UX 來說,產品設計這個說法更加的謙虛。
現在我大部分時間依然是在做交互設計和信息架構這種傳統工作。我大部分的精力也都是花在制定策略,進程管理和設想概念的層面。但是我也正在帶上許多的帽子:決策者,界面設計師,架構師,文案,創意總監,項目經理,產品需求方,用戶研究員,測試人員。總之,哪里有需要哪里就有我。
當然我需要和很多人(他們是各自專業領域的專家)一起合作來實現我的愿景,然后把它迭代變得更好,更完善。技術專家,開發者,圖形設計師,內容設計師,項目經理,甚至律師等等。最后的用戶體驗其實是很多這些人的工作共同作用的結果。
用戶體驗是很多人工作的結果,是一個產品或者服務生產出來的,并不是一個職位的描述。
我會把產品設計師定位為這樣一個角色:他們是那些為產品功能和形式的最終呈現負責,并能夠以任何可能的方式對設計流程以及產品的發布進行規劃和優化的人。(如果你還把產品設計僅僅看作是 UI/UX 的另一個名字,這對你毫無幫助)對于很多有經驗的 UX設計師來說,并沒有什么新鮮的,但是產品設計確實和 UX 不同。
我看到如今,越來越多的有經驗的 UX設計師稱自己是產品設計師了,所以,也許這是一個潮流吧。又或許是某種原因?
Andy Budd,一個有著很棒的見解的家伙,我一向很尊敬他,最近他發了一個推特說:UX就像爵士樂,產品設計就像朋克樂。
好吧,我的看法跟他完全相反。打比方說,如果你想成為一個 UX設計師,你現在要做的只需要去上個周末課程,學習設計過程的5步法以及5個方法論,像用戶畫像,用戶體驗地圖,愿景圖,你就可以開始干活兒了。
但是成為一個產品設計者,你需要把產品交付給市場的實際經驗,這非常的難,因為經常是一團混亂,復雜的過程。產品設計就像自由的爵士樂??赡苈犉饋砘靵y嘈雜,有一點像朋克樂,但是想要把它玩好,你需要很多的技能和經驗以及音樂理論的掌握,也需要一些即興創作的能力:改變規則甚至是反對它們。更不用說,在團隊中,你需要成為整個團隊工作的主導。
無論你想叫自己什么,無論你有多大的夢想,但,也要記得保持真實和謙卑
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://www.syprn.cn