UI设计师需要了解的设计工作流程

每个设计师看文章都有自己的喜好,有些人喜欢看一些纯设计技法或者设计教程,有些人喜欢看一些偏理论的知识点,比如工作经验、设计流程、设计分析等等。其实作为一名UI设计师应该看文章不要挑剔,每一方面都要看一下,这样才能更好的提升自己的设计水平和管理能力。我这方面做得不够好,动手不够多,教程存了一大堆,基本没看过,希望自己以后能多练习~

今天主要来跟大家聊聊我自己的工作习惯和方法,相信作为新人看了一定会收货很多~

1、一般怎么规划好工作上的需求?

我使用teambition软件来管理我的日常需求,teambition是一款团队协作软件,由于公司使用的是tower,所以目前teambiton我是用来管理个人需求。我用过tower,可能觉得界面不够美观,有些地方体验不是特别好,不过用来团队协作应该也是不错的。由于朋友的推荐,我就尝试用teambiton来管理个人的日常需求,发现已经能够满足日常的工作需要了。下面我放上几张截图来说明我如何使用teambition。因为teambition功能点非常多,这里只是做个示例,希望有兴趣的自己体验一下。

产品设计流程图(PM)

由于截图限制,没法截图完整,这里的所有卡片列表都是可以移动和修改的,非常方便。

产品设计流程图

App设计流程图

适合全新App设计,整理出所有大致需要做的东西,然后按照从左到右的顺序分别完成。

App设计流程图

设计走查—界面视觉

这里是设计走查的界面视觉的详情页,我这里只是大概的写了一下,卡片内可以设置时间、上传附件、添加子任务等等。

界面视觉子页面

每日工作流程图

这是我日常的工作流程,这里只是举个例子,所以每项基本就列了一项,每日工作回顾是每天要回顾一些东西,比如查看邮箱、查看Tower上任务等。需求列表主要是放置一些需要完成的任务事项。进行中的意思是今天正在做的事项。本周完成事项是把这周完成的事项都拖到这里,方便周末的时候写周报。Bug列表主要是平常体验App发现的问题,然后记录在这里方便以后解决。

每日工作流程图

感兴趣的可以自己去研究一下teambition软件,类似的软件有很多,比如tower、trello等等,大家找到适合自己的就行,它是一个团队协作软件,比较适合团队之间的合作,而且teambition也提供了很多流程模板,具体的teambition使用方法可以去看官网(支持各大平台),如果有问题可以留言~这里就不再讲述了。

2、UI设计会用到哪些工具,推荐一个你喜欢的功能点?

我一般用sketch完成UI界面设计,zeplin完成标注,我所知道的大部分UI设计师都是用sketch来做界面设计,Sketch Measure来标注;也有设计师用PS来做设计稿(可能公司没配Mac),如果你之前还是用PS做移动UI界面,可以尝试一下Sketch,不过sketch现在采用了年费制度,你可以先下载下来体验一下。下面我来简单介绍一下Sketch44的一个新功能,希望你喜欢~

Sketch 44的Resizing功能

前面的功能介绍来自Medium的Jon Moore的,主要是为了方便大家学习,后面我会具体操作示范

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

虽然间距固定于边角了,但是你会发现由于缩放的时候白色矩形大小在缩小,因为没设置Fix Width和Fix Height

固定边角,白色矩形大小固定不变(固定上方和右边,并设置Fix Width和Fix Height)

白色矩形宽度不变,距离上方、右侧、下方间距不变(固定上方、下方、右边,Fix Width)

白色居中居中显示(设置Fix Width和Fix Height)

文字段落距离两侧和上方间距不变(固定上方、右边、左边)

文字距离段落两侧不变(固定右边和左边)


演示设计稿750x1334如何变到1242x2208尺寸

首先把750尺寸设计稿缩放到150%(因为@3x和@2x是1.5倍关系)得到下面的图:左侧:750x1334,右侧1125x2001

直接修改画板大小,1125x2001大小改成1242x2208尺寸

得到下面的图:左侧:750x1334,右侧1242x2208


最终适配图:左侧750x1334,右侧1242x2208,这个页面还不算特别复杂,只是通过这个简单的案例希望大家可以举一反三,其实在实际工作中一般也不需要做2套不同尺寸的图~

3、如何整理设计文档,怎么分类比较好?

下面是我自己工作的分类图,我是参考了其他人的文件分类,然后按照自己的工作习惯整理的,所以大家也可以参考一下,做出符合自己的文件夹分类

4、怎么样才能在Dribbble、Pinterest找到相应的UI界面?

其实一般国内花瓣网就足够了,如果你翻墙去国外网站或者google上找相应的UI界面,那就必须了解UI界面的相关词汇了,我这里给大家总结一些,希望大家下去自己平常多多积累,这样就不用担心搜不到相关页面了。

最后希望这篇文章能够帮到一些新手UI设计师,目的是为了提升自己的工作流程,把工作做的更好,谢谢~,如果有问题可以留言告诉我,我会第一时间回复。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容