一個優(yōu)秀的設計師不僅僅只是熟練的軟件和工具操作者,更是設計方法和思維的深度思考者。在眾多新設計工具越來越普及,UI設計師競爭越來越激烈的今天。面對設計工作中的苦惱和問題,廣大設計師更應該思考,如何讓自己變得更優(yōu)秀與“不一樣”。做設計就是做產品,本書分別從工具、設計方法與思維,以及交互與動效三個方面來闡述設計師所經歷的成長過程,以產品思維為核心,不僅告訴讀者如何做,更重要的是告訴大家為什么這么做,在這個過程中如何思考,改善設計師自身的工作方式和思維,成為“不一樣”的優(yōu)秀設計師。
很抱歉,這不只是一本教設計軟件的“工具書”
親愛的設計師小伙伴們,很感謝你能購買這本《不一樣的設計師》。相信每一位選購這本圖書的讀者,一定會充滿好奇:怎樣才算是“不一樣”的設計師呢?為什么要做個“不一樣”的設計師呢?一個軟件就可以讓我成為一個不一樣的設計師嗎?
也許你是被這本書的標題吸引而來的;也許作為一個UI設計的初學者,你想更快速地上手這款Sketch軟件;也許這本書的封面吸引了你。在寫這本書提綱的時候,我思考了很久,怎樣才算是“不一樣”呢?不一樣,對于設計師又有哪些好處呢?寫完《Sketch+Xcode雙劍合璧:移動UI設計師快速上手指南》之后,我收到了很多設計師的意見和建議,有感謝,也有批評;有鼓勵,也有謾罵。但是不管怎樣,在這一年多甚至更長的時間里,你和我都在成長,我們逐漸意識到一件事情,雖然大家通過Sketch相互認識了解,但寫一款軟件如何使用的工具書,并不能更快更好地讓大家提升。每一位設計師朋友,都有一個美好的愿望,那就是成為能獨當一面的優(yōu)秀設計者。但是否了解了一款當今火熱的軟件,就能讓你成為這樣的人呢,那我只能對你攤攤手聳聳肩。
所以,很抱歉,這并不是一本教你如何使用軟件的“工具書”。那它到底寫什么呢?別著急,讓我們聊聊另一個問題。
設計師50%的苦惱,并不來源于技能本身
作為設計師,相信每個人都有不少的苦惱,可能是剛剛步入UI設計師這個行業(yè),為自己欠缺經驗而苦惱;或者是工作一兩年,但是現(xiàn)實的殘酷讓你打了退堂鼓;或者是你投了無數(shù)份簡歷,但依然無法找到一份合適的工作;或者是工作了五六年、七八年的設計師,看不到自己的未來。
于是你拼命地在網(wǎng)絡和書籍中尋找著各種各樣的案例文章,每天來一篇“N分鐘畫一個炫酷圖標”的教程。然后,你看到了,照著做了,你學會了。接下來,努力的你做了第二個、第三個、第四個教程案例,畫了很多看起來非常漂亮的界面。“嗯,非常有成就感!這些天的努力讓我進步非?欤〖佑!”你在心里暗暗地鼓勵自己。再然后,你把這些作品放到自己的簡歷里,投給了用人單位。
一天過去了,沒有人理你。一周過去了,你滿心期待手機能響起面試邀約的電話鈴聲,可是通話記錄中卻空空如也。你開始焦躁不安。兩周過去了,來北京的生活費所剩無幾,上個月的工資即將花完,房貸和信用卡欠款等著還。你考慮著怎么過接下來的生活。你甚至想著借錢或者貸款參加一個學習幾個月就可以許諾你上萬月薪工作的學習班。你依然努力著,因為你相信越努力的人越幸運?墒乾F(xiàn)實的殘酷讓你開始迷茫,你甚至想,UI設計這個行業(yè)一點都不好做啊,還不如轉行做其他的呢。
殊不知,也許你努力錯了方向。因為你缺的不再是技能,而是思維方式和學習方法的提高。
“不一樣”源于“思維方式”及自身特色
在中國,據(jù)粗略統(tǒng)計,設計師從業(yè)者約500萬人,當然設計師包括各行各業(yè)的設計者,比如建筑設計師、服裝設計師、平面設計師等。如此龐大的基數(shù),面對著成千上萬手中和你拿著一模一樣作品和簡歷,沒有太多突出特點的設計師,也無怪乎想變得優(yōu)秀,會成為一件異常艱難的事情。
設計是一個創(chuàng)意行業(yè),沒有特色和獨立思考的精神,只會軟件操作和模仿,那么你永遠都只是一個“用手干活”而非用腦工作的“設計師”,那么,或許叫做“美工”更合適—雖然這個詞是大部分設計師的大忌。
找到自身的“特色”,成為每一個設計師的當務之急。所以,請不要掩飾自己的沒經驗,因為誰都是從沒經驗到有經驗的。但特色,一定是可以不需要過多工作年限和經驗支撐的,存在于每一個人體內的,待發(fā)掘或者可以培養(yǎng)的重要內容。
所以,找到自身特色,配合思維方式的訓練,擺脫思維惰性,讓自己成為一個不一樣的設計師吧。從另一個層面來講,你可能并不需要那么多軟件教程和例子,也許只需要那么一點“催化劑”,點燃大腦中的獨立思考精神。
“不走尋常路”并不僅僅用來描述一個品牌,放在設計師身上,也挺合適不是嗎?
這本書能為UI設計師帶來什么?
前文說過,這并不只是一本講軟件操作的“工具書”,但作為一本為移動UI設計師準備的“設計書籍”,我們還是期許他能為每一位購買了本書的讀者帶來不一樣的閱讀體驗。因此,權衡再三,我還是打算從“不一樣的工具”入手,帶著大家慢慢進入這個不一樣的“特色”尋找和發(fā)現(xiàn)之旅。
本書第一部分,我們?yōu)榇蠹規(guī)砹水斀窕鸨囊苿覷I設計工具—Sketch4.0版本的新特性及圍繞軟件之外的各種話題的討論和解決方案。不要把它當作中文軟件操作手冊,因為你無法在手冊上找到這些問題的答案。如果你想學習軟件的基本操作內容,建議您購買《Sketch+xcode雙劍合璧:移動UI設計師快速上手指南》。
第二部分,我們進入大家非常關注的設計工作流程部分。這也是大部分設計師非常關注的內容,也是作者在長時間的工作經歷中總結出的適合于絕大部分公司及工作情景的工作模式,希望能為你帶來不一樣的啟發(fā)。從另一個層面來說,Workflow(工作流)的優(yōu)化不僅僅體現(xiàn)在軟件操作層面的更新上,運用合適的工作方法和流程,建立規(guī)范的思考方式和設計方法,會成為你工作中立于不敗之地的秘密武器。
工作流梳理完畢,我們回歸設計技能層面,看看當今“不一樣”的工具能為我們帶來哪些交互和動效層面設計的便利和提升。
最后一部分,回歸觀點及思考方式。來看看靜電作為作者的“不一樣”的設計觀點。作為有潛力善于思考的設計師,樹立自己的觀點和適合自身的工作方式至關重要,希望這些獨特的觀點能成為你在設計過程中的“催化劑”,引燃大家設計的方方面面。
讀完本書,你會發(fā)現(xiàn):
1.看到一份心儀的設計,懂得自我分析和思考做法了,而不是滿世界的“求教程”了。
2.遇到問題的第一反應是自己動腦筋思考和搜索解決辦法,惰性消失啦。
3.接到一個設計任務,不是對著空白的畫布腦袋中空空蕩蕩,而是靈感時不時地閃現(xiàn)了。
4.工作和生活好像開始稍微順利起來,苦惱解決了一大半。
那么,你讀這本書的目標是什么?
一個前輩告訴我,在做任何事情之前,都要想好自己想要得到什么,目標是什么。如果你腦袋空空,任何書籍都不可能為你來實質的提升。目標明確,才能做好事情,得到提升。比如在從事一份工作之前,就樹立一個短期可實現(xiàn)的目標。當然,在讀一本書的時候,也請樹立一個目標吧!你的目標會是什么呢?首先在大腦中設定這個目標,然后可以寫在下面的橫線上,看看讀完后,你的目標實現(xiàn)了多少?你從中得到了哪些感悟?
現(xiàn)在,在Sketchchina中國社區(qū)分享自己“不一樣”的目標,將有機會獲得作者簽名紀念品。
靜電,SketchChina中國社區(qū)創(chuàng)始人,靜Design.FM主播,京東智能?東課堂特約嘉賓講師,《Sketch+Xcode雙劍合璧:移動UI設計師快速上手指南》作者,對設計及產品思維的結合有著深刻的理解,倡導感性設計與理性思維的融會貫通。曾于北京多家互聯(lián)網(wǎng)企業(yè)擔任首席設計師及管理職位,2016年底創(chuàng)辦公司,致力于互聯(lián)網(wǎng)UI設計行業(yè)在線教育與內容傳播。
1 不一樣的Sketch 40
Sketch 40 新特性概覽 002
Sketch 40 的下載、安裝與購買 004
Sketch 相關資源 007
元件與共享樣式的新特性 010
不一樣的插件―設計師的左膀右臂 016
全新的Share 和Sketch Mirror(Crystal) 028
照貓畫虎不可取―為什么要使用一倍圖做設計 034
什么? UI 設計稿要用300 分辨率?! 037
眼睛欺騙了我? Sketch 中的顏色處理方式 039
行高不對?聊聊Sketch 中的文本處理方式 043
“不一樣”的代價?將Sketch 文檔轉為PSD 文檔 046
2 不一樣的設計工作流
UI 設計師在整個工作流程中的位置 054
產品經理、交互設計師與UI 設計師 058
設計師應如何參與產品需求分析 062
為有理有據(jù)的設計做準備―設計調研及研究 065
理清設計結構―信息結構圖與產品結構圖的繪制 071
設計稿未來的模樣―低保真原型圖 075
一稿過,你準備好故事和場景了嗎? 082
設計如何產生價值?―用數(shù)據(jù)支撐設計 089
一致性的設計:理解iOS 與Android 設計規(guī)范 094
通過多種形式建立UI 設計中信息的層次感 110
建立產品視覺規(guī)范 117
不僅僅是畫圖那么簡單―優(yōu)秀設計師更理性 125
視覺走查―設計稿完美復現(xiàn)的必要步驟 127
3 不一樣的交互工具
不一樣的設計師,不只做靜態(tài)圖 134
交互和動效工具,傻傻分不清楚 135
理解手勢與常用動效曲線 143
快速玩轉交互―了解Flinto 基本功能 150
一起來玩連連看―Flinto 創(chuàng)建設計稿轉場 159
創(chuàng)建可滾動的頁面 166
Behavior Designer 的應用―無縫輪播圖實例 170
使用Flinto 制作Cover flow 實例 177
Flinto 滾動頁面的進階應用 182
在Flinto 中使用視頻與動畫 189
Behavior Designer 應用―彈層提示效果 197
利用Keynote 創(chuàng)建頁面交互效果 200
后記 206