【2017.11.15】设计师的正确工作流程
2017-11-15 19:52
148 查看
天才靠的是积累,聪明靠的是努力。
可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题。Banner[1] 主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。
Banner设计的六大原则
如何设计一款好的Banner-知乎
fotor-在线快速平面设计平台
头脑风暴:
一种创造能力的集体训练法。
当一群人围绕一个特定的兴趣领域产生新观点的时候,这种情境就叫做头脑风暴。
头脑风暴-百度
极客:
极客是美国俚语“geek”的音译。随着互联网文化的兴起,这个词含有智力超群和努力的语意,又被用于形容对计算机和网络技术有狂热兴趣并投入大量时间钻研的人。在国外普遍定义Geek是指一些喜于业余时在电脑网络上与人交往的人,一般认为在电脑和网络上进行生活的人就是Geek现。
极客
软件:
- Axure:拥有全面的Wed控件库,直接拖曳就可以快速制作网站的原型,丰富的动态面板可以用来完成各种交互效果,无论给什么阶段的人看都是简单移动的。
- Balsamiq Mockups:功能同Axure,所有的元素都是手绘风格的图像。
- Illustrator: AI,有利于矢量图形的处理,不过工作效率较低
- Ptototyping on Paper: POP
先不要动手,先去分析竞品,记录各自竞品的优点和缺点。想一想:这款竞品为什么不受欢迎,或者为什么这么受欢迎?这个元素的颜色用的是否恰当?这个风格是否符合用户?这个按钮或者标题文字的大小位置是否恰当?
hig:highlight,高亮;
sel:select,选中;
dis:disable,不可用;
引导页:user guide
加载:loading
登陆:login
登陆条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的:current
小技巧:tips
图标:icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
上传:upload
头:header
内容:content/container
尾/页脚:footer
导航:nav
侧栏:column
左,右,中:left right center
标志:LOGO
广告:banner
页面主题:main
子导航:subnav
菜单:menu
子菜单:sunmenu
版权:copyright
投票:vote
边导航:sidebar
摘要:summary
吐血整理( ﹁ ﹁ ) ~→
扩展扩展:
banner 编辑:可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题。Banner[1] 主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。
Banner设计的六大原则
如何设计一款好的Banner-知乎
fotor-在线快速平面设计平台
头脑风暴:
一种创造能力的集体训练法。
当一群人围绕一个特定的兴趣领域产生新观点的时候,这种情境就叫做头脑风暴。
头脑风暴-百度
极客:
极客是美国俚语“geek”的音译。随着互联网文化的兴起,这个词含有智力超群和努力的语意,又被用于形容对计算机和网络技术有狂热兴趣并投入大量时间钻研的人。在国外普遍定义Geek是指一些喜于业余时在电脑网络上与人交往的人,一般认为在电脑和网络上进行生活的人就是Geek现。
极客
一,头脑风暴
头脑风暴最怕的就是矜持
二, 交互草图
准备一个玻璃墙或者大黑板、几打便利贴、几种颜色的油性笔、几个小标记磁铁。软件:
- Axure:拥有全面的Wed控件库,直接拖曳就可以快速制作网站的原型,丰富的动态面板可以用来完成各种交互效果,无论给什么阶段的人看都是简单移动的。
- Balsamiq Mockups:功能同Axure,所有的元素都是手绘风格的图像。
- Illustrator: AI,有利于矢量图形的处理,不过工作效率较低
- Ptototyping on Paper: POP
三,设计阶段
每做一个项目之前最好下载大量的同类竞品,贴延后将亮点部分截图先不要动手,先去分析竞品,记录各自竞品的优点和缺点。想一想:这款竞品为什么不受欢迎,或者为什么这么受欢迎?这个元素的颜色用的是否恰当?这个风格是否符合用户?这个按钮或者标题文字的大小位置是否恰当?
工具:网点纸,图标网格纸,iphone6模板网点纸
四,输出研发
所谓输出,也可以更加通俗地说,叫作切图。
在PhotoShop中建议采用下面的样式:
模块类别功能_状态,例如:Nav_button_message_sel状态:
nor:normal,正常;hig:highlight,高亮;
sel:select,选中;
dis:disable,不可用;
五,动态描述
可以使用ps的时间轴
六,补充待命
后续七,产品上线
后续八,倾听用户
后续Appendix:APP切图常用英文对照参考
启动页:slashscreens引导页:user guide
加载:loading
登陆:login
登陆条:loginbar
注册:register
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的:current
小技巧:tips
图标:icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
上传:upload
头:header
内容:content/container
尾/页脚:footer
导航:nav
侧栏:column
左,右,中:left right center
标志:LOGO
广告:banner
页面主题:main
子导航:subnav
菜单:menu
子菜单:sunmenu
版权:copyright
投票:vote
边导航:sidebar
摘要:summary
吐血整理( ﹁ ﹁ ) ~→
学习素材:视界·无界-写给UI设计师的设计书(Design Without Borders-A guidebook For UI Designer)【王涵】
感谢感谢( *︾▽︾)相关文章推荐
- 集成一个第三方SDK正确工作流程(踩坑有感)
- 正确把控seo优化工作流程
- 专题4-我是bootloader设计师-uboot工作流程分析+G-boot构架设计
- Fixflow工作流程——介绍
- TI-Davinci开发系列之八x-loader工作流程分析
- Struts的工作流程
- lvs的DR模型工作流程从ip数据层的详细分析
- Twitter Storm源代码分析之acker工作流程
- struts框架的工作流程及其环境搭建(版本2.2.3)
- 浅谈struts2工作流程
- Hbase中对数据 增删改查 工作流程
- Android Wifi的工作流程
- springmvc-2,springmvc的大概工作流程
- 综合布线工作组课题工作流程
- Struts工作流程
- android wifi工作流程
- SSL证书的工作流程
- HP data protector软件学习1--基本角色与基本工作流程
- struts1.X工作流程
- 【转】理解全新的Flash Catalyst CS5.5和Flash Builder 4.5工作流程