开发者要懂的一点设计

本篇也作为从零开始打造一个有质感的App-腰果Cashew源码分析(一) 设计
腰果Cashew项目地址
维权骑士获得转载授权(免费)

有些时候我们常常涉及到个人开发,没有产品经理,没有美术,没有原型设计,没有UI,一切都要自己来。我搜集观察了Github上Star非常多的独立App类项目,包括Gank的客户端,知乎日报,豆瓣电影等等,在我看来,设计感比较好的不多,大多数交互逻辑不清晰,打开就能感觉到,这是一个Demo,并不是一个产品,那么,作为一个开发人员,我们要不要花很多时间精力去学习设计呢?我的答案是如果你打算以后转型产品经理,那还是要的,如果不,那没有必要,我们只要通过日常的多去体验,多看,多思考,通过日常的积累提升自己审美和设计思维即可

我们的目标:在我们独立开发的时候,大致符合平台设计标准,交互逻辑清晰,不要太丑

所以,设计师和产品经理勿喷,请多指教,哈哈

下边就以这个目标,以我的开源项目腰果为例子,给大家推荐一下思路和实现

多体验

作为一个App开发者,我们要积极的去体验各种App,包括现在热门的、主流的一些App和一些小众、精致、别具一格的App,在体验的时候,观察思考他的交互逻辑、UI设计,字体大小,有些时候恰恰是细节决定了产品的质感,然后我们再思考他的实现,等等

给大家推荐几个

  • 数字尾巴
数字尾巴

数字尾巴是一个遵循Material Design的客户端,基本所有的功能都是原生实现,非常美观,值得参考

  • FlipBroad
FlipBroad
  • 即刻
即刻
  • Google爸爸的App,比如Youtube、Google照片、云端硬盘
Google照片

在这里只是举个栗子,其实各大知名App,微信、微博、Instagram、简书、网易云音乐都可以拿来思考,分析一番

多看,学习、搜集思路、工具、和素材,然后实践

下边开始给大家推荐素材和举例子,大家有好的素材或想法,可以留言给更多的人知道哦

提示:可能需要科学上网

先推荐一个导航 创造狮导航

创造师

设计师的网站里边都有拉

下边挑几个我常看的给大家说下

UI、界面设计

这一阶段主要是整体界面的设计,要考虑重要的一点就是根据功能设计界面交互

素材

Dribble

Dribble已经很出名了,相信不用太多介绍

其实是我不知道要咋介绍233

这是百毒百科说的

Dribbble是一个面向创作家、艺术工作者、设计师等创意类作品的人群,提供作品在线服务,供网友在线查看已经完成的作品或者正在创作的作品的交流网站。

随手刷一刷,学习一些UI和界面的设计,并且Dribble是开放网站API的,可以自己撸一个客户端看设计哦

站酷

站酷是国内不错的一个设计类网站,UI分类下有很多优秀的UI设计,移动端居多

Uplabs

Uplabs专注于移动端的界面设计,可以在上边学习和搜集一些好的设计,用到自己的项目中

举例子

腰果

腰果的设计应用到了现在流行的底部导航栏,这种底部导航栏一开始是iOS的设计,在Android和iOS不断相互学习的情况下,Android引入了这个设计,并提供了BottomNavigationView,但是这一个BottomNavigationView并不好用,在Item数量达到三个以后还会有我们并不想要也觉得并不好看的动画效果,于是我使用了BottomNavigationViewEx来实现,而后我将Toolbar和导航栏都设为了主色,来实现也是现在很流行的伪沉浸式效果,根据Gank的内容,分为了按日查看、分类查看、以及妹纸三部分,每日、分类又加入了TabLayout这种查看方式,可以很方便的滑动查看下一个Item,妹纸部分使用了流行的瀑布流,并且在每个界面的左上角,都安排一个按钮,用于进入设置界面,我当时设计的思路主要是内容的权重来划分,Gank的浏览方式我觉得主要就按日,分类,还有妹子,所以当时就奠定了这中设计

我们应该做到:符合当前平台设计标准,交互逻辑清晰,遵循当前用户的交互习惯

当然主要的灵感还是来源是你平时的体验和积累

配色

配色是非常重要的一环,也是我非常苦恼的一环,因为配色做不好,你其他地方做的再好,质感也得不到提升,甚至会“不土不洋”,对于设计师,配色也是重点,但是我们并不是设计师,那就多参考优秀的配色然后自己做一些尝试吧

素材

Adobe Color

Adobe 出品,不用多说了吧,非常便捷的配色网站

MaterialPalette

Material Design风格的的在线配色网站

Colordrop

这一个简单粗暴

  • Coolors在线快速配色生成工具

  • Colorfavs
    上传并匹配提取图片风格的颜色

举例子

腰果

由于我对配色实在是太菜,经常想象中貌美如花,跑起来以后不土不洋,所以在配色的时候,我就确定了腰果的单色思路,红色+灰色,这种在一定程度上保证了质感,但是有些时候略显单调,如果你有良好的色彩感,可以配合icon做一些色彩的尝试,但是我建议色彩不要杂,大家观察市面上的App,配色也都大多是简洁的几个色,没有很杂乱的

图标

图标的话如果自己有切图设计能力那么再好不过,可以自己制作,或者修改一些icon,更近一步的提高我们App的质感,但是不会也无妨,我们还有强大的库和工具嘛

素材

iconfont
iconfonr

大名鼎鼎的阿里巴巴矢量图库,这个是最常用也是最强大的,如果没有特殊的需求,我们需要的图标上边都有,结合配色,选择自己需要的颜色,done!但是对于彩色图标,资源就比较少了,但是彩色图标的话除非经验非常丰富,并且有一定的设计制作能力,作为一名开发者独立开发,不推荐使用,因为稍有不慎,就真的“不土不洋”了,你懂的

Icon8

一个国外的图标素材网站,并且还能选择不同的设计风格,比iconfont强大哦,但是就是大尺寸的有下载限制,有的还要收费,或许是察觉到中国市场的需求,还推出了中文版,有很多有特殊需要iconfont找不到的,这里就可能可以满足你的需求

要注意的是,要匹配图标的大小,有些图标的外围没有空白或者空白比较少,有些则较多,我们需要自己动手把多余的切掉,否则在App中相同的尺寸就不能有相同的效果

举例子

cashew11.png

腰果的图标就均来自阿里巴巴矢量图库IconfontIcon8,我挑选了三个符合我主题的Icon,一样下了两份,选中时和未选中时的颜色,然后写selector,但是icon下载下来就不匹配,然后我切掉四周的空白部分,三个图标就能在布局中设置相同的尺寸达到同样的效果;当然如果我有制作能力,我想要的效果其实是这样的,后边应该会请教UI同学尝试一下

腰果

在App的Icon上我选择了一个手绘腰果的图片,来符合App的主题

腰果

说一句无关设计的题外话,在Android中按钮最好下载两种颜色,在点击的时候写selector,这样比点击了就跳转没有任何其他变化效果要好

重点:图标符合要表示的主题,并且大小合适,清晰,不能有锯齿和马赛克,SVG为宜

细节

在一个正确的交互逻辑+良好的配色+精致的Icon以后,如何提升质感呢,那就是细节,细节在上我觉得要注意的是:

还是以腰果为例

腰果
  1. 字体的大小
    Android字体的大小默认都很大,如果一进APP,Toolbar上几个大字,用户一看就知道这是个Demo,是很影响质感的,字体的大小做到适中,不突兀就好

  2. 图标的大小
    图标大小一定要适中,太大了Low,太小了奇怪

  3. 字体和图标的对齐
    该居中的一定要剧中,该对齐的一定要对齐,左边间距多少,右边也就间距多少,不然一点点不对齐,又变成一个Demo了(手动滑稽)

  4. 精致的小图标
    这个不能滥用,滥用了就变得杂乱了

  5. 最后一点是动画
    符合时宜的动画可以在一定程度上提高App的质感,我在腰果的启动界面使用了闪动的Text来显示一种正在加载的效果,并在加载结束后使用了淡出效果,来提高App的质感,但是切记,不能滥用,用多了用户就会感觉到疲劳

腰果

总结

以上,我们的目标:在我们独立开发的时候,大致符合平台设计标准,交互逻辑清晰,不要太丑 应该已经基本达成了,腰果也应该是一颗不错的腰果了,在和UI,产品经理的讨论(撕逼)中,我们也有了自己的思路与想法,我想,开发者要懂的一点设计,大致就如此吧

最后,别忘了给腰果点一个Star喔!蟹蟹~

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,471评论 25 707
  • 那年 要是我咬着牙爬上坡顶 去看山那边的云彩 就不会遗憾
    夏霖捷阅读 58评论 0 0
  • 沉没成本: 人们在决定做一件事情的时候,不仅仅是看这件事情未来对他是不是有好处,同时也会注意自己是不是在过去,已经...
    好胜的蝌蚪先生阅读 293评论 0 0
  • https://forum.ionicframework.com/t/you-have-not-accepted-...
    凯旋阅读 58评论 0 0
  • 精选:道君一书情节 论道爷控制南州的手段有哪些? 一:串串香底料的炒制 混合油500克,豆瓣酱250克,干辣椒50...
    qqjia阅读 212评论 0 0