app/小程序开发入门-一篇关于app界面设计的介绍

app/小程序开发入门-一篇关于app界面设计的介绍

前言

很久很久以前,大约三四十年前吧,那时苹果公司和微软公司刚刚成立不久。我们应该听说过比尔盖茨辍学了大学,和他的一个好朋友一起写软件赚钱。而乔布斯和比尔盖茨很像,他也辍学了大学,和他的好朋友一起在他爸爸的车库里组装电脑,靠卖电脑赚钱。那个时候的电脑是没有图形界面的,所有的程序都是以命令行的形式呈现。最早发明图形界面的公司应该是施乐,乔布斯在参观了施乐公司以后,把图形界面这个想法抄了过来,应用在某一款苹果电脑上。而微软之后又把苹果的想法抄了过来,也做了一个用户界面,为此乔布斯还大骂过微软公司。但是,计算机人之间的事,能叫偷吗?那明明是窃好不好。

其实现在,命令行也是计算机开发人员常用的工具。常见的电脑系统(Windows,MacOS和Linux)都配备了命令行的功能。不过对于普通的电脑用户来说,有一个图形界面就是很有必要的了,他们看到一行行的指令就会感到头皮发麻,不明觉厉。而软件的界面也是分三六九等的,一个好用的软件的布局一定是合理的,不会把它的很多功能糅杂在一起,看上去很凌乱。在布局合理之上,如果这个软件能拥有更好的插图、图标、配色甚至是动效的话,我们就会更喜欢这个程序。不过也不是绝对的,很多强调功能的软件并不会做一个华丽的界面,不然这个华丽的界面就会干扰使用者操作软件了。我们常用的一些软件,比如微信,它的界面就很简洁,你看不出来它有任何华丽的设计。

app设计的特点

一个软件的界面,都由哪些元素组成呢?常见的有文字、图片、按钮和表单。软件的界面设计我觉得比较像杂志或者海报的排版,或者说它也属于排版的一个子类,把文字、图片、按钮和表单这些元素安排在一块屏幕上。传统的排版是静态的,里面的文字和图片都不会动,但软件界面中的元素可能会根据需要而进行变化。比如微信,当一个朋友发了一条朋友圈以后,朋友圈界面里就会多一些新的文字和图片。

不过虽然说一个程序显示的内容是动态的,它们的排布也是有一定规律的。比如朋友圈,每一条动态都是由规律的,下面就让我们分析一下一条动态的布局。

这是我一个好朋友刚刚发的朋友圈。每一条朋友圈动态都占用一个矩形的区域,这条动态我们也把它当作一个大矩形。那么在这个大矩形之中,有两个矩形把这个大矩形分成了左右两部分,这两个矩形分别是浅蓝色的区域和深蓝色的区域。在浅蓝色的区域中,只有一个元素——头像。这个头像可以是一个图片组件,点击这个图片以后就会跳转到个人信息界面。右侧深蓝色的矩形中的元素是纵向排布的,首先是一个链接,显示的内容是发布这条动态的好友的昵称,和头像一样点击就跳转到个人信息页面。昵称之下是动态的内容,就是一些文字。接着是图片九宫格和评论区。但我们可以注意到,九宫格和评论区之间还有一栏,里面最左边显示了这条动态是多长时间之前发布的,最右边是一个按钮,点击后有”赞“和”评论“两个选项。评论区也分为两部分,上半部分是所有点赞的好友,下半部分是所有评论的内容。

一个软件一般是由三部分组成的,一个是有什么组件,就像我仿着朋友圈动态画的那些矩形一样。另一个是这些组件的具体样式,比如一段字是什么字体、什么颜色、什么大小,在什么位置。第三个呢是响应,可以理解成这个软件的行为,比如我们点击头像就可以跳转到这个好友的个人信息界面,那么跳转这个动作就算是一种响应。在传统的网页设计架构中,HTML负责“有什么组件”,CSS负责组件的具体样式,而JS负责响应。在其他的架构中,虽然没有明确的分出三个文件各司其职,但总的来说还是可以归为这三类。

App界面设计和其他设计的关系

我觉得,App界面设计融合了平面设计、动画设计和交互设计。平面设计,就像上文所说的,主要是把一个App做得美观。动画设计可以为一个App增加灵性,比如当我们点击一个大拇指以后,这个大拇指会动一动,我们就会觉得这个App不是死板的了。而交互设计(App中的元素)讲究的是怎么把信息更合理高效的展示给人看,最基本的就是排版的工作了,不过高阶一点的应该也会运用诸如心理学一类的方法。

再区分一下UI(视觉设计师)和UX(交互设计师)的话,UI主要是负责的是一个组件的具体样式,比如文字用什么字体、什么字号、什么颜色,放在什么位置,而UX则是研究这个功能以这种形式展示给用户合不合适,这些功能这样分布在软件里合不合适。就好比盖房子,UX设计负责的是房间的布局,而UI则是负责房子用什么颜色、什么材料。

不过对于一个中小型项目来说,也不用把UI和UX分的很细。产品经理和UI、UX之间也是有很多联系的,他们之间的关系也不能很容易的分清。

设计App可能会用到的软件

这样看来,软件的界面设计很简单,一般情况下并不需要你去使用画画技能,除了在一些时候需要画画插图以外。在设计软件时,一般会使用到专门设计软件的软件,有sketch, xd和figma。这些软件简化了一些Photoshop、InDesign之类的平面设计软件的功能,同时都拥有一个强大的插件市场,里面有各种插件可以方便设计师和开发者工作。比如有一些插件可以根据设计自动生成一些代码,减少开发人员的工作量。

不过有时候只用设计app的软件是不够的,会出现需要搭配其他设计软件、建模软件和动画软件的情况。对于一个设计师来说,多会一些技能是好的;但对于一个开发来说就不是很有必要学习它们了,主要是开发要学的东西就够多了。有一些软件会使用到三维的素材,我记得我看到过一个国外卖大麻的网站,它就用了一些三维的素材,还搭配上了动画效果。进行动效设计的时候可能会使用AE,比如当你点击大拇指点赞的时候,大拇指会变大一下或者摇晃摇晃,这些效果光用设计app的软件就做不出来了。

三个主流的设计app的软件,sketch、xd和figma又有什么不同呢?我并没有深入使用过这些软件,不过从支持的操作系统来看,sketch只能在macOS上使用,xd可以在windows和macOS上使用,而figma除了windows和macOS的客户端还提供了一个浏览器的版本,功能不输桌面版。虽然figma要比前两个软件出现的晚,但网上还是可以找到很多关于它的教程。同时figma自带了一个下载模板素材的社区,可以从里面获取到很多质量不错还免费的模板。figma也是有一些缺点的,截至目前(2021年9月)它还没有提供中文支持。

在下一篇文章中,我会更多的介绍figma这个软件。

最后给大家推一些做设计会用到的网站吧。

PNG素材网

一个可以免费下载png插图的网站。

阿里巴巴矢量图标库

虽然阿里巴巴的企业文化不怎么样,有”福报厂“之称,阿里的HR在招人的时候也是一副高高在上的姿态,据说内部也有很多员工很傲慢,但阿里巴巴矢量图标库确实是在开发app时非常有用的一个网站,在上面能找到各种各样的图标。

Gradihunt

一个收录了好看渐变色的网站。

Color Hunt

一个收录了很多配色的网站,不过国内网络可能会打不开。

中国色

一个收录了很多中国传统颜色的网站,当点击一种颜色的时候,页面背景会自动变成该颜色。

汉仪字库

在这里能找到很多字体,个人使用没问题,但要商用的话应该就需要版权了。

Pixabay

一个免费的照片图库。

Pexels

另一个免费的照片图库。

如果你喜欢这篇文章的话,欢迎来我的个人网站看看,探索我写的更多文章。

留下评论