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?

                --它是什么

                --解决什么

                --什么功能

        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、behance...

                ②旧上出新,拿捏尺度,避抄袭之嫌

                ③阐述故事,产品灵魂

                ④匠人思维,熟能生巧

                ⑤私人资料库,平日搜集,分类归档

        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来做设计稿。……

……

3、切图

09 别以为上线就可以收工了

1、参与测试

2、做一个高逼格项目包装

3、文件存档

4、留个(沟通和对接过程中的)证据

5、版本号

6、H5设计

7、引导消费的专题页

8、线下活动物料

10 我的学习与成长

1、how学习

(1)一定要懂用户体验

(2)充足准备

(3)学习不能停

(4)勇于承认错误

(5)具备分享意识

(6)设计能力

(7)能说会道

(8)UI设计师不是艺术家

2、UI设计必备利器

(1)软实力

        a.审美能力

        b.计算机使用

        c.文档撰写能力

(2)硬实力

        a.PS

        b.AI

        c.AE

        d.Axure RP

        e.Markman

        f.Sketch

猜你喜欢

转载自blog.csdn.net/weixin_38604274/article/details/81140519