ui-design-workflow-and-tools-1

云南体彩网?:設計師的工作流程鑒于分歧規模的公司和項目會有所差別,但基本大同小異,必須有的流程還是要執行的,今天就拿目前我所在的公司的日常舉例,順便推薦一下UI設計師日常使用的工具,干貨較多,篇幅較長,強烈推薦。

產品經理:

  • 初期:需求調研 → 競品分析 → 產品規劃;
  • 前期:思維導圖「功能模塊」 → 需求文檔「流程邏輯」,原型設計「信息架構」→ 評審;

設計師:

  • 中期:準備工作 → UI設計 → 交互原型 → 評審→ 標注切圖;

攻城獅

  • 后期:開發跟進 → 用例測試 → 上線;

云南体彩网這次重點介紹給設計師小公舉安利過日常用的工具:

一、準備工作

云南体彩网小公舉會通過口頭交流+筆+紙把需求都逐個了解清楚,明白本次的任務目標。

ui201608231

云南体彩网產品結構和邏輯梳理階段:思維導圖軟件MindNode +流程圖軟件Viso

ui201608236

邏輯梳理:流程圖軟件Visio對本次需求的流程進行梳理,這步是很有需要的

很夸張的是,大多數產品團隊中,往往只有交互設計師認真從頭到尾思考過產品流程;同時大多數產品,直到完成后才發現流程上的 bug,但此時只能假裝沒看見。

只有設計師明白產品整體的使用流程,能力站在全局的角度去看待本次的設計任務,讓設計師也從始至終參項目,這在后面會減少很多溝通成本。

ui201608237

二、UI設計

云南体彩网主力設計工具 Sketch,不消多說,無限尺寸的畫布配合快捷鍵和龐大的第三方模版更利于高效輸出移動產品原型。如果在團隊全 Mac 的配置下,還可以無縫銜接設計與前端的項目協作。

ui201608238

三、交互原型

云南体彩网強烈推薦:主力交互工具Flinto,是一個使用圖片快速生成移動應用的原型,簡單粗暴,只要上傳幾張設計效果圖隨便拖拽幾下,只需要幾分鐘就可以支配到手機上查看真切的交互效果,學習成本極低,最開心的是最新版本已經有中文版了。

功能介紹見:《SKETCH絕佳搭配!30秒制作交互原型的次時代神器FLINTO》

ui201608239

云南体彩网Appstore下載Flinto,可以在手機上實時預覽,查看真切的交互效果,跟制品差別不大,開發再也不消過來問,這個應該跳轉到哪個頁面,這個怎么操作……

ui201608232

云南体彩网尤其是給老板,客戶展示的時候,一來這貨夠專(zhuang)業(bi),二來千言萬語不如真機來體驗一下。

ui201608233

四、評審

用戶體驗地圖:把根據「問題」和「驚喜」的數量情況,和重要性水平,理性地判斷每個行為節點的情感高低,并連線。

1、看看最高點,為它多做一點事情,將它推到極致。

2、看看最低點,思考能不克不及把其它體驗值高的步調,分攤一部分功能到這里,均衡體驗情感。

ui2016082310

用戶體驗地圖:如果你加入過收費的 workshop 或者看過講設計方法的書,你一定聽過體驗地圖(Experience Maps)。在一些些臺版書籍里也叫使用者旅程圖(User Journey Maps)。

云南体彩网體驗地圖第一大優勢:好看。它以視覺化的方式,將用戶與產品或服務進行互動時的體驗分階段涌現出來,讓體驗地圖中的每一個節點都能更直觀地識別,評估和改善。豈論是電子版還是滿墻的方便貼,在效果上已經充斥了形式美。

云南体彩网體驗地圖的第二大優勢:非常貼合時下流行的「情感化設計」。體驗地圖能協助團隊精準鎖定產品引發強烈情緒反應的時刻,同時找到最適合重新設計與改進的地圖節點,這一切都幾乎用戶使用中的情感需求。

體驗地圖的第三大優勢:能夠多人介入,而且讓所有人都橫向梳理一遍產品流程。很夸張的是,大多數產品團隊中,往往只有交互設計師認真從頭到尾思考過產品流程;同時大多數產品,直到完成后才發現流程上的 bug,但此時只能假裝沒看見。
為什么你覺得體驗地圖無用?因為你不知道:

體驗地圖并不是一個自力的設計方法,它是產品用戶研究過程中重要的一部分。在我做過的案例中,體驗地圖往往是最終收尾、拿結論的最關鍵節點——但是不克不及脫離了前期其它設計方法的資料準備。

本小節來自:《為設計加分:手把手教你有效地做用戶體驗地圖》

五、切圖標注

相信大多數設計師只希望做好屬于自己的界面設計,不想在切圖和標注這上面浪費太多時間,每次一到要標注的時候,心中就萬頭草泥馬在奔驰:

云南体彩网勞資是一個設計師,不是切圖仔!!!

云南体彩网還是默默地去標注尺寸去了,心里想如果有一天能不在讓本公舉切圖該多好!

云南体彩网切圖工具演變路徑:馬克鰻 → Pxcook→ Zeplin

ui2016082311

直到發現了zeplin這個神奇的工具,以后再也不消標注和切圖了,使用zeplin有以下好處:

云南体彩网1.標注尺寸那里需要點那里,距離相鄰元素的所有尺寸和顏色清晰明了,之前是標注太細致,ui沒法看,標太少,相當于沒標注

2.支持css/less/saas等css屬性,直接粘貼,開發簡直不克不及太爽了

云南体彩网3.支持標注,方便團隊協作(可以替代prd文檔了)

云南体彩网4.支持色板和字體 導航 ,可以用作使用規范

實戰運用見:《UI設計師怒轉!如何做一份讓工程師淚流滿面的標注?》

ui2016082312

隨著sketch的普及,好多團隊都陸陸續續把sketch作為設計主力工具,去年zeplin發布1.0版本時候還不支持Photoshop cc,一年過去了,最新版本已經可以兼容最新版的ps了,可喜可賀。而且zeplin客戶端在Mac和Windows上面都有對應的版本。

再也不需要為了一個zeplin去學習sketch了,ps也支持啦!究竟再重新學一個軟件,本寶寶心好累(ps:經過這一年,我差不多也可以將sketch用于日常工作傍邊了)

ui2016082313

安裝步調:

這里不展開講,后面專欄會詳細介紹一些tips和使用技巧。

步調一:安裝軟件+zeplin插件

1. Mac用戶:安裝sketch;Zeplin.app;zeplin-sketch插件
直接解壓安裝即可

2. Windows用戶:安裝Photoshop CC2015;Zeplin.app;zeplin-ps插件&面板

步調二:注冊zeplin迭代帳號,邀請項目人員。 步調三:把sketch或ps里的文件導出到zeplin

使用姿勢:

gif20160823 (3)

云南体彩网切圖神器二:Slicy是我測過幾種輔助切圖工具后又回來使用的神器。「把整個 PSD 扔進去,結束。」簡潔利落不啰嗦。我愛它的水平已經到了沒有它我就不會切圖了(哈哈)。

ui2016082314

云南体彩网1. PS 圖層依規則命名→2. 把檔案丟進 Slicy 里→ 3.完成

具體教程見:《“沒有它我就不會切圖!”省時省力的切圖神器SLICY下載》

ui2016082315

ui2016082316

夠簡單無腦了吧?

使用姿勢gif:

gif20160823 (1)

「其他」

云南体彩网1.圖標管理工具:iconjar:目前支持 SVG、PNG、Gif 三種格式的圖片。建議人人去官方下載官方素材庫資源時候盡量導入svg格式,究竟是矢量的。

更多功能介紹見:《術業專攻!超方便的圖標素材管理工具ICONJAR》

ui2016082317

選中某個圖標,側邊欄會涌現名稱和標簽,當然不需要的右邊欄話也可以在菜單欄隱藏.

偷懶姿勢:

1. 下載圖標并安裝:官方素材庫
2. 把圖標拖進sketch或ps 里。

gif20160823 (2)

云南体彩网2.字體管理工具:Rightfont

更多功能介紹見:《設計師們!超好用的字體管理工具RIGHTFONT》

ui201608234

下面是google自動翻譯的,也許意思還是正確的:

ui2016082318

GUI 規范管理與共享(圖標/色板)

云南体彩网這個可以當做公司內部設計師和開發公用的一套GUI設計規范來用,

  • 團隊:收費
  • 個人:完全免費

頂部工具欄可以創建色板,吸取顏色創建完成后,直接Command+c復制 Commandl+v粘貼 進sketch或ps 里,完成取色任務。

最右邊支持HEX RGB HSB 顏色的拷貝和粘貼,同時支持CSS 顏色代碼快速顯示:

ui2016082320

偷懶姿勢:

1. 創建色板

2. 把Command+c復制 Commandl+v粘貼 進Sketch或ps 里。

云南体彩网4.設計素材收集:Zoommy+Inboard

每個設計師都有一個習慣,那就是做設計之前先去搜素材,每次找個合適的素材會花很長的時間,百度的圖片質量各位都懂,那么問題來了,如何快速的獲取到你想要的圖片素材呢?

相對來說我們上高中的時候找圖片,找半天都找不到中意的素材,現在比之前好多了,免費的素材也要多很多,有些質量還挺棒的,高清五碼大圖。

云南体彩网所以小公舉用的就是一款多圖庫源管理已用-Zoommy,有了它我們可以很方便的關注40多個圖庫源,找素材的效率大幅提升。

ui2016082321

Inboard:比Ember更輕盈

更多功能介紹加入:《有圖的都交給我!新生代圖片素材管理神器INBOARD》

如果你用過Ember回頭再來使用Inboard,你會發現它在功能上確實會少很多。但帶來的好處就是應用足夠輕盈,易用。再看看Ember中那些復雜的功能,我會用到的始終只會是它其中的一小部分。

1. 文件夾和Tag方式的圖片素材管理

2. Chrome、Safari的全屏截圖保存

云南体彩网3. Dribbble like的關注兩個核心功能 延伸閱讀 如何成為 Dribbble 的 Player ?

使用截圖:

ui201608235

「本月最值得閱讀收藏的完美像素使用手冊」

  1. 《值得每個設計師收藏的《完美像素使用手冊》之原理篇》
  2. 《中文版來了!值得每個設計師收藏的《完美像素使用手冊》之細節篇》
  3. 《第三集!值得每個設計師收藏的《完美像素使用手冊》之易用性篇》
  4. 《第四集!值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》
  5. 《最終版!值得每個設計師收藏的《完美像素使用手冊》之軟件技巧篇》

原文地址:

yestone-uisdc-2

【優設網 原創文章 投稿郵箱:yuan@7daer.cn】

================關于優設網================
“優設網7daer.cn“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.7daer.cn/book/
設計微博:擁有粉絲量150萬的人氣微博 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.7daer.cn

點贊
收藏 11
繼續閱讀相關文章

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
評論 收藏