本篇也作为从零开始打造一个有质感的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
这一个简单粗暴
举例子
腰果
由于我对配色实在是太菜，经常想象中貌美如花，跑起来以后不土不洋，所以在配色的时候，我就确定了腰果的单色思路，红色+灰色，这种在一定程度上保证了质感，但是有些时候略显单调，如果你有良好的色彩感，可以配合icon做一些色彩的尝试，但是我建议色彩不要杂，大家观察市面上的App，配色也都大多是简洁的几个色，没有很杂乱的
图标
图标的话如果自己有切图设计能力那么再好不过，可以自己制作，或者修改一些icon，更近一步的提高我们App的质感，但是不会也无妨，我们还有强大的库和工具嘛
素材
iconfont
iconfonr
大名鼎鼎的阿里巴巴矢量图库，这个是最常用也是最强大的，如果没有特殊的需求，我们需要的图标上边都有，结合配色，选择自己需要的颜色，done！但是对于彩色图标，资源就比较少了，但是彩色图标的话除非经验非常丰富，并且有一定的设计制作能力，作为一名开发者独立开发，不推荐使用，因为稍有不慎，就真的“不土不洋”了，你懂的
Icon8
一个国外的图标素材网站，并且还能选择不同的设计风格，比iconfont强大哦，但是就是大尺寸的有下载限制，有的还要收费，或许是察觉到中国市场的需求，还推出了中文版，有很多有特殊需要iconfont找不到的，这里就可能可以满足你的需求
要注意的是，要匹配图标的大小，有些图标的外围没有空白或者空白比较少，有些则较多，我们需要自己动手把多余的切掉，否则在App中相同的尺寸就不能有相同的效果
举例子
cashew11.png
腰果的图标就均来自阿里巴巴矢量图库Iconfont和Icon8，我挑选了三个符合我主题的Icon，一样下了两份，选中时和未选中时的颜色，然后写selector，但是icon下载下来就不匹配，然后我切掉四周的空白部分，三个图标就能在布局中设置相同的尺寸达到同样的效果；当然如果我有制作能力，我想要的效果其实是这样的，后边应该会请教UI同学尝试一下
腰果
在App的Icon上我选择了一个手绘腰果的图片，来符合App的主题
腰果
说一句无关设计的题外话，在Android中按钮最好下载两种颜色，在点击的时候写selector，这样比点击了就跳转没有任何其他变化效果要好
重点：图标符合要表示的主题，并且大小合适，清晰，不能有锯齿和马赛克，SVG为宜
细节
在一个正确的交互逻辑+良好的配色+精致的Icon以后，如何提升质感呢，那就是细节,细节在上我觉得要注意的是：
还是以腰果为例
腰果
-
字体的大小
Android字体的大小默认都很大，如果一进APP，Toolbar上几个大字，用户一看就知道这是个Demo，是很影响质感的，字体的大小做到适中，不突兀就好 -
图标的大小
图标大小一定要适中，太大了Low，太小了奇怪 -
字体和图标的对齐
该居中的一定要剧中，该对齐的一定要对齐，左边间距多少，右边也就间距多少，不然一点点不对齐，又变成一个Demo了（手动滑稽） -
精致的小图标
这个不能滥用，滥用了就变得杂乱了 -
最后一点是动画
符合时宜的动画可以在一定程度上提高App的质感，我在腰果的启动界面使用了闪动的Text来显示一种正在加载的效果，并在加载结束后使用了淡出效果，来提高App的质感，但是切记，不能滥用，用多了用户就会感觉到疲劳
腰果
总结
以上，我们的目标：在我们独立开发的时候，大致符合平台设计标准，交互逻辑清晰，不要太丑 应该已经基本达成了，腰果也应该是一颗不错的腰果了，在和UI，产品经理的讨论(撕逼)中，我们也有了自己的思路与想法，我想，开发者要懂的一点设计，大致就如此吧
最后，别忘了给腰果点一个Star喔！蟹蟹～
网友评论