UI設(shè)計(jì)師最需要了解的設(shè)計(jì)工作流程

作者:cyRotel
分類: 教程
2017-05-24
21791

其實(shí)作為一名UI設(shè)計(jì)師應(yīng)該看文章不要挑剔,每一方面都要看一下,這樣才能更好的提升自己的設(shè)計(jì)水平和管理能力。

每個(gè)設(shè)計(jì)師看文章都有自己的喜好,有些人喜歡看一些純?cè)O(shè)計(jì)技法或者設(shè)計(jì)教程,有些人喜歡看一些偏理論的知識(shí)點(diǎn),比如工作經(jīng)驗(yàn)、設(shè)計(jì)流程、設(shè)計(jì)分析等等。其實(shí)作為一名UI設(shè)計(jì)師應(yīng)該看文章不要挑剔,每一方面都要看一下,這樣才能更好的提升自己的設(shè)計(jì)水平和管理能力。

今天主要來跟大家聊聊我自己的工作習(xí)慣和方法,相信作新人看了一定會(huì)收獲很多。

1.  一般怎么規(guī)劃好工作上的需求?

我使用teambition軟件來管理我的日常需求,teambition是一款團(tuán)隊(duì)協(xié)作軟件,由于公司使用的是tower,所以目前teambiton我是用來管理個(gè)人需求。我用過tower,可能覺得界面不夠美觀,有些地方體驗(yàn)不是特別好,不過用來團(tuán)隊(duì)協(xié)作應(yīng)該也是不錯(cuò)的。由于朋友的推薦,我就嘗試用teambiton來管理個(gè)人的日常需求,發(fā)現(xiàn)已經(jīng)能夠滿足日常的工作需要了。下面我放上幾張截圖來說明我如何使用teambition。因?yàn)閠eambition功能點(diǎn)非常多,這里只是做個(gè)示例,希望有興趣的自己體驗(yàn)一下。

產(chǎn)品設(shè)計(jì)流程圖(PM)

產(chǎn)品設(shè)計(jì)流程圖(PM).jpg

App設(shè)計(jì)流程圖

App設(shè)計(jì)流程圖.jpg

適合全新App設(shè)計(jì),整理出所有大致需要做的東西,然后按照從左到右的順序分別完成。

設(shè)計(jì)走查 – 界面視覺

設(shè)計(jì)走查 – 界面視覺.jpg

這里是設(shè)計(jì)走查的界面視覺的詳情頁,我這里只是大概的寫了一下,卡片內(nèi)可以設(shè)置時(shí)間、上傳附件、添加子任務(wù)等等。

每日工作流程圖

每日工作流程圖.jpg

這是我日常的工作流程,這里只是舉個(gè)例子,所以每項(xiàng)基本就列了一項(xiàng),每日工作回顧是每天要回顧一些東西,比如查看郵箱、查看Tower上任務(wù)等。需求列表主要是放置一些需要完成的任務(wù)事項(xiàng)。進(jìn)行中的意思是今天正在做的事項(xiàng)。本周完成事項(xiàng)是把這周完成的事項(xiàng)都拖到這里,方便周末的時(shí)候?qū)懼軋?bào)。Bug列表主要是平常體驗(yàn)App發(fā)現(xiàn)的問題,然后記錄在這里方便以后解決。

感興趣的可以自己去研究一下teambition軟件,類似的軟件有很多,比如tower、trello等等,大家找到適合自己的就行,它是一個(gè)團(tuán)隊(duì)協(xié)作軟件,比較適合團(tuán)隊(duì)之間的合作,而且teambition也提供了很多流程模板,具體的teambition使用方法可以去看官網(wǎng)(支持各大平臺(tái)),如果有問題可以留言~這里就不再講述了。

2.  UI設(shè)計(jì)會(huì)用到哪些工具,推薦一個(gè)你喜歡的功能點(diǎn)?

我一般用sketch完成UI界面設(shè)計(jì),zeplin完成標(biāo)注,我所知道的大部分UI設(shè)計(jì)師都是用sketch來做界面設(shè)計(jì),Sketch Measure來標(biāo)注;也有設(shè)計(jì)師用PS來做設(shè)計(jì)稿(可能公司沒配Mac),如果你之前還是用PS做移動(dòng)UI界面,可以嘗試一下Sketch,不過sketch現(xiàn)在采用了年費(fèi)制度,你可以先下載下來體驗(yàn)一下。下面我來簡單介紹一下Sketch44的一個(gè)新功能,希望你喜歡~

Sketch 44的Resizing功能

前面的功能介紹來自Medium的Jon Moore的,主要是為了方便大家學(xué)習(xí),后面我會(huì)具體操作示范。

Sketch 44的Resizing功能.png

20px的正方形白色盒子距離紫色上方和右方固定;

uisdc-ui-20170523-24.gif

雖然間距固定于邊角了,但是你會(huì)發(fā)現(xiàn)由于縮放的時(shí)候白色矩形大小在縮小,因?yàn)闆]設(shè)置Fix Width和Fix Height。

Sketch 44的Resizing功能.gif

固定邊角,白色矩形大小固定不變(固定上方和右邊,并設(shè)置Fix Width和Fix Height)。

Sketch 44的Resizing功能.gif

白色矩形寬度不變,距離上方、右側(cè)、下方間距不變(固定上方、下方、右邊,F(xiàn)ix Width)。

Sketch 44的Resizing功能.gif

白色居中居中顯示(設(shè)置Fix Width和Fix Height)。

Sketch 44的Resizing功能.gif

文字段落距離兩側(cè)和上方間距不變(固定上方、右邊、左邊)。

Sketch 44的Resizing功能.gif

文字距離段落兩側(cè)不變(固定右邊和左邊)。

Sketch 44的Resizing功能.gif

演示設(shè)計(jì)稿750 x 1334如何變到1242 x 2208尺寸。

Sketch 44的Resizing功能.jpg

首先把750尺寸設(shè)計(jì)稿縮放到150%(因?yàn)锧3x和@2x是1.5倍關(guān)系),得到下面的圖:左側(cè):750×1334,右側(cè)1125×2001。

Sketch 44的Resizing功能.jpg

Sketch 44的Resizing功能.jpg

直接修改畫板大小,1125×2001大小改成1242×2208尺寸,得到下面的圖:左側(cè):750×1334,右側(cè)1242×2208。

Sketch 44的Resizing功能.jpg


Sketch 44的Resizing功能.jpg

Sketch 44的Resizing功能.jpg

最終適配圖:左側(cè)750×1334,右側(cè)1242×2208,這個(gè)頁面還不算特別復(fù)雜,只是通過這個(gè)簡單的案例希望大家可以舉一反三,其實(shí)在實(shí)際工作中一般也不需要做2套不同尺寸的圖~

Sketch 44的Resizing功能.jpg

3.  如何整理設(shè)計(jì)文檔,怎么分類比較好?

下面是我自己工作的分類圖,我是參考了其他人的文件分類,然后按照自己的工作習(xí)慣整理的,所以大家也可以參考一下,做出符合自己的文件夾分類。

Sketch 44的Resizing功能.jpg

4.  怎么樣才能在Dribbble、Pinterest找到相應(yīng)的UI界面?

其實(shí)一般國內(nèi)花瓣網(wǎng)就足夠了,如果你翻墻去國外網(wǎng)站或者google上找相應(yīng)的UI界面,那就必須了解UI界面的相關(guān)詞匯了,我這里給大家總結(jié)一些,希望大家下去自己平常多多積累,這樣就不用擔(dān)心搜不到相關(guān)頁面了。

怎么樣才能在Dribbble、Pinterest找到相應(yīng)的UI界面.jpg

最后希望這篇文章能夠幫到一些新手UI設(shè)計(jì)師,目的是為了提升自己的工作流程,把工作做的更好。


-end-


2
1
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號(hào)樓2層

版權(quán)信息

  移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)