《术与道-移动UI设计必修课》02.设计风格

1. 设计风格

  • 设计:

人类有目的性的审美活动。

  • 风格:

设计的不同视觉展现形式。

2. 如何确定设计风格

  • 寻找产品气质

热情、年轻、时尚、科技等

  • 确定主色

一般品牌色就是主色,与logo主色一致;
主色一般用在应用的navbar或tabbar上,因为是用户最容易看到,且始终保持一致的地方;

  • 图标插图
  • 字体选择
  • 排版
  • 文案

如淘宝“抽风,网络又抽风了”、“亲,懒死你算了”

3. 颜色

  • 主色
  • 辅色
  • 点睛色
  • RGB

Red Green Blue即红绿蓝三种基本色,通过不同的数值比例组成255255255=1678万种色彩,故又称为1600万色或千万色,或24位色(2^24)
红+绿=黄,红+蓝=品红,绿+蓝=青,红+绿+蓝=白

  • HSB

Hues 色相,有红橙黄绿青蓝紫7种;
Saturation 饱和度,色彩的艳丽程度;
Brightness 明度,色彩的明暗程度,深浅程度;

4. 色彩搭配

  • 色环

就是将彩色光谱中所见的长条形的色彩序列,首尾相连成环状。
通常包括12种色彩:红、橙、黄、黄绿、绿、青绿、青、靛、蓝、紫、品红、紫红。

  • 互补色

即色环中互为补角180°的两种颜色,如红-青,基本可理解为互为冷暖系的色

  • 三色搭配原则

即一个设计作品中,单个界面的颜色应该保持在三种以内,这里的色指色相H,否则会显得眼花缭乱,分散用户注意力。

5. 颜色选择

  • 白色+蓝色是安全的小白用户色。
  • iOS Human Interface Guidelines中给出了8种色,可以作为参考。
  • 颜色的性格

色彩心理学
紫色的光波最短,在自然界中较少见到,所以象征高贵、神秘。

6. 字体

  • 衬线体和无衬线体

衬线体serif,即在字体的始末处有装饰笔画的字体,有横细竖粗的规范,如宋体、Times等,常用于正文的阅读内容;
无衬线体sans-serif,即没有装饰笔画的字体,如微软雅黑、Arial等,也称为等宽字体,常用于标题等需要醒目却不被长时间阅读的地方;

  • 系统默认字体

iOS8 中文-“华文黑体”,英文/数字-"Helvetica Neue",实际设计中,ps字体要选择为“黑体-简/Heiti SC”和“Helvetica Neue”;iOS9中则为“苹方”和“San Francisco”;
Android字体为“Droid Sans Fallback”+“Droid Sans”,4.x的英文字体为“Roboto”,5.x的字体为“思源黑体”+“Roboto”;

  • 内嵌字体

保证各个平台的app在使用体验上的一致,可使用FontCreator将ttf字库中不需要的字体删除,以缩小app安装包的体积。

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

推荐阅读更多精彩内容

  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,111评论 2 237
  • 一、概念 参考网页字体Serif和Sans-serif的区别及浏览器字体的设置CSS Font知识整理总结 1.F...
    合肥黑阅读 6,068评论 0 12
  • 遇见编织,遇见美好生活!有一段时间没后钩钩钩了,等忙完就重新拿起,期待!!!
    小凡丫丫阅读 404评论 2 4
  • 愕然间 才发现 今天是青年节 熟悉却又遥远的节日 没有了青春的容颜 过了朝气蓬勃的岁月 那原本或许可以永驻的青春之...
    漫漫无忧阅读 265评论 18 8
  • 意图 动态地给一个对象添加一些额外的职责。就增加功能来说, Decorator模式相比生成子类更为灵活。该模式以对...
    暮染1阅读 181评论 0 0