交互和UI工作内容汇总(不断更新)

一下内容算是对工作的总结,也希望能帮助还没入行的同学。

一下内容大概遵循从上到下的顺序,当然实际工作中可能是同时进行的,或者反复修改的。

不同的团队有不同的工作流程,不可照搬,灵活处理。


产品理解

理解产品产品目标,产品使用人群,产品形态等。

产品的亮点在哪?关键在哪?有没有遗漏的地方?市场上有哪些类似的产品?

这一步的目的就是充分理解产品经历的想法,尽量减少理解偏差。

有竞品可以看看,我个人更加喜欢自己先思考,再看看竞品,有什么地方和自己想的不一样,为什么人家那么做。


优先级

确定产品功能的优先级,避免犯每一个功能都是优先的低级错误,减少扯皮时间。

可以用文档的形式列出,与开发和领导沟通,这一步不需要太多时间,但是很重要。

提示一个,功能尽量细分,以最小的业务逻辑为单位,比如“搜索”分为“热门关键词提示搜索”等等。


流程

流程图的意义在于理清我们的思路,相比于结果,更在于绘制的过程。

很多忽略的细节就是在流程图里清晰了。

按照网上的资料,流程也分为很多种,这里推荐绘制业务流程图和产品流程图。

注意区分业务流程和产品流程,思路并不需要一样,这是关键。


导航布局

这里把导航布局单独列出来,因为导航实在太重要。

基本上确定了导航,整个应用的结构就基本确定了。

一个应用的导航设计的不好,其他东西再怎么优化都是小修小补,所以在确定导航时候要慎重考虑。


线框图

线框图一定是在导航的基础进行的,这一步看起来比较有意思,但实际工作还是需要扯皮的。

线框图看起来简单,还是有很多容易出错的地方。

线框图输出的一张PNG,但其实他不是静态的,需要充分考虑各种滑动点击拖放的情况。

画图之前多看看各种控件,各种列表,各种模式。

想要快速出图,推荐使用墨刀,傻瓜式的使用。

balsamiq mockups属于手绘风格的软件,效果也不错,推荐使用。


页面跳转图

跳转图是线框图的补充,可做可不做。

据我所知,大公司会做。因为有专门交互人员。

提示,线太多的话容易乱,交叉太多分不清哪里连哪里,可以用文字代替线。


交互说明

交互说明一般和线框图一起出现,我这里单独列出来。

主要以文字的形式表达,文字简练,能够说明白即可。

涉及到各种状态,极限情况,按钮变化,手势操作等。

是整个应用的行为层的最终产物。


整体配色

终于到视觉部分了。

对于小团队来说,我建议一开始就确认首页的配色,其他页面一边推一边配颜色,不至于耽误了时间。

首页的配色无非就是确认主色。

颜色的选择应该灵活,使用能够代表应用本身的颜色,而不是刻板的使用“常规颜色”。

配色还应讲究可用性,看不清,看着累,容易看错的配色尽量避免。


首页效果

也有人叫做风格稿,顾名思义确定风格的意思。

如果需要可以加效果做的好看些,个人觉得没必要,浪费设计的精力。

这里需要特别说一下,实际上现在一些用户量很大的应用首页并没有什么风格不风格的,界面显示的质量和内容有关,交互的布局已经确认了。

在过年的时候淘宝会换成节日相应主题,过完年了马上换回来,这个是需要首页效果图的。


页面推进

如果前面的准备工作充分的话,这一步就会舒服些。

推页面的话我是用sktch,效率非常高,利用样式模板的功能可以很方便的修改配色。

我喜欢把画板按照模块相近的排序,画板太多的话,会铺满好几个屏幕。

一边推一边在手机上确认效果,可以避免一些错误。


产品文字

文字也是容易被忽略的部分,特别是草草上线的产品。

熟悉产品的人基本上不需要仔细看文字就可以操作,而新手用户还是需要看文字的。

所以,要以第一次使用者的角度来安排文字。确保大众能够看得懂。

避免过于激进的文字,会使用户烦躁。

做到语气平和,内容明晰。

如果有竞品,在保证以上要求的情况下,优先使用竞品已使用的文字。


ICON绘制

我习惯把ICON单独归为一类,在sketch中用画板摆在一块,好做统一修改和输出。

另外一般的应用不建议绘制很个性的图标,降低辨识度是比较致命的。

难点在于不常见的图标,没有参考的例子。


绘制空状态

空状态是很常见的,没有登陆的个人中心、没有评论的页面、消息为零的页面等。

空状态应点到为止,不做过醒目的处理,表达出当前状态的意思,不要突兀的提示用户做操作。

有了空状态,应用的完整度有较大提升。


刷新设计

内容型的应用都会有刷新功能,下拉刷新已经被广大用户所习惯。

实际上刷新动效属于加载动效的一种,一般把下拉刷新单独讨论。

实现的话,我们试过使用GIF图,当然效果并不很好。


其他动效设计

启动页、登陆页、滚动动效、弹出框、左右滑动设计等。

可使用framerJS或AE制作。

动效设计不宜过于浮夸,依然是点到为止最好。

除非是传达品牌认知的设计,可以设计得特别一点。


品牌设计

LOGO设计、名片设计、海报设计等。


Banner设计

结合内容的设计,手机banner区域往往很小,不宜设计复杂。


推广图

包括应用商店的图片,一些弹出的广告等。

结合产品的卖点来做,想用户所想,尽量不要堆砌功能点,工具型应用没办法。

用销售的眼光来做设计,不断反思能否打动用户。


规范文档

大公司或多或少都会有规范,小团队的规范都在设计师的脑海里。

团队小不主张话很多时间去搞,项目比较大可以简单搞一个。

列出配色、文字设计标准、常用间距常用的几个。

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

推荐阅读更多精彩内容