#读书笔记# 视界·无界2.0:写给UI设计师的设计书

用户体验不仅是视觉上的,从开始看到,到用手触碰,再到大脑的思考,最后是心里的感受等,这一系列的过程才是用户体验

有规则的设计

1、思考的问题(以一个播放器为例)

按钮的大小如何控制?

颜色是否要和播放条区别开来?

播放按钮和下一页按钮哪个操作更频繁?

使用频率不同是否要有比例和颜色的区分?

进度条是什么颜色?

播放的时候是什么颜色?

静止的时候是什么颜色?

显示剩余时间还是整片时间,抑或是播放的时间?

大小该如何控制?

是否需要收藏按钮?

网络加载时应该怎么设计?

是否需要调用播放列表?

是否需要全屏按钮?

全屏后如何退出?

2、按钮

以APP界面设计为例,一个按钮最合适的高度是96px

按钮边角风格:圆角应该控制在最小长度(注意:最小长度就是高度或者宽度哪个最小按照哪个计算)的1/10,比如高度是96px,那么圆角半径不能大于其1/10,即10px。如果列出一个公式:最小宽高像素×10% = 1/10最小高宽像素 ≈ 四舍五入偶数

3、文字

中文行间距应该是1.5倍,英文行间距是1.2倍

我们还要考虑的就是阅读距离。通常人眼与手机的距离是40cm~60cm,而且需要把实际阅读操作的环境也考虑进去,所以才会出现不同的行间距。如果所设计的界面针对的用户倾向于有阅读障碍或者文字量巨大的产品,可以适当地将行间距调整到1.5倍。

4、图标



5、颜色

主、次、辅三色可以尝试7:2:1这样的比例区分,比如70%的白色、20%的蓝色、10%的黑色,这样的色彩搭配比例会让界面信息层级更加准确,便于用户阅读

6、投影大小

投影大小= 投影距离x N

如果设定某一个元素的投影“距离”等于12,那么它的模糊范围即“大小”就是24, N设定为2, “不透明度”设定为40%,这样的投影效果是比较令人舒服的,哪怕在具有色彩的环境下,40%的不透

有目的的设计

视觉设计:要充分考虑场景,比如设计易拉宝二维码扫描,考虑到人的平均身高,将二维码放在适合扫描的高度,即便影响美观度,但是需首先考虑合适性

听觉设计:设计一些操作的同时加入声效

触觉设计:考虑场景,比如冬天太冷戴着手套,还有车载等特殊场景,通过充分考虑场景来做设计

好的工作习惯

1、提案的简单模板

【1p】封面+项目名称

【2P】设计理念,比如灵感从哪些图片、设计、照片而来

【2P】查找竞品,跟自己产品类似的LOGO并且分析阐述优、劣势

【1P】最终自己设计的完稿

【2P】黑白、彩色渐变、图片、环境LOGO实现效果

【1P】设备展示

【1P】色彩规范

【1P】黄金比例、间距规范、大小规范设定

【1P】手绘草稿

【2P】还有不同设计方案的反思,和被自己抛弃方案的自我批评

【3P】现实应用效果,比如网站、启动图标、公司门口、快递或者信封、工牌等

【1P】将动态设计存储为GIF图或者以AVI格式进行展示

【1P】封底+感谢观看

2、项目清晰的文件管理

一级文件夹:创建日期和项目名称,便于日后知道起始日期,方便搜索查找。

二级文件夹:创建交互原型、组件库、竞品素材、源文件、成果展示、输出切图。

沸水效应

你作完成一件事情时,就处在沸水的状态,热情饱满,情绪高涨,是不能接受外界任何“冷却”(冷静客观的评价)的,这个时候往往不要做决定,而是应该过一段时间再做决定

懒人思维

·接到案子。

·搜集别人设计好的相同类型的作品

·针对每一个设计作品分析3~5分钟

·分析10个左右原作草稿,包括设计目的、拆分构图、色彩风格

·换不同类型的创作来完善前面的碎片思考(如摄影、装修、制作CG原画、看电影、玩游戏等)

·将碎片思维重构成完整的内容或草图

·对照自己的构思、草图来完成作品的创作。

 第一,浏览同类作品,作为埋在心里最底层的一颗种子,浏览时要在草稿画草图,或者记忆配色,无须精确,只需大概。

第二,揣测并分析亮点,思考某个细节为何这么设计,并记录下来。

第三,浏览其他类型的创作,不要详细思考,要大量查阅,像雨水般去滋养你之前的种子。

第四,再次罗列对比草图,将想法精细地绘制出来,不要担心手绘问题,自己看得懂即可。

第五,拿走参考作品,对照草图开始设计。

相关网站

腾讯CDC:cdc.tencent.com

腾讯ISUX:isux.tencent.com

阿里UED:www.aliued.com

阿里U一点:www.aliued.cn

百度UXC:ued.baidu.com

360 UXC:uxc.360.cn

网易UEDC:uedc.163.com

京东JDC:jdc.jd.com

新浪UED:ued.sina.com

Facebook:facebook.design

Google:design.google

Apple:developer.apple.com/design

Airbnb:airbnb.desig

easings.net/zh-cn(动效描述,缓动函数速查表)

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