高级UI设计师之路

品牌基因图标设计技巧

提取品牌图形:

使用一个让人印象深刻的品牌图形作为首页标签图标是最能让人感知的

提取设计语言:

从品牌图形中提取其设计语言作为其他图标的设计元素,可以构成一套完整的视觉符号

拆分品牌名称:

虽每个字母和功能版块之间没有关联,但由于产品本身的用户人群具有特殊年轻文艺化这一特质,比较能接受新鲜事物,由此可以给APP加分

(建议不要随意使用,没有特殊代表的符号会给用户带来不必要的误解)

提取品牌色彩:

从品牌形象中提取色彩作为图标设计的依据,可以给用户带来由内而外一致的视觉体验

提取产品气质:

same使用品牌蓝色关窗APP,其图标设计给用户一种年轻文艺温暖等感受,仿佛每一个图标具有年轻生命力值得挖掘

灰色线性图标:

适合于极简风格的APP,它全部使用迁细的线性图标,不赋予任何色彩,有一种去繁求简的高级智慧,是追求极简与克制的精髓

线性图标:

表现力更加简洁--轻柔--与界面设计能更好地融为一体,而面形图标的视觉冲击力强,会导致用户的注意力不经意间被其吸引,忽略产品内容本身

单色线性图标:

有助于强化用户对品牌形象的辨识度

彩色线性图标:

因此使用了大尺寸的线性图标设计,并加上背板赋予每一个功能不同的颜色,让用户在无形中形成认知

线形图标+面形图标:

在标签栏时,核心功能入口的图标就使用面形图标。由于面形图标的视觉表现力强,当许多图标堆在一起时就会产生一种拥挤的感觉,为了减轻这种笨重感,因此绘制尺寸时不宜过大而且要保持视觉效果简洁。

-----------------------------------------------------------

色调一致:

通常是品牌色,而辅助色-点缀色-背景色等都应以主色调为基准来搭配

60-30-10原则:和谐-平衡-不杂乱

即60%为主色,可运用到导航栏-按钮-图标-标题等关键的元素中,使整个APP的视觉焦点和色彩联系;

即30%为辅助色,可以避免界面中因为过多主色而造成的视觉疲劳,剩下10%为点缀色

渐变色不超过90%

APP中包含主色-辅助色-点缀色-背景色和背景对比色

互补色:搭配有着非常强烈的对比度,可以产生许多十分震撼的视觉效果,让人目光很难从中逃离

分散互补色:主色和其互补的两个或多个色系的搭配,例如:蓝色-黄色-橙色

三角对比色:色环中3种互相平衡的色系搭配。如:蓝红绿色

----------------------------------------------------------------------

渐变分为:线性渐变-径向渐变-角度渐变-对称渐变-菱形渐变

水平渐变:角度为0的线性渐变,通常被运用在长条形的元素上

如:导航栏-按钮-标签-进度条等(通常轻的色彩在左边,重的在后边)

垂直渐变:角度为90的线性渐变,与水平想法,通常被用在正方形和竖长形的元素

如:图标背板-启动页-注册登录页-个人中心等

对焦渐变:对角的线性渐变,相比前两种使用场景更广。几乎可以涵盖水平渐变和垂直渐变的所有范围

如:图标背板-启动页-注册登录页-导航栏-按钮-标签-进度条等

径向渐变:色彩以圆心像四周扩散的渐变,通常被用在大背景

如:启动页-个人中心头部等

霓虹色渐变:特殊渐变如Iphonex壁纸

----------------------------------------------------------------------

卡片设计的优点:

1.独特的设计语言,快速从扁平化设计种区分出来,带给用户强烈的识别度

2.灵活的空间扩展

3.清晰的视觉呈现

4.易于内容的整理

5.特殊的功能属性

6.丰富的交互属性

缺点:如微信朋友圈的产品设计初衷式轻量化,希望用户关注信息本身,卡片式会阻断用户的信息浏览,以及分割感会让界面变得零碎

列表式设计:

它使用分割线对不同的元素进行有效的组织,帮助用户理解界面的视觉层次

1.轻量化的设计

2.提升浏览效率

目的:提升同类信息内容的浏览效率,对于不同类的信息内容,盲目使用列表涉及会让用户困扰

无框设计:

1.极简注意风格

2.掌握注意力

3.保持界面整洁

----------------------------------------------------------------------

打动人心的情感化设计:功能性-易用性-愉悦感

赋予产品生命力:

语言是情感化设计直接的利器,拟人化的对白相比冷冰冰的语言更能获得用户的好感,赋予产品新的生命力

图标设计甚至可以展示动画效果和赋予智能化,充满惊喜感,瞬间拉近用户产品的情感距离

下拉刷新动画:

变的生动有趣,用户也在这种快乐的情绪种对产品产生好感

1.有些有趣的设计是隐形的像彩蛋,需要用户自己发掘当用户找到后,就会收获一份特殊的喜悦和乐趣。甚至引发用户的好奇心,增强对产品的探知欲

2.有些有趣的设计是显形的目的让用户与产品的交流从而产生积极的情绪,可以增强用户在使用产品遇到困难时的容忍力

空白页面或加载动画会给用户化解负面情绪,充满温度

提升品牌认同感:正确的价值观可以引发用户积极的正面情感,并将这种情感投射到产品,从而提升用户对产品的认同感和忠诚度,如MONO在登录页展示一段心灵文字,赋予用户一种高贵的品质,引发共鸣

模拟用户行为:

当一个产品可以模拟用户行为,将用户带入真实的情境中,用户就会对产品产生深刻的认同感(如天气预报)

情感化设计可以拉近用户产品之间的距离,在更神的层面体现出对人性的关怀,为人们带去情感上的愉悦和感动

悉心洞察用户的行为,换位思考去满足用户的需求,积极地为他们解决问题


高级UI设计师之路  作者: 田海

以上内容只是个人认为是重要点,为了方便大家更快了解书籍所做的笔记,如果最后大家觉得好的还是最好去买实物书观看

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