【审美】如何让你设计的app更耐看

image

要是看过的话,那......

image

这里是手动分割线,下面开始正文内容

image
image
image

一、角度统一

角度统一包含渐变以及投影的角度,在一个 APP 内,所使用的渐变以及投影的角度需要是一样的。

1.渐变

在扁平设计流行的时代,越来越多的人喜欢用渐变来增加页面质感,但使用渐变的时候需要注意,角度要一样。如下图淘宝

image

首页头部用的是从左到右零度的线性渐变,购物车页面的头部以及结算按钮也是用的线性渐变。

image

渐变除了淘宝这种各个页面用的相同颜色的渐变,还有如下图京东金融的不同颜色的渐变。

image

这个时候的角度相同,指的就是颜色的饱和度、明度了,都是一个角度的从高到低或者从低到高。

image

渐变的角度是大家很容易忽略的问题,做的时候很容易随心所欲,光顾着单个地方的颜色好看,而忽略了整体,但对于用户来说,看到的整个页面,是所有元素搭配起来的整体视觉感受。

2.投影

和渐变一样,不同地方的同一个层级的元素,投影参数需要一致,比如下图壹钱包的卡片的投影,理财页面和购物页面的卡片投影是一样的。

image

原则上来说,一个 APP 内所有页面用到的投影都必须是一样的,但是难免有一些特殊情况,元素大小相差较大时,投影参数一样的话会造成视觉上不一样。

image

当遇到这种情况时,我们就要学会变通,比如把小元素的投影参数调小一点,让它在视觉上和大元素保持一致。就和之前说到的图形的圆角度一样,小元素的圆角度要小于大元素的。

image

二、颜色要有规律可循

颜色要有规律可循指的就是要定义辅助色,且辅助色不要太多。这样重复出现多种颜色的时候,也不会让人觉得花销。

image

当不同页面出现时,颜色也更加统一。

image
image

三、间距优先用 cell

当定义文字间距时,如果直接用文字本身来定义文字距离其他元素的间距, 很容易出现偏差,因为不同的软件、不同字体的行高都是不一样的。

image

其次当文字和图标组合出现的时候,如果以元素本身来定义上下的间距的话,间距会因为元素本身大小的不同而不一样,如此一来间距就没有一个定值,没有定值的话就意味着同一个模块,间距有好几种,标注起来也麻烦而且容易出错。

image

其实有一个最简单的方法,就是用 cell 的形式,定一个固定的高度,内部的元素都在内部居中对齐。这样就不需要考虑文字和 icon 的高度不一样的情况了。

image

四、增加修饰元素

增加修饰元素就是给页面增加细节,恰到好处的细节能让人觉得设计者是花费了心思在里面的,而不是随意排放。

1.卡片

卡片作为一种包容性的“容器”,它能将不同的信息很好的集合在一起,而且卡片一般占地面积比较大,如果简简单单的一个背景,很容易造成页面很空,没有细节。所以就需要给它添加一点恰如其分的小细节。

image

比如下图网易有钱的银行卡就加入了 Logo 的底纹,看起来就比京东金融的更有细节。

其次京东金融的银行卡信息与申办小白卡、小金卡相比,细节处理上也显得更弱一些,申办卡的背景上有一些小的修饰元素,增添了卡片的细节成分。

image

其实说来说去就是这些小的细节点,背景上加品牌元素,或者加一些没有什么实际意义的修饰元素。

说起来很容易,做的时候需要特别注意分寸,不要太过了,过了就会显得花销。

2.轮播点

第二个举例就拿最常见的轮播点来吧,旨在教大家方法,希望能举一反三。

想到轮播点,大家脑海中最先想到的样式肯定是几个小圆点,没选中的是灰色的,选中是白色的,如下图所示:

image

这样的方式没什么问题,能够满足产品的需求,但是我们可不可以在现有的基础上,进行一些微细节处理呢,比如把当前选中态做的更明显些。

image

再比如加上品牌色

image

方式有很多种,只要能够满足产品功能需求,不破坏用户的使用习惯,纯视觉上的修改我觉得都可以尝试。先发散思维、放飞自我,然后再去考虑落地时的情况。

就拿轮播点来说,它的主要作用是提示用户当前选中的是第几张图,一共有几张图,只要能满足这一点就好。如 ENJOY 的文字轮播。

image

五、还原线上真实场景

很多人在做设计稿的时候,为了页面当前的效果,规避了很多真实的场景,这样虽然在设计稿很完美,但是上线后,效果却差强人意,所以做设计稿时,需要尽量还原线上真实的场景。

1.配图

和文字相比,图片更能吸引用户的目光,用一些高清美照虽然能提高设计图的质感,但也要合适符合真实情况才行。比如一个做一个国内医疗的 APP,那设计稿的配图就不能是国外的医生。

image

2.真实状态

其次就算是同一个模块,也需要模拟线上真实的数据,配图文字都需要不同,可能有些人会说这只是做个示意,到时候上线的时候,会有后台数据,这些图不会都是一样的。话虽是这么说,但作为设计师来说,页面元素都是一样的,会让人觉得页面不真实、不耐看,也会影响到对页面细节的把控。

image

所以建议设计师把设计稿当作真实上线的页面来对待。改几个数据或几张图片,费不了多少时间,但是能提高页面的质感,也会让看的人觉得你是个认真靠谱的人。

3.底间距

页面底部元素距离底部的间距,这个也需要设计师去定义的。

image

在做图的时候要特别注意,底部是相同元素的,比如都是文字、按钮、图片等,间距都需要保持一致。设计师在做的时候,就需要定义不同元素所使用的底间距。

image

不同元素之间的底间距可以不一样,也可以一样,只需要记住相同元素的间距一样即可。

六、总结

细节决定成败, 要想让自己做的界面更精致、更耐看、更有细节、经得起推敲, 就需要我们在做的时候, 从小处做起, 比如从文中所说的那些点做起:

1.渐变以及投影的角度要统一;

2.界面内所使用的辅助色要有规律可循,可通过定义辅助色来实现;

3.涉及到间距的时候,优先选用 cell ;

4.尝试在界面的合适的位置增加恰到好处的细节,比如在卡片背景上以及轮播点上;

5.做图的时候,要尽可能的还原线上真实效果,把设计稿当作线上完成稿来对待。

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

推荐阅读更多精彩内容

  • 目的:UI设计的目的是为了更好服务用户;能让用户快速完成自己的目标; UI设计的发展趋势:全链路和复合化的设计人才...
    quantre阅读 10,986评论 9 83
  • 公司:扬州市方圆建筑工程有限公司 2018.3.23 哈尔滨363期 努力一组 【日精进打卡第39天】 【知-学习...
    jszhufeng阅读 104评论 0 0
  • 【蜗牛计划,每天进步一点点】 我是清泉 打卡日期:2017年8月5日 打卡天数:第36天 (1)我今年的三个年度目...
    沈曼柔阅读 189评论 0 1
  • Introduction 从图可以大致了解到:greenDAO 为安卓提供一种object/relational ...
    哲己名了戴草帽阅读 208评论 0 0
  • 文/GJ 有清凉味道的牙膏打败没有味道牙膏的关键是什么?显然并不是牙膏的本身的医学配方,因为两者实际上都可以清洁保...
    码字的GJ阅读 285评论 7 19