UI学习笔记《UI设计跟我学》0 项⽬⼯作流程
01 产品经理不是经理
产品经理不是负责⼈，⽽是负责产品，最终获知关于产品的所有信息。
1、做⼀款产品要明确的问题
（1）who?--产品的⽤户是谁
（2）user for? --⽤户使⽤产品是为了获得...
（3）company for?--公司推出是.......
2、产品经理的⼯作内容
· BRD 商业需求⽂档（Business Requirement Document）: 产品的战略层⾯
· MRD 市场....（Market ....）：产品的市场情况、战术
·  PRD 产品.... (Product ....)  ：how细化产品
即对于⼀个产品的what、come、go。
3、⽤户画像
a）为什么你要⼀款xxapp？
--它是什么
--解决什么
ui设计师资格证怎么考-
-什么功能
b）你期待它带来？
--服务
--内容
c）各板块细分的功能
4、头脑风暴
a.头脑中，多维度
b.UI，多版本页⾯呈现
c.⽤户体验，⼼理->互动效果
d.实⽤性，真的便利？
e.企业，收⽀平衡、好的盈利
02 思路缜密的交互设计
1、低保真原型图
是产品设计的基础呈现⽅式。可⼿绘可电⼦。
（1）作⽤：
a.呈现主题信息
b.勾勒出结构和布局
c.⽤户交互的界⾯的主视图和描述
（2）省略代替：
被省略的地⽅ -> 占位符；
图⽚                -> 带斜线的框线；
⽂本                -> 按排版要求，⽤⼀些标识性的⽂字代替
2、⾼保真原型图
是真实地模拟产品的最终视觉、交互效果和⽤户体验，这三⽅⾯⾮常接近真实产品。
根据开发状态，做最⾼保真的原型，最终期待是能达到和产品实际运⾏时⼀样的状态。
（1）作⽤：
它可降低...
--沟通成本
--制作成本
当使⽤⼀个按钮被按下的时候，相应的操作必须被执⾏，对应页⾯也必须出现，尽可能地模仿完整的产品体验。
3、why原型重要？
原型通常被拿来给真正的⽤户测试产品⽤的。早期的原型测试能够节省many成本+时间。
单靠设计师介⼊就可以⾼效构建原型⽽⽆须程序员的介⼊，极省事。
03做好风格定位
把刚才开会的内容，以及细节想⼀遍，不明⽩的地⽅、不理解的地⽅到相关的⼈问明⽩，多和他们沟通，能提出问题说明你已经深⼊了解了项⽬。
a.研究竞争对⼿、同类产品的设计风格，以确⽴⾃⼰的
先思考，再设计
b.收集素材
①创意来源：花瓣、站酷、优设、dribbble、pinterest、
②旧上出新，拿捏尺度，避抄袭之嫌
③阐述故事，产品灵魂
④匠⼈思维，熟能⽣巧
⑤私⼈资料库，平⽇搜集，分类归档
c.设计出⾃⼰产品的风格，并在⾸页效果中体现
*若已是⾼保真原型图，则不要轻易改变产品的功能布局
3、风格定位
（1） 定义
（2）采⽤扁平化设计风格
太繁琐和太厚重的设计会增加⽤户使⽤的负担，并对产品内容也有⼀定的⼲扰。
扁平化设计attention：
①温暖绚丽暖⾊调
②图形简洁抽象化
③构图布局清晰
（3）情感化信息表达⽅式
（4）提炼产品关键词
（5）⾊彩提取
4、⾸先开始设计⾸页
5、风格评审、初遇职场潜规则
在确定主视觉风格时要尽可能地多提供1~2套风格
6、提取设计元素
制作规范⽂档：颜⾊、⽂字、按钮、图标、控件、状态提⽰、顶部标签、底部标签、⼯具栏、列表等样式、⼤⼩、颜⾊、位置摆放等要求04 控件的秘密
（1）设计控件的⽬的
a.控件通⽤，减少⼯作量
b.视觉统⼀
c.降低⽤户学习软件操作的成本
（2）控件规范与原则
统⼀性、协同性、⾼效性
iOS操作系统有它⼀套规则体系
（3）搜索框设计
（4）更多控件样式
05 超多的功能页⾯
1、烧脑的引导页设计
⼀般不超5页
（1）按⽬的区分：
a.功能介绍类
b.使⽤说明类
c.推⼴类
除了有⼀些产品功能介绍外，更多的是想传达产品的态度，让⽤户更明⽩这个产品的情怀，并考虑与整个产品风格、公司形象相⼀致。
d.问题解决类
2、表现⽅式
（1）⽂字与界⾯组合
（2）..与插图..
（3）动态效果与⾳乐
3、总结
（1）⽂案⾔简意骇，突出核⼼
（2）视觉聚焦
（3）富于情感化
a.⽂案具象化
b.页⾯动效（放⼤、缩⼩、平移、滚动、弹跳）、页⾯间交互⽅式的差异化
（4）与产品、公司基调相⼀致
酷炫的引导页设计需要UI设计师对设计的产品有⾜够的了解，除了产品功能、产品使⽤⽅法、品牌形象等，我们还要充分了解产品所在⾏业属性及流⾏的样式。
2、不可轻视的登录注册
产品的不同 -> 登录注册时⽤户提交的信息、步骤、页⾯的多少、内容也不同
3、商城模块设计
（1）~（8）、略
（9）总结设计原则和⽅法
①公司/组织的Logo在所有页⾯中处同个位置
②⽤户所需的所有数据内容均按先后次序合理显⽰
③所有的重要选项都要在主页中显⽰
④重要条⽬始终显⽰（在页⾯的顶端中间位置）
⑤消息、提⽰、通知等均⽤户易处
⑥⼆级页⾯有别于主页、其他级页⾯
⑦每个APP页⾯长度适当
⑧长⽹页上使⽤可点击的“内容列表”
⑨专门的导航页⾯要短⼩（避免滚屏，⽤户⼀眼全览，要有全局观）
⑩分页优先，⽽⾮滚屏；滚屏<=4个整屏，不宜多；避免⽔平滚屏
需要⽤户仔细阅读⽂字时⽤滚屏
为框架提供标题
注意主页中⾯板块的宽度
⼀级导航置于左侧⾯板
⽂本区域的周围是否有⾜够的间隔
各条⽬是否合理分列，⽤标题清晰划分区域
4、⽤户板块设计
略
5、服务板块设计
略
06 好玩的图标设计
略
07 别给程序员添⿇烦
1、标注软件
PxCook、Markman
2、标注⽅法
略
08 快要收⼯啦
1、iOS适配⽅法
（1）按照宽度750px（iPhone）来设计，除位图之外所有的设计元素⽤⽮量路径来做。图⽚使⽤智能对象，⽅便放⼤、缩⼩。设计定稿后做标注，输出标注图。
……
2、Android适配⽅法
（1）按分辨率720px x 1280px来做设计稿。……
……

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。