92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

首頁

UI設計師除設計外所需要具備的能力

用心設計

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

 

我們已經或多或少看過一些優秀作品,也知道了一些設計方法和技巧,了解到了一些相關的理論知識,自己也做過一些項目或者是練習,總體來說都掌握了一定的設計能力;但是設計師想要擁有更多的資源(指薪資、工作機會等等)或者是想職業進階,除了一定的設計能力之外是遠遠不夠的。

設計師還需要掌握更多的能力,才能讓自己成長提升,并且擁有他人無法取代的價值。我通過自己的經歷和整理收集,發現目前如今不同階段的設計師對待同一個問題不同的角度以及特征,如下圖所示:

不難發現,當大家還是初級設計師的時候,剛剛接觸設計行業,我們更多的是去觀察、學習、臨摹一些“好看”的作品,熟練地使用設計軟件和提升設計技法,最后的是自己做出來的產品是否漂亮美觀,最重要的是客戶/老板是否會買單,而自己無法清晰地定義自己設計的產品價值,也不能很好表達出自己的想法和觀點。所以產品走向會根據老板/客戶的水準來定義,輪到自己表達只是支支吾吾,最后只是做為執行無休止地改改改。一切由老板/客戶說的算,無法清晰地了解自己產品的定位,缺乏表達觀點的能力,缺乏一定的審美,作為執行角色無休止加班成為了初級設計師最大的痛點。

而經過一段時間的學習和工作后,逐漸轉型成為中級設計師后,有了一定的設計技法和軟件使用熟練度,有了一定的審美和視覺表現能力,平臺規模合作團隊也逐漸變大,基本能滿足老板/客戶/業務方提出的需求。開始學習一些設計相關理論,開始拆解自己或別人產品的交互架構,更多地開始關注用戶體驗起來,也會融入品牌元素到自己的產品當中,為自己的產品做情感化設計和制定設計規范,會組織一些專業語言和業務溝通以及陳述自己的產品。但是如何從眾多的設計方案中找到最優的方案來解決問題,如何更多地體現產品的價值,產品利益鏈如何形成商業閉環,如何在團隊/設計圈體現自己個人的價值,如何提升自己的個人影響力,成為了中級設計師這階段的痛點。

通過三年五年的沉淀,成為高級設計師后,形成了自己獨有的一套方法論和設計思維,能熟練地拆解每款產品和定義產品,視覺表現層已經完全能駕馭,能清晰地闡述自己的設計思路和結論,產品用戶體驗層也有了一定的經驗和方法,在團隊中或者設計圈有自己一定的個人影響力,更多地會在工作中思考產品帶來的社會價值和商業價值,會用不同的思維去思考產品的各個維度,找到最優的方法解決問題,會把固有的利益鏈轉換成商業閉環,提升用戶轉化率等等。而這階段的設計師的主要痛點就是面臨著團隊管理和溝通,朝著資深設計師和設計專家轉型,以及如何為平臺帶來的利益價值考核等等問題。

資深設計師或者設計專家這里不談,因為這階段所思考的問題大都和設計無關了。通過上述不難發現,每個階段的設計師都有各自的特征和痛點,雖然其中都包含著設計相關的能力,但是隨著階段的進階設計相關的能力占比逐漸變少,更多的是其他的能力增長,所以設計師除了設計以外其他能力的重要程度顯而易見,那么我們來看看除了設計以外,設計師應該掌握其他什么能力。

思考能力(Thinking)

思考能力作為首要的能力,不僅僅是設計師,其他職業一樣需要這個能力,這里所涵蓋的面太廣泛了也說不了,這里主要針對三點來講:核心競爭力、批判思維和分析能力。思考分為兩個層面:自我層面的和業務層面的思考;自我層面的思考就是要通過深度剖析自我,發掘自己處于哪個階段,有什么長處和不足,自己想要什么,需要往怎樣的方向發展;而業務層面的則是要需要思考業務產品的結構框架、用戶體驗、商業價值等等等等,前者更加關注自身的成長,后者更加關注業務的成長。

· 核心競爭力

核心競爭力就是有與別人不一樣的競爭力,想要做到別人無法替代你的地步,就要有自己個人核心的競爭力。如果你會做一張 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》、《以匠心 致設計》等等,將學到的分析方法代入自己的產品或作品中,逐漸分析能力就增強了。

規劃能力(Plan)

規劃能力是日常工作生活中所需要掌握的能力,主要講業務規劃和職業生涯規劃,業務規劃能力應對的是我們工作中處理業務所需要具備的能力,而職業生涯規劃應對的是我們整個人生職業生涯規劃的能力。掌握這個能力后前者會給我們帶來業務處理效率上的提升,后者給我們帶來整個人生有益的好處,所以這個能力非常重要。

· 業務規劃

很多時候我們還在有條不紊地處理某個需求,心想著下班去吃個飯買水果回家洗澡睡覺的時候,突然來了一個緊急的需求,就把我們整天的計劃給打亂了,火急火燎地處理完這個需求,然后又把之前的需求做了,最后加班改改改導致整個計劃泡湯了。工作中遇到這樣的情況很多很多,處理方法有很多種,最經典的就是四象限法則,把事情的緊急重要程度分為:重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個象限。

很多時候都是道理我們都懂,可是一遇到情況依舊手忙腳亂,根本原因是沒有認真地把它代入自己的工作生活當中。畫一個象限表,把自己今天所要處理的事務陳列出來五分鐘都不需要,一開始可能因為事情不多就沒堅持下去,一旦養成習慣后,將來遇到多種緊急情況突發的時候就能認識到這個習慣給你帶來的好處了,所謂養兵千日,用兵一時就是這個道理。

在做業務需求的時候,可能會碰到有些需求價值高,有些需求價值低但又很緊急,不知道怎么處理之間的關系,我們依舊可以套用四象限法則來制定一個四象限表:價值高且緊急、緊急但價值低、價值高不緊急和價值低不緊急。什么是價值高的需求呢,就是能讓你有充分思考和分析的需求,比如某個頁面的改版;價值低的需求則是相對不怎么需要思考和分析的需求,比如根據已有的規范改個顏色之類的。在時間的優先級前,價值高的需求大于價值低的,最后剩下的就是價值不高且不緊急的。因為我們無法拒絕需求,需求來了肯定要是做的,工作不是愛好可以有多種選擇性,但我們要學會將需求分解成不同類型的,對自己有成長沉淀的需求那可以作為最高優先級去處理,留夠充裕的時間去思考分析,然后沉淀經驗穩定提升。

· 職業生涯規劃

這個在大學期間就學過相關的課程,只不過當時并沒有太深的感觸,而是等工作以后才知道這項能力的重要性,它相當于關系著你每個階段的里程碑,當成游戲中的成就任務也不為過,還是自己設定的成就任務。某個階段想要達成什么樣的目標,想要獲得怎樣的成就,都是要自己一步一步慢慢規劃并且完成出來的。

因為我遇到過幾個非常努力的人,努力到讓人心悸的地步,每天除去吃飯睡覺工作時間就是在努力學習,到最后還是很迷茫,不知道做什么,不知道如何體現自己的價值。這類沒有目的的努力的人是很可怕的,他們努力得沒有錯,但是這樣下去沒有成效的努力會讓他們覺得努力并沒什么用,然后逐漸開始產生抱怨、泄氣和放棄等負面情緒。

舉個例子來說明:如果你剛畢業,給自己制定的長遠的職業生涯規劃是在工作3~5年后進到大廠工作提升自己,那么所拆分下來就需要一些項目工作經驗和優秀的作品,再拆分下來就是如何做出優秀的作品,細分到最后就是作品當中的元素,比如圖標排版布局之類的,那么就制定一段時間內的練習就按照各類元素去做,比如圖標畫兩個星期,APP 設計排版布局練習兩個星期,插畫練習畫兩個星期,這樣堅持下來就組成一個完整的項目作品了,以此類推。有了規劃目標并且在自我驅動的推動下,逐漸實現自己的職業目標。

執行能力(Execute)

執行能力是指自我在工作&學習中執行的能力,執行能力為一個設計師最主要的核心技能,一切的能力都凌駕于這個基礎之上;哪怕你再能說會道,能賦予你的設計各種價值,能給予你的設計各種環境,但這些都是第二步,第一步就是你的設計表現達到期望值,如若第一步稿子都不好看,那么沒人愿意會聽你敘述的。前文已經提及到了,設計師在初級至中級階段的時候大多數注重的就是表現手法,如同學說話一樣,表現手法可以看作是漢語拼音,然后才是組成一個個字,最后組成一句完整的話語。

· 自我執行力

提升自我執行的能力我大致分為兩個步驟:看和做。

首先先來說看,看其實是提高自己審美的一個過程,通過看一些平臺網站的優秀設計作品,久而久之自己的審美能力才會提高,然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或學習時間,通過瀏覽設計網站采集學習一些你覺得好看的作品;采集是一個很好的習慣,我覺得是每個設計師必須養成的習慣,把自己平時覺得好的表現形式收集起來,等到某一天需要用到的時候,腦海中對當前場景會有一定的印象,再根據印象去尋找采集到的作品,能很大程度上節省自己腦爆的時間,哪怕沒有采集或者文件丟失,自己的腦中大致也會有一個雛形方向。而帶有目的性地看是指針對某一個模塊去搜集整理,比如今天我需要做一個關于內容的模塊,那么我就會去尋找一些做內容的產品設計,搜集到的各類關于內容的表現手法,然后結合自己的經驗和分析,找出最適合自己產品的一種。

僅僅看是不夠的,在看過之后我們需要動手嘗試才能算真正地沉淀自己所看到、學到的東西。做設計最忌諱的就是“眼高手低或者眼低手高”這種狀態,有了審美但表現手法跟不上,或者說表現手法有但是審美跟不上。一定要在自己吸收了一定的審美后,通過自己的嘗試去做出來,才能真正的沉淀到自己的大腦當中,變成自己的表現手法之一。最后通過大量的積累,結合對商業需求的判斷形成設計策略,才能從容應對不同的產品需求,哪怕你今天做金融相關的產品,還是明天做電商的產品,后天又改做工具類產品,一旦形成了自己不同的應對策略,才能做到真正意義上的游刃有余。

很多時候我們只關注到魚的大小、魚的肉質是否鮮美那20%層面的東西,往往忽視了80%最重要的捕魚技巧和方法;看到的只是產品是否好看,交互是否流暢,體驗是否良好,沒有往更深層次地去想這個產品的商業背景是什么,設計師為什么要這樣設計,如果換做自己的話會去怎么做;畢竟我們所做的一切訓練、思考都是為了更好地為工作服務,就如同脫離了商業背景以后,有些設計就只是單純的炫技,并沒有解決問題的價值,而設計師的工作核心就是解決問題,所以我們要結合作品的背景、價值等因素,去看、去做、去學相應的表現手法才是自我執行的核心所在。

表達能力(Express)

表達能力是設計師除去執行能力外第二重要的能力,小到平日里的溝通對接,大到述職晉升面試,都離不開表達能力的支持。有些設計師經常面試怎么都過不了關,我本以為是作品集的問題,可是看完之后作品方面完全沒有什么問題,具體了解后才知道是在面試過程當中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導致表達斷斷續續不順暢,面試官就會覺得這個人不靠譜然后 PASS,明明做圖很優秀卻輸在了表達上,這種情況就很憋屈。在廣告公司中,一個 LOGO 或者廣告視頻往往只是贈品,出售的卻是這個品牌VI的故事;如果一個設計師不懂得怎么闡述自己的業務,不懂得怎么推銷自己的方案,不懂得拓寬自己的個人影響力,就單純的只會執行作圖的話,那么這名設計師是不合格的。網傳有一個段子“一個公司的工資排名規律:用 Word 的不如用 Excel 的,用 Excel 的不如用 PPT 的,用 PPT 的不如講 PPT 的,講 PPT 的不如聽 PPT 的,聽 PPT 的不如聽匯報的,聽匯報的不如決定的,決定的不如簽字的”,由此可見表達能力在職場中的重要性。

· 業務表達

業務表達是指在自己工作的過程當中,對自己的設計方案進行闡述。大部分設計師會遇到一個困擾,當設計稿做完以后就不知道怎么去表達自己的設計理念,被業務方/面試官/老板提出質疑時,比如:“你這產品的設計為什么要用紅色?”、“聊天信息這塊兒為什么要用小氣泡的樣式?”,往往不知道怎么去說,有一種當時就覺得好看所以這樣做了,也沒有去想那么多的感覺,或者其他優秀的作品/競品是這樣做的,我也就這樣做了;那么結果往往就是自己的專業性遭到質疑,然后轉變成業務方/老板進行設計主導,形成“改來改去還是第一版好”這樣類似的惡性循環中。

那么如何提升自己的業務表達能力呢?首先設計師要提升在設計領域的專業度,通過學習吸納設計相關的知識,然后代入自己的設計當中去試著闡述設計稿,準備工作先做到位,收集相關的數據,掌握相對應的設計理論,先說服自己再去說服別人。比如:“通過色彩心理學得知,紅色能帶給人興奮、激動、熱情等積極情緒,而我們產品所需要透出的氛圍是熱情的、積極向上的,相對應地激發出用戶的正向情緒,所以我這里使用紅色?!?、“根據近半年數據研究得出,產品聊天信息模塊使用過程當中女性用戶占總用戶數的85.9%,而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好,通過 A/B 測試結果得出,使用小氣泡樣式后數據上漲了15%左右,所以聊天信息模塊整體改版成小氣泡的樣式?!?

通過自己前期的準備(設計理論知識補充、用戶調研、數據測試等),將自己的設計理念表達出來,主導整個設計的方向,必要時可以理性地堅持自己的設計方案,畢竟無論是老板還是業務方,出發點都是希望自己的產品能做到最好最完善,只要你給出數據支撐和專業性的建議,他們一定都會采納接受的,而最后你的能力和專業性也得到了對應的認可。

· 書面表達

我本人是強烈建議在能力達到一定程度的時候,通過寫作來檢視自己成果的。因為往往很多東西自己是明白的,但是寫出來讓其他人看懂是另外一種能力了。自己一段時間的職業經驗總結、對設計的見解看法、自己獨特的設計思維、一本書的讀后感等等都可以通過書面表達出來,某個知識理論難的不是學習,而是將它教授出去,因為只有你想要把某件事說明白,闡述得其他人都能看懂,那么首先你要對這件事理解得很透徹,然后通過自己的經驗和見解,轉化成通俗的語言說給別人聽。最好的狀態就是與你同樣級別的人你能與他用專業術語對話,級別比你低的人你能把理論轉換成他能聽懂的語言進行交流,這樣才算是對理論概念理解透徹到位。

大家也明白,學習最有效的方法不是輸入而是輸出,設計也是一樣的。在學習某種理論方法后,通過書面表達出自己的見解和想法,并代入到相應的例子當中,做到舉一反三才能算是真正的學到了這個知識點。

· 述職

述職一般出現在晉升報告或者面試當中,“諸侯朝于天子曰述職,述職者,述所職也?!笔雎毧梢哉f是工作報告中的總結性報告。向自己的老板述職是為了升職加薪,向面試官述職是為了獲取更好的工作機會;工作成果有了,但是述職做不好的話,在老板/面試官眼里你就做了無成效的工作,述職沒有想象的那么簡單,但是也沒有那么難,很多人都會經歷兩個述職的誤區,這些誤區我經歷過也看到過,所以總結出來警醒大家。

一、把述職當作流水賬

把述職當作流水賬是很多新人容易犯的錯誤,當述職的時候,有的人就會陳列出自己今年做了多少多少工作:“我今年改版了 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 模型在生活工作中去練習表達(給出解決方案)。

生活能力(Lives)

最后是生活能力,設計不是工作的全部,工作不是生活的全部,我們應該過好自己的生活,產品設計都是從生活中獲得靈感和啟發的,我們如何對待自己的生活,我們就會得到怎樣的反饋。多陪伴下自己的家人、培養一個興趣愛好、保持學習新鮮事物的動力等等,成為一個有趣的靈魂。往往設計師能從多樣化的生活中發現靈感和啟發,也能從生活中找到不同用戶的痛點和感知;如何做一名好的設計師,就是帶著同理心去做設計,如何帶著同理心做設計,就是將自己當作用戶,而用戶是融入到生活中的。下面我就來例舉兩個通過生活中的啟發改變產品設計的例子。

· 用戶擁有感

在購買星巴克的時候,為什么服務員要把顧客的名字寫在杯子上呢?難道僅僅是為了分辨嘛?像其他奶茶店一樣貼一張打印好的便簽不就好了么?去宜家購置家具的時候,為什么要讓顧客自己親手組裝家具?可口可樂為什么可以定制自己城市的易拉罐?因為這一切都是要給用戶塑造擁有感,人是一種很不理性的生物,只要先拿到一個東西,就會覺得自己擁有這個東西,就不想放掉它了,這就是擁有感最根本的示范。從心理學的角度來說這被稱為稟賦效應,意思就是我們對于自己所擁有東西的價值往往會看得更重。這就是為什么小時候玩的玩具、收集的畫冊、穿的衣服都已經沒什么用了,我們還要留著當紀念的原因。因為我們的人性對于擁有感非常執著,對于自己得到的東西非常迷戀,當我們覺得要失去它的時候,會有一種損失感,覺得很不舍,會覺得心里很難受,這就是稟賦效應在我們身上發生了最明顯的效果。

而這樣的營銷策略被用到產品設計當中,例如前段時間很火的軟件 Zepeto,每個人都不一樣的生成圖片洗刷著我們的朋友圈;例如每年年末的賬單、網易云音樂總結等等,賬單它只是一份賬單,根據不同用戶生成不同的賬單,也就賦予了不同的意義;又例如各種 H5 性格測試生成的分享卡等等,這些都是產品設計中從生活中營銷案例中汲取經驗的體現。

· 線下導購轉線上

每當我們去到商場線下商店的時候,導購員和我們素未謀面,但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產品,然后向我們推銷對應的產品,如若剛好觸動我們的需求,于是我們就會發生購買這個行為。生活中線下導購的方式也被運用到線上導購的產品中,同樣平臺和用戶素未謀面,可是可以通過掌握大數據,分析用戶近半年、近一個月的購買和瀏覽商品的數據,結合相對應季節等因素推送給用戶所需要的產品。比如我平時經常瀏覽一些潮牌個性的衣物,現在正值冬季,想買一件冬季穿的棉衣,那么當我打開淘寶的時候,系統會推送一些潮牌大衣等冬季衣物在首頁,我正好有這個需求又符合我的口味愛好,自然而然就會點進去購買了。

有一條創業準則是這樣說的:“如果有點兒閑錢,還有點時間,但又找不到商機,最好的辦法就是去鬧市、電梯、小區人流量最高的那個大門口,端杯茶,靜靜的聽人們抱怨?!保雀琛⑻O果公司的設計思維首當其沖的就是帶著同理心去設計、去制定設計策略,同理心來源于生活,而這一切只有設計師把自己的生活經營好,才能從當中獲得啟發和感悟,然后代入自己的設計理念當中,設計出真正能根本解決問題的產品。

其次偶爾會從網上看到或者聽說 XX 設計師猝死,XX 設計師檢驗出 XX 疾病等等,每每看到此類消息都會感到痛心,工作不是生活的全部,如果連自己的工作和生活都處理不好的話,那么說明這個人生活能力真的很糟糕。如果一個人整天筋疲力盡打不起精神,那么他的工作會做得好嘛?所以在這請求大家合理安排好工作時間,勞逸結合,多鍛煉身體,多花些時間陪伴父母、家人,這樣才能帶著健康的身心去工作,從而取得更好的工作成果,形成一個良性的循環。你怎樣對待生活,生活就會怎樣對待你。

總結

以上是我總結的除設計之外設計師需要掌握的技能,如果將這些比喻成大樹的話,設計能力是大樹的根部,是設計師立足的根本;而執行能力則是這根樹的枝干,是支撐設計師全部的基礎;表達能力是樹枝,撐起設計師的整個世界;思考能力則是樹葉花果,是設計師綜合的產物;大地就是生活能力,當設計師的產物(物質、地位等)“落地”時,滋養著大地,大地越“肥沃”,越能催生出茂盛的枝葉;而規劃能力就是一位辛勤的園丁,什么時候需要澆水,什么時候需要修剪枝葉,都是由園丁來承擔。

想要跑贏別人,首先得跑過那個跑得最快的自己。





藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

UI中如何做好產品需求分析

用心設計

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

 


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

設計中的5大漸變趨勢,以及如何有效地使用

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

五大漸變趨勢是什么?如何在你的工作中有效地使用?

Image title


你可能已經注意到,在17、18年的時候,漸變在印刷和web設計中的使用的越來越多了??雌饋碓O計行業已經接受了這種趨勢,這種漸變過渡在形狀和顏色上只會越來越動態。如果你不知道如何將彩色的形狀和背景應用到你想要通過設計傳達的信息中去,那么使用彩色的形狀和背景是一件棘手的事情。


5大漸變趨勢是什么,如何在你的工作中有效地使用漸變呢?


1、 雙色版的漸變

Image title


雙色調漸變是兩種顏色,它們之間有平滑過渡。沒有更多,沒有更少。使用Illustrator中的漸變工具創建這些類型的顏色過渡非常簡單。當為Duotone漸變組合顏色時,沒有規則。當你混合3種顏色或更多顏色時,規則就會出現.但是兩個,你可以做任何你想做的事情。這一切都取決于你對設計本身的意圖。如果你需要強大而大膽的信息,那么你可能需要考慮使用更鮮明,更高對比度的顏色組合。另一方面,如果你希望采用柔和,更安靜的方法,則使用較少飽和的顏色就好了??茨阍趺从昧?



如何使用雙色版的漸變?


你可以像Duotone Gradients一樣有創意。這種類型的漸變最廣泛使用是照片疊加。漸變主要用作內容的簡單背景。以下示例是由JessicaH?gg和Stink Studios為Spotify創建的此類案例之一。


Image title


Duotone Gradient的另一個例子是由Barthelemy Chalvet為AgenceMe創建的家庭導航設計。在這里,我們再次將Duotone視為內容的背景。內容包括文本和插圖。但是,圖中使用的顏色非常謹慎。插圖主要是淺色調,只是一些色彩鮮艷的細節,與背景雙色調(溫暖)相反(冷)。


Image title


總而言之,使用雙色調漸變趨勢的最安全方法是將漸變背景與黑白照片混合,或將它們作為照片疊加層應用。如果你將它們與其他顏色混合,請確保不要過分。多種顏色在設計中可能非常出色,但如果匹配不當,它們也會引入混亂和混亂。如有疑問,請使用較少的顏色。在大多數情況下,少即是多。


Image title


2、半透明漸變


前五大漸變趨勢包括半透明漸變。這些類型的漸變在它們中具有褪色效果,它們在一端具有全色調,而在另一端具有0%顏色不透明度。


Image title


這些半透明漸變可以是雙色調甚至是三色調漸變,但它們總是以透明度結束或開始。



如何使用半透明漸變?


使用半透明漸變的一種方法是將它們與其他漸變形狀和背景重疊,或者作為照片上的疊加層。下面的示例顯示了Studio-JQ制作的藝術作品


Image title


在這里,我們可以看到在三色漸變圓上使用一個半透明形狀。微妙的半透明形狀在漸變圓形前形成霧氣氛,就像褪色的月亮,簡單而有效地使用透明效果。


在Magdiel Lopez制作的海報藝術品中可以看到混合了攝影和紋理的半透明漸變的另一種奇妙用法。


Image title


三、網格漸變


網格漸變是在Illustrator中使用網格工具制作的漸變,因此是標題。這種類型的漸變需要更多的技巧來制作。通常它們將多種顏色混合在一起,這應該小心生產,因為某些顏色不能很好地匹配。除了將多種顏色混合在一起外,它們還形成一種類似于液體的紋理圖案,使其具有更加動感的外觀。


Image title


到目前為止,您可能已經注意到所有漸變如何與黑白照片完美配合,為他們提供增強色彩強度所需的對比度。它還消除了設計中“過多”的混亂和感覺。


如何使用網格漸變?


網格漸變可以用作獨立模式。由于它們通常具有動態外觀,因此可以作為簡約模式應用,并輔以創意印刷術。


Image title


使用網格漸變進行品牌推廣也越來越受歡迎。這種類型的使用可以在下面由Focus Lab制作的簡約品牌項目中看到。


Image title


4.漸變模糊


這是事情變得有趣的地方......。介紹漸變模糊!我相信你已經看到了這些有趣的外觀,有一種強烈的“藝術”感覺。它們現在是Top 5 Gradient Trends的一部分。


Image title


如何使用漸變模糊?


它們似乎經常被用作海報設計的一部分。抽象的偉大之處在于它可以用來描述各種情感和抽象概念。它可以說明聲音,光線,宇宙,幸?;虮瘋?。我們根本不知道如何描述這些單詞中的許多單詞,但精心挑選的模糊彩色形狀可以幫助我們。


讓我們看一些使用漸變模糊的示例:


Image title

Image title


5.漸變球體


最后的漸變趨勢是漸變球體,具有強烈三維形狀的網狀圓圈,提醒我們在行星和氣泡上。


Image title


如何使用漸變球體?


Gradient Spheres在應用程序和網頁設計中占據了一席之地。由于它們與行星類似物體相似,因此它們通常用于技術未來類型的項目中。例如,Jiyoon Kim使用Gradient Spheres設計一個具有輕盈未來感的創意手表UI。


Image title


Mirtho Prepont為Asana制作的海報設計中使用的Gradient Sphere的另一個創意示例:


Image title



寫在最后


如果你使用漸變的照片,第一步應該是選擇正確的照片。最好的選擇是具有清晰焦點的照片,如果可能的話,焦點周圍沒有其他任何東西。值得花時間的第二件事是照片的顏色。如果顏色與你的漸變無任何關系,最安全的做法是將照片切換為黑白模式。

但是,有時可以通過在Photoshop中使用“顏色飽和度”工具或“顏色平衡”來調整顏色。這正是我在這個例子中所做的。第三是選擇漸變形狀和背景。


選擇正確的漸變對象時,請確保它們都具有相似的色調。在我的例子中,我使用藍色/紫色物體與粉紅色/黃色物體形成鮮明對比。這些都是我需要的顏色。任何更多的東西,組成會感到混亂。雖然很容易穿過線,所以如果你不確定,只需要減少顏色和減少形狀。


如果你感覺某些東西仍然缺失,請添加中性幾何形狀,如果背景為淺色,則為白色;如果背景為暗,則為黑色。


Image title

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

 


如何合理創建間距系統,來更快的實現設計方案。

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

讓設計師和開發團隊有意識的利用好間距系統,可以提高產品的可讀性和一致性。

Cheatsheet總結了我的方法


我最近致力于為電子健康記錄(EHR)產品定義間距系統,以改善產品頁面的可讀性和一致性。我提出了3個間距規則(3C規則)和以4為基準的間距網格,并且這些規則與新的印刷系統配合得非常好。


存在的問題


當定位垂直元素時,設計師不應做出隨意或者任其自然的判斷。通常設計師通過按住Shift和上下箭頭鍵在Photoshop中實現垂直增量:“根據實際情況來決定使用5px或10px?!边@種方法雖然是10的倍數并且可用,但是它不符合任何印刷要求的規范。

——Robert Bringhurst,著有《印刷風格元素》一書。


  • 我們在EHR產品中使用了5px、10px、15px、20px的邊距/填充,但是在何時何種情況下使用這些間距,我們并沒有一個嚴格的規范。

  • 邊距/填充只是間距系統的一部分,字體行高也會增加額外的高度空間,但目前我們沒有為現有(舊的)文字樣式創建行高規范。

  • 相似的組件和內容在產品中看起來不一致,這造成了EHR產品的整體樣式不統一,并且因為數據疏密程度不同,造成了閱讀體驗的不流暢。

Image title



解決問題


步驟1:確定文本行高(確定基準網格)

首先我們假設使用非常流行的8點基準網格(即以8的倍數為一個間距規單位)會達到好的效果,因此在實驗中,我把基準主體字體大小設置為13px,行高設置為8的倍數即16px或則24px然后看看這兩個行高規則是否有用。如果沒用,則意味著8點基準網格是不適用的。

Image title

然后我將基準字體大小設置為13px,并在16px和24px之間的偶數尋找行高值。開始我將它與18px(6的倍數)匹配,如果成功那就意味著我采用了6點基準網格,也就是6的倍數(間距會是3、6、12、18、24)。后來我嘗試了20px的行高,使用起來效果很好,所以我采用了4點基準柵格(也就是間距為2、4、8、12、16、20等)。

Image title


步驟2:用??硕珊蛶缀渭墧祦泶_定間距值


“隨著可選擇數量的增加,做出決定的難度將會增加?!?/span>

——希克定律


我們要想出一個可感知的間距系統來簡化設計決策,另外將所需值的數量保持在一個最小范圍內。

  • 間距值是基準網格的倍數數值(如步驟1中確定的4點基準網格),因此我的間距值為4點基網格(2、4、8、12、16、20、24、28…)

  • 一般來說,4–-5個間距值已經為產品設計提供了足夠的差異性,即使對于復雜的企業產品也足夠了,但是在實際過程中可能需要靈活的在規范中增加間距值。

  •    我決定使用4點基準網格,因為它提供了更好的視覺可感知區間,對于層次結構的展示來說非常好,因此間距值應該是(2、4、8、16)。

Image title


如何以可預見的方式應用這些間距值?3C法則來拯救你。

我深受Nathan Curtis上面文章中介紹的Insets,Stacks&Inline等間距詞匯的影響。我決定在其基礎上構建一個額外的詞匯組,以便我的團隊更容易理解每個詞匯的使用環境。我將所有的間距規則分解成3個C:容器、內容和組件。

· 容器規則使用了平方差的概念(使用16px)

· 內容規則使用了堆棧的概念(頭部堆棧使用2px,葉節點堆棧使用0、4、8、16px具體取決于內容類型)

· 組件規則使用內聯的概念(大多數情況下使用8px,4px表示關聯關系)



第1C:容器規則

容器是UI中的框架,其中包含內容,通常這些內容是頁面、卡片、模態、彈窗等。由于容器在層次結構中處于最高層次,所以我確保所有容器的間距值(在我的例子中是16px)。提示:切勿在任何間距計算中包含邊框。

Image title


Image title


第2C:內容規則

  • 內容存在于容器內部,內容包含:

  • 標題(h1、h2、h3、h4、h5) 以段落,列表,表格,表格的形式穿插數據。

所有這些內容都是使用頁邊距垂直疊加的,但字體行高也為指定的頁邊距增加了額外的間距。我無法以一致的方式解決這個問題,因此我同時考慮了行高和邊距,創建了自己的處理堆棧的方法,以下是我的過程:


A)首先解決頭部堆棧

  • 如下圖,我通過使用2個選項來獲取標題的行高。

Image title


  • 為了簡化這2個選項之間的行高決策,我計算了每個行高比,并決定使用等于1.5或更高的行高。對于選擇哪個行高,我仍然猶豫不決,但是在進行了視覺探索并回顧了設計團隊的結果之后,我們確定了應該采用那個行高選項。

Image title

視覺探索的過程

  • 我從頂部的H1開始,嘗試使用2px、4px、8px等的不同間距選項。行高為36px的間距選項都很緊湊,但4px間距與行高40px感覺恰到好處!

Image title

 

  • 接下來我解決了H2問題,在我們的產品中,H2恰好是白色頁面的第一個標題。所以根據容器規則,最上面的H2在頂部有16px。我決定在所有H2標題上面給出16px間距高度(最大允許間距值),因為這個值使得層次結構非常清晰。

Image title

 

  • 然后我在所有標題(H2、H3、H4、H5)和列表、段落、表格之間進行了間距值0px、2px、4px和8px的實驗。2px和4px的間距相差無多,但是我們在設計團隊內部審查結果時,2px的視覺感知更好,盡可能的堅持只有一個邊際數值,因為它簡化了設計和開發過程。

標題和葉節點間距實驗

標題和葉節點間距實驗

標頭堆棧 - 間距為2px和4px


B)接下來解決葉節點堆棧

EHR有4種主要類型的葉節點:

  • 表單(幾乎50%的產品)
  • 列表(幾乎30%的產品)
  • 表格(可能是產品的15%)
  • 段落(可能是產品的5%)

我開始為最簡單的內容類型——段落來處理間距。


每個段落內的間距

這非常簡單,只需要清空段落中的所有文本行空間,這樣兩行之間就有0px邊距。

Image title

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作為段落底部的邊距。

Image title

解釋WCAG SC 1.4.8中的段落間隔規則

在Sketch中多段落排版

在Sketch中多段落排版


如果對計算結果有疑問,我總是用視覺探索進行交叉檢查。與其他可能的值相比,段落之間的16px間距最佳。其實我認為12px間距會更好。但是我不想僅為這個用例為整個間距系統添加額外的值,另外我們的EHR產品沒有很多段落,幾乎沒有任何連續的段落。

Image title

列表中列表項內的間距

列表是由多個同質數據項組成的數據結構,由于列表將所有這些同質數據項組合在一起,因此列表項不像段落(它們之間有16px)那樣間距很重要。同時列表項仍然需要稍微分開,所以我嘗試了0px和16px之間的間距,我只有3個值可以試驗2、4、8,總體看起來列表項之間的間距為8px看起來最適合層次結構。

Image title

帶有標簽的2個連續輸入字段之間的間距

表單有連續的輸入字段,一個接一個地疊加在另一個之下。

Image title

無標簽2個連續輸入字段之間的間距

無標簽對于可訪問性來說并不是一個好的處理方式。然而在某些情況下,標簽最好不要顯示,這些情況是:

  • 當多個輸入字段一起表示1個對象時(例如在下面的地址部分,“地址”字段包括街道地址1,街道地址2,城市,州,郵編)
  •   當標簽過于明顯/重復且無法拼寫時,例如搜索。

Image title

 

第3C:組件規則

組件有按鈕、輸入字段、圖標等,這些組件通常放置在一起(內聯)。此外所有的組件的尺寸均為4的倍數(也是8的倍數),因此按鈕和輸入域內部有一個24px高度的空間(加上1px 頂部和1px的底部邊框,整體高度為26px)。當組件能完美利用好基準網格,并且按規則設置間距時,整體布局才會完美和諧。


2個組件的間距

我用了一個簡單的規則,即在大多數時候任意2個相鄰組件之間使用8px間距。在少數情況下使用4px來顯示兩個組件之間更緊密的關系(格式塔的接近性原則)。

內聯間距為8px(玫紅色)和4px(橙色


組件內部間距

我對組件內部的任何左/右填充都使用了8px。

Image title

圖標在組件內部間距

根據格式塔的接近性原則,將圖標放在組件內,將他們的間距設置為4px,而不是通常的8px。

Image title

外部圖標與組件間距

如果圖標與組件關聯組合,則其與組件間距為4px以顯示其關聯關系(格式塔的鄰近原則)。但是如果圖標與一組組件關聯,那么它與最后一個組件間距8px,以表明它不僅僅是與最后一個組件關聯,而是與整個組件關聯。

Image title


結論

  • 你將提出一個具有有限數值和有明確使用規范的間距系統,這非常易于使用并且合乎邏輯記憶。
  • 在UI中使用間距,使其信息層次結構更加合理清晰,并遵守可訪問性指南WCAG1.4.8,這有助于不同能力的人更好的掌握和理解信息。
  • 開發工程師了解間距系統,并且熟悉其應用的場景和規則,這樣可以讓設計和開發之間的溝通更順暢,工作效率更高等。
  • 設計師不再需要對所有內容進行排查,開發工程師不再需要花時間檢查Zeplin等其他工具中樣式問題。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計  cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如何做到配色讓人滿意

用心設計

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

 

 


b40d58b7f468a801219c77f82931.jpg

7ae358b7a65da801219c7737a969.jpg


藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如何合理創建間距系統,來更快的實現設計方案

用心設計

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

 

讓設計師和開發團隊有意識的利用好間距系統,可以提高產品的可讀性和一致性。
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:用希克定律和幾何級數來確定間距值
“隨著可選擇數量的增加,做出決定的難度將會增加?!?
——希克定律
我們要想出一個可感知的間距系統來簡化設計決策,另外將所需值的數量保持在一個最小范圍內。
間距值是基準網格的倍數數值(如步驟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,以表明它不僅僅是與最后一個組件關聯,而是與整個組件關聯。

藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

如何利用走查表驅動設計改版

用心設計

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

 


UI走查表有什么用?




一套成熟的UI走查表能更科學更地改稿;減少設計中的反復試錯、評審交付時更言之有物;不僅僅停留于“看上去順眼”、“我覺得挺好”、“先這樣”的視覺表層。更深一層來說,走查表有助于培養設計師的結構化思維,形成一個完整的設計體系。


Image title


Image title


Image title


01.頁面要表達的意思是否正確




在設計頁面的時候,需要注意頁面要傳達給用戶的信息重點,例如本次案例的產品需求中,該頁面的功能是促使用戶快速下單,信息上則要側重于價格與優惠信息。


Image title




首屏信息是給用戶的第一印象,在用戶打開頁面,盡可能展現出更多用戶感興趣的內容, 而此次頁面需要突出促銷優惠信息,次要信息則放在后面。




Image title




02.頁面視覺重點




相信大家平時經常聽說0.618的黃金比例(斐波那契數列),屏幕方寸間合理運用黃金比例可以讓界面視覺重心更加平穩,視覺更加舒適。同時有助界面區域分割,集中視覺焦點,承載更重要的信息,讓整個界面布局更加合理。




Image title




淘寶、京東到家等成熟的一線產品黃金比例運用,o在視覺焦點區域都向用戶展示了關鍵信息。


Image title


Image title


02.元素間距符合各層級的關系




為什么頁面會雜亂無章?主要是信息一味地堆砌,分布沒有區別,但只要遵從以下方法,頁面就會清晰很多,有節奏的呼吸感也出來了。




同類的板塊不應被混亂的間距區隔開來,他們應該更集中,并且整體與別的板塊區別開來,同理,不僅僅是板塊,元素與元素之間也是如此,這樣用戶可以更加快速地看到自己想要的東西。


Image title


那么,如何更好地讓信息按照相似屬性分布合理呢?這就要利用5分、等分原則來讓分布變得更合理,假設相同板塊的間距值為a px,則不同板塊為2apx。這樣不僅在視覺可以將信息分布開來,還能讓整體的布局更加規整,不會凌亂,盡可能使用同一或者同倍數的間距,更便于開發。




案例中,相近元素的間距為16px(a px),則不同類別的元素則為32px(2a px)。


Image title


Image title


Image title


01.字體種類的控制




一個產品如果字體種類過多,會導致界面的不統一與混亂。通常字體控制盡量在3種以內,中文字體、英文字體以及特殊數字字體。如下圖:


Image title


02.字號與粗細控制




字號過多使信息失去重點,基礎字號控制在3種以內,目的在于清晰區分信息的層級。正文字號建議為28px,副文案為24px,大標題、價格等重要信息需按實際情況加大,令信息的層級區分更明顯。




加粗字體往往是整個界面的視覺焦點,重點的文本(如標題、價格)需要加粗處理,注意控制字體加粗的使用,以免造成信息層級的混亂。 下圖為調整字號及粗細的前后對比:


Image title




03.行距控制




行距太小不便于用戶閱讀,太大會顯得松散,所以控制在1.2-1.5倍的范圍是較為舒適的范圍。下圖為調整行距的前后對比:


Image title




04.字體顏色




字體主要以黑白灰為主:#333333?#666666?#999999;字體顏色深淺有序能讓信息層級主次分明,產品應該根據不同模塊以及同一模塊的層級需要調整不同的灰度值,并在產品中反復使用,統一規范輸出。


Image title


信息越重要,字體顏色越深。除此之外我們還需要注意到什么呢?也是很多剛入行的設計小伙伴很容易忽略的細節,產品的實際使用環境。比如,我們此次改版的產品詳情界面就是線上下單,線下提貨的運營模式,不僅需要考慮室內使用環境,還需要考慮到特殊的室外強光環境。結合下圖感受一下。


Image title


如何在強光環境下保證產品良好的視覺體驗呢?這也是UI走查表需要注意到的細節點:強光測試(大于4.5:1)。


4.5:1經驗數值參考前輩行業經驗總結:


https://www.w3.org/TR/WCAG20/


https://www.sitepoint.com/making-bootstrap-accessible/




我們先觀察一組顏色對比,如下圖:


Image title


我們會發現字體顏色層級依然是深黑色、中黑色、淺黑色,相信很多設計師朋友已經注意到我們使用的顏色更深了,為什么呢?為了保證好在強光環境下的信息閱讀可閱讀性,如下圖:字體信息最淺層級,淺黑色的色彩數值對比數值都大于4.5:1。


Image title


強光測試鏈接:https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF


有細心的設計師朋友或許已經注意到色彩值并沒#333/#666/#999那么便于記憶了,為什么呢?


為了提升更好的視覺感受與界面的品質感,我們在字體顏色中采用了偏藍灰,至于為什么,大家不防給我一起觀察下圖,上圖灰色看上去略微有一些臟臟的感覺,下圖視覺更耐看、更有質感。




Image title


騰訊新聞、金色財經App中的也應用到了偏藍灰,帶來種撲面而來的清爽。




Image title




除了常用字體層級的顏色對比,在界面中針對關鍵的賣點信息還用到強調色,即品牌色


品牌色也會經常運用到特殊字體、提示文字、鏈接等等。


改版前,促銷信息缺少提示入口;改版后,以品牌色作為入口字體顏色,引起用戶注意。




Image title


Image title


01.視覺比例




由于圖標通常都是成群結對的出現,彼此之際的統一性顯得非常重要,但是常常容易被忽略,可以制定如下圖的圖標盒子來規范尺寸。


Image title




02.圖標設計要點




設計圖標時應注意基礎形狀復用,保持整體識別性。如下圖重復使用矩形、圓形、橢圓形等基礎形狀進行設計,既能統一大小又有整體感。




Image title




面性圖標


設計時需要注意挖空比例的一致性,保持圖標的整體性。如價格走勢、降價通知這一排圖標,挖空比例控制在20%


Image title


線性圖標


設計時應注意保持良好的線條粗細的統一,案例中使用2px的粗細線條重復使用,所有圖標的粗細與文字粗細一致,和諧統一


Image title


03.圖標尺寸




在app中,功能圖標大致可分成兩種:可以點擊的按鈕;不可點擊的展示圖標。


可以點擊的按鈕常用于導航欄、tab欄、操作欄(吸底按鈕圖示)常用尺寸為:48x48px 64x64px。如下如的導航和吸底按鈕都用了48x48px的大小。




Image title


不可點擊的展示圖標常用于信息展示位置(價格走勢/規格/評論等圖示)常用尺寸為:24x24px 32x32px,如下圖,評論模塊中的展示圖標使用24x24px,價格走勢則使用了32x32px的尺寸。




Image title



04.標簽的走查規范




從商業的角度,標簽是為了凸顯產品賣點,比如你在商場時常能看到“全場低至2.9折”這類的促銷信息,其實在界面中同樣也會有,目的就是為了抓住用戶貪小便宜的消費心理,對比沒有標簽的同類商品,用戶會更佳傾向與有有標簽的商品。


常用標簽樣式有三種表現樣式,面性:填充一整個色塊;線面結合:低飽和度的色塊結合高飽和度的描邊;線性描邊:1px粗細描邊;


Image title


如上圖:為展示清楚,在原來基礎上放大了1倍,運用規則與之前提到的圖標一樣,根據模塊功能的重要性去搭配,按照重要到次要的排序是:面性>線面>線性




標簽呼吸感規律:




很多初級設計師都在疑惑到底標簽文字定多大合適呢?標簽字號一般為:18-22px


以"自營"標簽為例


Image title


如上圖:外框邊距橫縱向成2倍的倍數關系,所以以后在畫標簽,只要先定好字號大小,剩下的邊框邊距就按照2倍的關系去拓展


Image title


為了確保我們做視覺稿的時候易于文本的閱讀我們通常會用到一些配圖,而這些配圖通常也影響著我們整個界面的美觀度,一個優秀的設計師在設計作品時都會特別的注重圖形與圖象的比例,圖片的選取當然也是重中之重,那么我們在項目中應該如何選取圖片并且正確的使用圖片的比例呢?




01.圖片使用的規范




第一點:首先就是要做到讓圖片的背景保持統一并且做到干凈整潔


第二點:圖片主體的比例大小跟其他圖片保持統一避免出現有些圖片展示局部有些圖片展示整體


Image title


02.圖片模塊的常用使用比例




UI設計中圖片的比例會比較的多常用的有下列幾種




1:1,這種比例比較適用于電商,它可以讓商品圖片展示最大化。也是目前電商最主流的圖片使用尺寸。如下圖:




Image title


16:9,這種比例比較適用于視頻,這是標準的人體工程學比例,根據人體工程學家的研究發現人的兩只眼睛的視野范圍并不是方的,而是一個長寬比例為16:9的長方形,所以我們看到的視頻比例通常會采用16:9。如下圖:


Image title


4:3,這種比例應用于新聞類APP比較的多,它源自于一些微小型相機最原始的尺寸比例,不需要進行過多比例的裁剪,應用起來比較方便,對于需要展示大量的圖片信息類的產品來說特別的適用。如下圖:


Image title


如果你還是不知道如何去使用尺寸,那么你可以直接查找相關競品進行設計。


Image title


壓軸給大家帶來一個小驚喜,我們整理了一個較為完整的設計走查表,希望在實踐中能夠幫到大家。


Image title

藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

從UX 到產品設計,聊聊用戶體驗行業的巨大泡沫

用心設計

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

 

上周和小伙伴一起翻譯了一篇 medium 上點贊量超多的文章(8.1k贊),該文作者在電子產品的界面設計領域有13年的從業經驗,也經歷了從架構師到用戶體驗設計師再到如今的產品設計師的多次職業轉換,文章主要是講他對用戶體驗設計的犀利吐槽,以及對產品設計所代表的工作方法的無限看好?;蛟S觀點上并沒有什么新意,但是,就像某大佬說的,設計是對混亂的馴服。想要馴服混亂僅憑理論套路是遠遠不夠的,而設計師真正的價值或許也就在于此:投身于未知與混沌的灰色之中,并且還要從中分出黑白。

那么為什么我要翻譯這篇巨長的文章呢?就我個人而言,單純很喜歡作者傲慢中帶著犀利的風格,就像看一篇文字版的吐槽大會般有趣。我在翻譯的時候加上了自己的思考和看法,所以,文末也留了 medium 的原文鏈接,可以去查看作者的本意,并觀看其中的演講視頻。

這是關于我從架構師轉變到用戶體驗設計師的一段經歷,以及我是如何看待行業現狀的。

十年前的某一天,我決定要把我的職業從架構師改成用戶體驗設計師。我記得當時很多可用性專家、架構師、界面設計師、交互設計師對我說:這只是潮流而已,「用戶體驗設計」這個表述并不,簡直就是胡說八道,體驗怎么可能被設計?

然后在去年,我又突然決定把我的職業從用戶體驗設計師改成產品設計師。同樣的,一群用戶體驗設計師又來對我說,這只是潮流而已,用戶體驗設計師和產品設計師之間并沒有什么本質的區別。

但是,對我來說,它們是不同的。在我看來,產品設計更加的謙虛真誠。我覺得這是用戶體驗設計師不具備但最應該學會的:謙虛務實。

我不是在勸你像我一樣改換職業名稱(坦白地說,你最好別這么做),我真的一點兒也不在意。我只是想告訴你,我決定轉變的原因,以及我是如何看待行業現狀的。

很膚淺的話題,聊職稱大概是世界上最無聊的事兒了,但是作為設計師們,我們又確實很喜歡討論它。或許,這次我們可以聊的更深入一點。

用戶體驗設計的出現是因為我們設計師的需求

我一直很喜歡 Alan Cooper 提出的這個詞:交互設計師(interaction designer)。我認為它很地抓住了這項工作的本質。但是早在十年前看來,這個詞的定義就已經很狹隘了。數字產品的設計師們希望工作能觸及到更多的內容,而「用戶體驗設計」似乎就承擔了這個「需要觸及更廣泛內容」的責任。

它確實抓住了這個需求,現在 UX 這個詞廣泛流傳,每個人都在使用這個縮寫,但問題是每個人對它的理解是不同的。所以,直到現在它也是個令人疑惑的概念。

在Peter Merholz 的一次訪談中,Don Norman 對創造 UX 這個詞的初衷做了如下解釋:

我發明了這個詞是因為我覺得人機交互和可用性這兩個詞兒太狹隘了。我想要創造一個可以覆蓋人們體驗各個方面的系統,包括圖形設計,界面,體感交互和這個系統的使用手冊。但從那之后,這個詞就開始廣泛地流傳,慢慢地失去了它本來的意義。

如今它偏離本來的意義越來越遠,以至于 Alan Cooper 先生說:根本沒有用戶體驗設計這回事。

UX設計師是如何看待自己的以及他們真正做的是什么?

在我們盡可能擴寬工作邊界的努力之下,我們把 UX 這個氣球吹得快要爆掉了。UX 現在承擔了「設計不同觸點的體驗」的任務,包括組織轉型,制定策略,改革創新,市場營銷,設計從 app 到廣告、服務、設備、地點、事件,甚至公司文化在內的所有事情。

或許用戶體驗確實應該做到這些,但是問題是,沒有一個用戶體驗設計師能一個人把所有的這些事情做好,要創造一個復雜的產品,你需要的是一個由不同領域專家組成的團隊。

我不得不說很多 UX設計師真的是眼高手低,他們根本不具備足夠的技能或者經驗去支撐他們的野心。

我同時也負責招聘的工作,大多數申請 UX 這份工作的求職者可以分為以下幾類:

  • UI/UX設計師,其實就是圖形設計師,他們并不擅長信息架構、定義目標和需求,創建交互模型,考慮商業利益。他們只生存在追波上。
  • UX設計師,他們靠畫規范的線框圖謀生,有時候也做做可用性測試。(順便說一句,他們是最有可能成長為優秀的產品設計師的人。很多有經驗的 UX設計師叫他們「線框仔」,我真的很討厭這種沒必要的鄙視。他們忘了自己也是這么成長起來的。)
  • 空想家,專注于建工作坊,喜歡在墻上貼便利貼和畫布,但是通常沒有把想法轉化為實際設計方案的能力。

當然,以上只是一種簡單的歸納,但是從我的觀察來看,很多做 UX 的都可以歸到這三類人當中,因為真的很少見到那種既懂戰略又會戰術,既有創造力又有執行力,既了解商業又懂設計的人才。

UX設計師日常做的事情以及他們對商業的價值根本配不上他們的自我認知:「用戶體驗設計很重要 」。

用戶體驗設計實際上并不像很多「什么是UX」的文章寫的那樣是所有事情的中心。我推薦你去看Paul Addams在UX London 2018上的優秀演講——《The end of Navel Gazing》。標題「用戶中心論的終結」很好地表達了這個意思。

UX專注于用戶和工具,但是這兩點并不足以解決真正的商業問題

我觀察到的另一個現象,是關于用戶體驗設計目前的狀態的。UX設計師們每天都會發表數不清的文章,它們大部分都是關于研究工具以及方法論(例如用戶畫像,用戶體驗地圖,原型制作工具,用戶研究方法等等),各種教程,無關緊要的圖形設計趨勢,或者用戶界面細節。

Fabricio Teixeira 和 Caio Braga 寫了一篇優秀的文章來說明這些理論的狹隘之處:

https://essays.uxdesign.cc/state-of-design-publishing/

然而,這些我們經常討論的東西,對于處在殘酷商業競爭環境下的產品設計團隊來說,并沒有什么用。因為計劃與管理實際的產品開發進程和理想的「Design thinking 五步法」之間并沒有太大的關系。

整個 UX 行業好像對商業這部分都沒什么興趣,也難怪,「用戶體驗設計」這個名字就暗示了他們只關注用戶。商業是別人的事。

UX設計現在很像一個宗教,而且它的信徒的想法通常都很接近

也難怪會冒出 UX 的忠實捍衛者們了,如果你膽敢不同意他們的信仰,他們就會把你的心扯出來。

僅僅只要說一句:用戶研究不是總是被需要和有實際意義的。他們就會告訴你如果你不會用戶研究,你就不是一個合格的用戶體驗設計師。如果你個人并不是很喜歡一些方法論,像用戶畫像或者其他,你最好趕緊默默溜走。

可悲的是,UX們總是想成為最有創新能力的人。但是我認為他們并不是。因為,創新力需要嘗試不同的工作方法,考慮新鮮的想法,要求與眾不同以及靈活多變,敢于實驗,勇于實踐,并擁有商業頭腦與落地思維。想要成為真正的革新者,需要的是自己去開創自己的道路,去突破規矩,去冒險。而不是重復說那些所有人都在說的簡單的陳詞濫調,遵從那些輕而易舉的方法指南。我覺得 UX設計師整個群體都搞不清楚地圖和實際道路,模型(或其他噱頭)和現實之間的差別。(只有這些「革新者」的想法才很容易被預測:因為他們所有人都讀一樣的書,說著同樣的話。)

我感覺我已經超越了UX

我從事數碼產品的設計有13年了,現在我不覺得我和大多數的 UX設計師之間有什么共同點。我覺得我已經超越了用戶體驗設計。我跟產品經理或產品需求方之間更為投契。

Peter Merholz 在他的一次演講中說過,用戶體驗這個行業的出現是因為產品經理對用戶體驗缺乏考慮,我同意這種說法。

數字產品就是我現在正在做的,像網頁,app,界面。我的目標是為我的客戶創造一個成功的產品,一個會幫助他們賺錢或者省錢的產品??捎眯院陀脩趔w驗只是實現這個目標的一部分,它們很重要,但是說實在的,并不是最終的目的。我不會像大多數的 UX設計師那樣不切實際的浪漫主義。

我也需要為我自己和我的公司賺錢,所以我要擅長規劃一個有效率的設計流程,估計好預算,有條有理地和客戶進行合作,銷售與推廣我的工作,招聘人才等等。

我知道我很擅長數字產品設計,但是我可能并不擅長做所有類型的設計。這就是為什么我更喜歡「數字產品設計師」這個頭銜的原因了。

我喜歡它的點在于,它更聚焦于產品而不是用戶。它把我的工作放在了資本市場的背景之下。產品需要對顧客有用,但是也需要切實地有利可圖。

對我來說,無論它是什么,聽起來,「產品設計」比「用戶體驗設計」都更加的落地。產品設計更容易被所有人理解,甚至你媽媽也能懂。它不需要太多解釋。用戶體驗只是它的一部分,但是從另一方面講,比起想要解決世界上所有問題的萬能藥UX 來說,產品設計這個說法更加的謙虛。

現在我大部分時間依然是在做交互設計和信息架構這種傳統工作。我大部分的精力也都是花在制定策略,進程管理和設想概念的層面。但是我也正在帶上許多的帽子:決策者,界面設計師,架構師,文案,創意總監,項目經理,產品需求方,用戶研究員,測試人員??傊?,哪里有需要哪里就有我。

當然我需要和很多人(他們是各自專業領域的專家)一起合作來實現我的愿景,然后把它迭代變得更好,更完善。技術專家,開發者,圖形設計師,內容設計師,項目經理,甚至律師等等。最后的用戶體驗其實是很多這些人的工作共同作用的結果。

用戶體驗是很多人工作的結果,是一個產品或者服務生產出來的,并不是一個職位的描述。

我會把產品設計師定位為這樣一個角色:他們是那些為產品功能和形式的最終呈現負責,并能夠以任何可能的方式對設計流程以及產品的發布進行規劃和優化的人。(如果你還把產品設計僅僅看作是 UI/UX 的另一個名字,這對你毫無幫助)對于很多有經驗的 UX設計師來說,并沒有什么新鮮的,但是產品設計確實和 UX 不同。

我看到如今,越來越多的有經驗的 UX設計師稱自己是產品設計師了,所以,也許這是一個潮流吧。又或許是某種原因?

Andy Budd,一個有著很棒的見解的家伙,我一向很尊敬他,最近他發了一個推特說:UX就像爵士樂,產品設計就像朋克樂。

好吧,我的看法跟他完全相反。打比方說,如果你想成為一個 UX設計師,你現在要做的只需要去上個周末課程,學習設計過程的5步法以及5個方法論,像用戶畫像,用戶體驗地圖,愿景圖,你就可以開始干活兒了。

但是成為一個產品設計者,你需要把產品交付給市場的實際經驗,這非常的難,因為經常是一團混亂,復雜的過程。產品設計就像自由的爵士樂??赡苈犉饋砘靵y嘈雜,有一點像朋克樂,但是想要把它玩好,你需要很多的技能和經驗以及音樂理論的掌握,也需要一些即興創作的能力:改變規則甚至是反對它們。更不用說,在團隊中,你需要成為整個團隊工作的主導。

無論你想叫自己什么,無論你有多大的夢想,但,也要記得保持真實和謙卑

藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

成為UI / UX設計師所需的7個步驟

用心設計

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

現在讓我們關注最常見的設計專業:UI/UX設計師。

一、熟悉UI原則

在進行設計練習之前,你需要做的第一件事就是學習一些設計原則。這樣你才能夠進入設計世界,并開始進行“創造性”的思考。你會學到心理學對設計方案的影響,例如:為什么它看起來不錯,為什么會失敗。

下面是你應該了解的一些設計基本原則。

1、顏色

色彩詞匯,色彩基礎和色彩心理學。

設計原則:色彩

2、平衡

對稱性和不對稱性。

設計原則:平衡

3、對比

使用對比來組織信息,構建層次結構和創建焦點。

設計原則:對比

4、 排版

選擇字體和在網絡上創建可讀的文本。

易讀性的10個原則與網頁排版

5、一致性

最重要的原則,創造直觀和實用的設計。

設計原則:一致性

下面是設計好的界面一些好的方法和需要注意的事項。

二、了解創意用戶體驗流程

接下來要了解創作過程,UI / UX設計是設計都要經歷的特定階段。它分為四個不同的階段,發現、定義、開發和交付。


創作過程

發現

在項目的最開始,設計師會開始研究,獲取靈感并收集想法。

定義

在定義階段,設計人員定義從發現階段提取的想法。由此創建了一個清晰的創意設計方案。

開發

在這里創建原型,測試和迭代解決方案或概念的地方。這種反復試驗過程有助于設計師改進和完善他們的想法。

交付

最后交付階段,項目會最終確定并且投入使用。

三、培養你的設計視野

了解設計原則雖然有很大的幫助,但這是遠遠不夠的,還需要培養你的視野,知道什么是好的設計和壞的設計,并且能找到設計方案的優缺點。

在打開一張空白的畫布并盯著它看半個小時之前,你明白創新的唯一方法是通過研究。培養你的設計視野的最有效方式是通過看更多的設計方案來尋找靈感。尤其當你是初學者的時候,有時候無法自己打開腦洞,這時候你必須先看看其他人的設計。

瀏覽靈感類網站

所以看看其他設計師在Dribbble上做了什么,每當你遇到漂亮的設計或與你的項目相關的東西時,將它保存在筆記中并能說出你為什么喜歡,你也可以截屏保存。通過這種方式,你將擁有一個豐富的設計素材庫,設計之路由此展開。

四、每天閱讀設計文章

為了讓自己盡快的熟悉設計,最好的方法是每天閱讀一些文章。讓閱讀設計新聞和博客成為日常習慣。我們有數百萬篇在線文章可供我們了解新趨勢,設計方法和教程。我們所要做的就是找到它們,沒有比從其他人總結的經驗中學習更好的了。

讓閱讀文章成為日常習慣

在早上學習新事物會擴充你的腦洞,并為白天創造騰出更多的空間。因此你早上可以在Medium或Smashing Magazine看一些優秀的設計文章,開始新的一天。

另外要注意勞逸結合,不時地休息一下,閱讀更多設計內容。特別是當你陷入困境并感到沒有想法的時候,更有停下來休息,休息對于創造力非常重要。你可以將您喜歡的網站收藏為書簽或訂閱設計博客。

五、設計概念項目

實踐是檢驗真理的唯一標準,并且我們清楚的知道,沒有設計經驗我們就無法獲得客戶/工作。但如果沒有客戶/工作我們就沒有辦法加強設計技能。所以我們可以通過自己的實踐來打破這個循環,進行概念項目設計以獲得樂趣以及成長!Dribbble上有很多的概念設計,他們都做的很棒。

Facebook Material Design by Kevin McCarthy

你可以花點時間選擇你感興趣的網站或App并重新設計它。你可以完全賦予它新的創意和意義,并且由此你將形成你的設計風格和作品,獲得快速的成長。

六、了解的設計工具

我們有很多的設計工具,但你不需要都了解。你只需要選擇你喜歡的并且適合你的工具即可,并隨時了解的功能和趨勢,以下是我在設計過程中使用的工具:

界面設計:Sketch

用于協作界面設計:Figma

用于低保真線框圖:Axure

用于界面設計和原型設計: Adobe XD

可交互動態原型:Principle、Flinto

用于原型設計和協作:Invision App

七、尋找導師并且得到幫助

學習設計的另一個好方法是找到愿意提供幫助的設計導師或設計師朋友。他們將幫助您加快學習進程,導師或者設計師朋友會對你的設計方案會盡可能地發表意見。這就像一條捷徑,他們還會分享他們的經驗和方法論以及設計技巧。因此請向有經驗的設計師或者導師提出問題并討論您的疑問。

另外在我教授設計和前端的幾年時間里,我學到的東西比我教的要多很多。所以當你準備好如何與人們討論設計時,你可以指導或教育某人有關設計的知識。你將學習從不同的角度看待它,你將獲得你可能從未想過的反饋和問題。

每當你和其他人談論設計時,你的思維將一直處于“頭腦風暴”模式,你會發現自己越來越對設計產生興趣。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

用第一性原理告訴你:什么是交互設計?

濤濤

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

為什么是第一性原理

最早提出這個概念的是亞里士多德。他說:在任何一個系統中,存在第一性原理,是一個最基本的命題或假設,不能被省略,也不能被違反。

后來「硅谷鋼鐵俠」埃隆·馬斯克在一次采訪中提到「第一性原理」:

我們運用第一性原理,而不是比較思維去思考問題是非常重要的。我們在生活中總是傾向于比較,對別人已經做過或者正在做的事情我們也都去做,這樣發展的結果只能產生細小的迭代發展。第一性原理的思想方式是用物理學的角度看待世界,也就是說一層層撥開事物表象,看到里面的本質,再從本質一層層往上走。

所以,我希望用第一性原理的思維方式,發現交互設計的本質,從而更好地理解和運用它。

什么是交互設計

交互設計,又稱互動設計(英文Interaction Design,縮寫 IxD 或者 IaD)是定義、設計人造系統的行為的設計領域。人造物,即人工制成物品,例如,軟件、移動設備、人造環境、服務、可佩帶裝置以及系統的組織結構。交互設計在于定義人造物的行為方式(the「interaction」即人工制品在特定場景下的反應方式)相關的界面。——百度百科

讀完上面關于交互設計的權威解釋,相信有讀者和我一樣,在短時間內很難弄明白:到底什么是交互設計?

下面,我們一起用第一性原理,拆解和分析交互設計的本質。

小學語文老師教會我們一種名次解釋的方法——拆詞法,那么,交互設計可以拆解成:交互層和設計層。

交互層是什么

交互,即交流與互動。具體點說,在某個場景下,一個對象為了某個事件目標,與其他對象產生信息的交流與互動。在筆者看來,交互的本質是信息的交流與互動,包含用戶、目標、場景,它們共同構成交互設計的交互層,這是交互設計的前提。

而用戶、目標、場景,也正是辛向陽教授定義的交互設計5要素其中的3個。

案例1:我們為「餐廳點餐」這個事件進行交互設計,那首先要知道這個案例的交互層是什么,也就是信息的交流與互動是怎樣的。

這個例子的交互層是:用戶(我們)需要在某個場景(餐廳),與其他對象(餐廳/服務員)產生信息的交流與互動,才能達到目標(完成點餐)。

案例2:我們為「地鐵上聽音樂」這個事件進行交互設計,按照上面的思路,我們知道這個事件的交互層是:用戶(我們)需要在某個場景(地鐵上),與其他對象(音源)產生信息的交流與互動,才能達到目標(聽音樂)。

我小結一下,幫你理解交互設計的交互層。

當我們為某個事件進行交互設計時,首先要知道自己在一個什么樣的事件前提下開展交互設計,而這個前提就是我所說的交互層,即用戶在某個場景下,與其他對象產生信息的交流與互動,從而達到目標。

所以,在交互設計里的交互層,本質是信息的交流與互動,包含用戶、目標、場景,主角是信息交流互動的雙方或多方。

設計層是什么

在說交互設計的設計層之前,我們先來看「什么是設計」。

設計是把一種設想,通過合理的規劃、周密的計劃、通過各種感覺形式傳達出來的過程。——百度百科

現在我們將上述解釋放到「交互設計」里去理解。交互設計里的設計,就是在交互層的前提下,為一個事件合理的規劃/計劃(行為),并傳達(媒介)出各種感覺(用戶體驗)。

所以,在交互設計里的設計層,本質是找到解決問題的手段,包括媒介和行為,主角是設計媒介和行為的設計師。

我們繼續用前面的兩個案例,理解交互設計的設計層。

案例1:為了完成「餐廳點餐」的交互設計,我們依據交互層這個前提,開始找到解決問題的手段,并為之設計媒介和行為。

在一些餐廳,用戶還是通過紙質菜單,用口述的方式完成點餐。這里的媒介是紙質菜單和服務員,行為是口述。

在另外一些餐廳,用戶用手機掃碼點餐、下單、結賬、評價等。這里的媒介是餐廳點餐的二維碼和用戶的手機,行為是用手機掃碼、點餐、結賬等一系列動作。

案例2:為了完成「地鐵上聽音樂」的交互設計,在非智能手機的時代,我們基本上是通過一個可存儲的音樂播放設備和耳機完成這個目標的,那時候的媒介是播放器和耳機,行為是打開播放器播放音樂、在播放器調整音樂。

隨著互聯網和智能手機的普及,藍牙傳輸技術的升級(aptX/LDAC等),以及用戶訴求的升級和多樣化,我們可以設計出更多貼近交互層(用戶、目標、場景)的媒介和行為。比如音樂APP、藍牙播放器、藍牙耳機、線控耳機等。

此外,筆者認為:媒介和行為是相輔相成的關系,二者在交互設計的過程中會互相促進和限制。舉個例子,一些帶線控的藍牙耳機自動連上手機后,按一下耳機上的播放鍵,就能直接啟動音樂APP 開始播放了。這個「開始播放」的行為就可以設計在耳機上,而不僅僅是音樂APP里。

小結

用第一性原理,我將交互設計拆解成交互層和設計層,并結合辛向陽教授定義的交互設計5要素,得出結論:交互的本質是信息的交流與互動,由用戶、目標、場景構成;設計的本質是找到解決問題的手段,由媒介、行為構成。

交互設計的本質:設計師為用戶設計出在某個場景下信息交流與互動的媒介和行為,從而達成目標。

如何做好交互設計

1. 把握交互設計的行業差異化

本文從我個人的角度和經驗,給大家分享了我對交互設計這個底層概念的理解,在我研究的過程中,最大的體會是,交互設計不僅僅表現在屏幕上,其實在線下場景下,同樣有很多體現,比如現在熱門的服務設計,我覺得它是對交互設計的場景化應用和延伸。

由此看來,交互設計會因行業和產品形態的不同,而存在差異化。拿B端產品來說,用戶行為是完成某一項規范化的工作,而這項工作,往往具備行業和崗位專業性,設計師需要更好地理解行業和專業,才能貼近交互層(用戶、目標、場景),設計出好的媒介和行為。

2. 具備相關思維

項目思維。交互設計師的工作往往貫穿調研、需求、設計、研發、測試等環節,我們需要把每一個設計Case 當成自己的項目一樣去對待,而項目經理就是自己,充分發揮主動解決問題的意識和能力。

用戶思維、產品思維、邏輯思維等。這3個思維網絡上有很多解釋,在這里就不贅述了。

3. 充實知識儲備

點擊下方標題,查看已更新的知識篇文章:

4. 提升專業技能和底層能力

《從今天起培養這5個好習慣,讓你在 2019 年快速成長!》

寫在最后

本文從構思到寫完,斷斷續續有1個多月了,總希望找到一個合適的方式去解讀交互設計,把這個概念說明白,但事實是越研究越覺得復雜,我需要了解的還有很多。

所以,我寫這篇文章的目的不僅僅是分享我對交互設計的淺見,還希望用「第一性原理」這個拆解、分析、解決問題的思維方式,去研究「什么是交互設計」這個問題。

交互設計這個概念或領域,遠比我寫的要復雜和深入,我在研究「交互設計」路上才剛起步,希望能與讀者朋友一起交流這個話題。

藍藍設計m.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計  ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线
亚洲一区二区三区中文字幕在线观看| 亚洲一级二级三级| 欧美日韩国产成人精品| 久久青青色综合| 大桥未久女教师av一区二区| gogogo高清在线观看免费完整版| 欧美在线se| 一区二区国产盗摄色噜噜| yellow视频在线观看一区二区| 91亚洲精品久久久久久久久久久久| cao在线视频| 美洲天堂一区二卡三卡四卡视频| 91精品国产91久久| 日韩欧美一二三区| 成人午夜电影在线播放| 蜜臀久久99精品久久久画质超高清| 久久国产一区二区三区| 奇米在线7777在线精品| 亚洲区小说区| 亚洲综合在线中文字幕| 亚洲激情国产| 精品理论电影在线| 免费看欧美女人艹b| 欧美日韩一区二区三区免费| 国产精品国产三级国产aⅴ原创| 鲁鲁在线中文| 亚洲一区二区三区在线播放| 国产精品国产三级在线观看| 你懂的一区二区| www.日韩精品| 成人爽a毛片免费啪啪红桃视频| 成人激情综合| www.日韩视频| 久久天天躁狠狠躁老女人| 国产成人亚洲综合| 国产一区二区三区免费在线观看| 91免费在线视频观看| 一区二区高清在线| 久久九九热re6这里有精品| 国产精品久久久久久妇女| 麻豆免费在线观看| 九义人在线观看完整免费版电视剧| 国产欧美一区二区精品仙草咪| 国产精品x453.com| 久久精品一区二区三区不卡牛牛| 日韩精品一区二区在线观看| 欧美日韩一区二区在线观看视频| 动漫美女被爆操久久久| 欧美高清在线视频观看不卡| 日产福利视频在线观看| 日韩美女精品在线| 国产在线一区二区视频| 夜夜精品视频一区二区| 日韩中出av| 亚洲精品中文字幕| 亚洲一区二区不卡免费| 国产精品免费观看在线| 国产女人18毛片水真多成人如厕| 成人在线爆射| 亚洲在线视频福利| 亚洲综合社区| 欧美精品一区二区三区蜜桃| 欧美亚洲二区| 黑人精品一区| 精品一区二区三区在线观看| 亚洲成人性视频| 国户精品久久久久久久久久久不卡| 成人h精品动漫一区二区三区| 小草在线视频免费播放| 99国产欧美另类久久久精品| 亚洲欧美视频一区二区三区| 国产精品剧情在线亚洲| 久久久久久久久久国产精品| 日韩精品成人一区二区在线| 日本在线不卡视频一二三区| 欧美一级片一区| 暖暖成人免费视频| 日韩一区二区在线视频| 国产一区二区0| 中文字幕在线官网| 网友自拍区视频精品| 一区二区三区加勒比av| 视频一区在线| 91国偷自产一区二区三区观看| 欧美高清电影在线看| 亚洲国产综合在线| 91九色对白| 国内精品久久久久国产| 一区二区久久久久久| 国产精品久久久久久福利| 欧美日韩综合不卡| 成人国产精品久久久久久亚洲| 综合精品久久久| 欧美视频中文一区二区三区在线观看| 国产精品福利在线| 日韩视频一区二区三区在线播放| 大胆国模一区二区三区| 欧美丝袜一区| 久久亚洲综合国产精品99麻豆精品福利| 国产女优一区| 成人久久18免费网站麻豆| 国产一区在线看| 国产精品久久久久久妇女| 欧美成人午夜77777| 久久综合中文色婷婷| 亚洲人午夜色婷婷| 国产精品v欧美精品v日韩精品| 激情懂色av一区av二区av| 一本色道久久综合狠狠躁的番外| 石原莉奈在线亚洲二区| 欧美美女一区二区在线观看| www.日本久久久久com.| 日韩欧美在线一区二区| 99久久综合狠狠综合久久aⅴ| 日本vs亚洲vs韩国一区三区二区| 丝袜美腿一区二区三区动态图| 亚洲一二三四| 岛国精品在线观看| 一级毛片免费高清中文字幕久久网| 超碰在线国产| 日本欧洲国产一区二区| 第一会所亚洲原创| 成av人电影在线观看| 亚洲丁香日韩| 影音先锋欧美激情| 亚洲视频自拍| 影音先锋日韩有码| 亚洲影院色在线观看免费| 在线播放日韩| 久久精品中文字幕免费mv| 妖精视频成人观看www| av超碰免费在线| 成人午夜视频在线观看| 久久成人资源| 欧美亚洲一区二区三区| 欧美日韩mv| 亚洲品质自拍视频| 午夜av在线播放| 欧洲中文字幕国产精品| 欧美一区久久久| 成av人片一区二区| 国偷自产av一区二区三区小尤奈| 久久精品人人做人人综合| 噜噜噜在线观看免费视频日韩| 欧美 日韩 国产在线| 在线播放精品一区二区三区| 亚洲久色影视| 豆国产97在线| 国产盗摄——sm在线视频| 久久影院理伦片| 亚洲无中文字幕| 免费a级在线播放| 亚洲欧美成人影院| 欧美日韩黄网站| 国产不卡一二三区| 国内外成人免费激情在线视频网站| x99av成人免费| 国产一区二区不卡视频在线观看| 亚洲欧美日韩成人高清在线一区| 91免费视频网站| 亚洲一区免费网站| 麻豆一区二区在线| 国产91在线播放精品| 美女精品一区最新中文字幕一区二区三区|