首页 > 网页教程 > 设计分享 > APP设计零基础教程:5步让你设计出漂亮的APP界面

APP设计零基础教程:5步让你设计出漂亮的APP界面

时间:2015-09-16    来源:25学堂

这节课的主题就是让大家快速上手学习APP设计,关键词漂亮、简洁。

漂亮的APP界面设计都保持的一致性和细致化的设计。

下面25学堂的小编教大家如何运用6个步骤来设计出漂亮的APP UI界面。

第一步、关注和重视品牌的LOGO  

正确理解品牌的意义是APP设计的第一步。APP的取色和风格都与APP品牌相关的,品牌是APP设计的基石。

APP案例分析:Cal日历

相信每一位用过Any.Do的用户都曾赞叹过它的精简设计,而现在Any.Do团队又一次打破了日历市场,推出了「Cal日历」。这次的新作品不仅在设计上完全继承了Any.Do一贯简洁优雅的作风,在使用体验和功能方面更加的出类拔萃。

「Cal日历」可以自动添加中国节气等信息,添加事项也更加完备。不仅如此,「Cal日历」还支持添加位置信息、联系人、响铃提醒、文字注释、活动自动重复等实用功能。

Cal用一段描述美好生活–阳光、运动、笑容、孩子和美食的宣传视频作为开场,给用户带来温馨和美好的感觉,我们期望中的生活不就是如此吗?

所以Cal用一段非常贴近人心而又符合自身产品定位的视频吸引住了用户,这一点与那些开场使用文本引导的应用有着很大区别,避免让用户觉得枯燥乏味。

APP设计案例 移动App设计 app设计流程 APP设计

第二步:选取舒适的配色方案

舒适的配色方案决定了APP的形象,它应该是品牌主题色的扩展。它是视觉设计的核心,因为APP所有可见的地方都会使用这些颜色。所以你需要选择一个能增强品牌形象的主题色是关键当中的关键。

25学堂提醒我们,通常可以按三个大类的配色方法,结合一些案例,分析色彩在页面中的APP手法。

APP设计案例 移动App设计 app设计流程 APP设计

配色方案举例分析:  Very的案例

APP设计案例 移动App设计 app设计流程 APP设计

柔和的调子使页面显得明快温暖,就算色彩很多也不会造成视觉负重。页面的同色调搭配,颜色作为不同模块的信息分类,不抢主体的重点,还能衬托不同类型载体的内容信息。

25学堂的观点:同色调不同色彩的模块,就算承载着不同的信息内容也能表现很和谐。

APP设计案例 移动App设计 app设计流程 APP设计

第三步:直观的布局

这里讲究的是一见钟情。能让你的用户第一眼就明白其APP功能才是最好的APP设计。

25学堂认为App主页面设计非常简洁但并不简单。

如下图APP设计:

APP设计案例 移动App设计 app设计流程 APP设计

APP设计案例 移动App设计 app设计流程 APP设计

多去研究和临摹一下那些热门和相关APP是怎么做的,尽量别让用户产生困惑。尽量选择比较小众的APP设计参考。

第四步:简化和卡片化

这一步我们可以借鉴苹果的理念:无赘物即为完美。25学堂告诉大家千万不要去”画蛇添足“。

屏幕布局应当保持整洁,信息应该分层排列,重要的在上面,不重要的在下面。

具体的我们看下APP设计案例吧!

APP设计案例 移动App设计 app设计流程 APP设计

APP设计案例 移动App设计 app设计流程 APP设计

第五步:精炼和做减法

卓越的视觉设计都是细节为王,每一个像素都要完美无缺。首先是排版。字体是应用的脸面,一个好的字体可以让你的应用脱颖而出。

各位APP设计小白,要能准确传达情绪的图标才是最好的。你可以利用一些免费的图标资源,然后在Photoshop里面稍加修改,把它们变成自己的图标。

APP设计案例 移动App设计 app设计流程 APP设计

APP设计案例 移动App设计 app设计流程 APP设计

最后,Path和Flipboard是每个像素都趋近完美的典范。大家有兴趣可以下载下来慢慢学习和欣赏。

一个APP开始启动设计时,第一步应该用主要页面定下整个APP的设计风格,然后其他页面按着统一的设计风格进行细致的设计美化。统一设计风格能给用户呈现整体一致的视觉体验,有利于传达产品整体的品牌形象;也方便设计团队制定设计规范,减少设计风格不一致带来的沟通成本。25学堂今天就跟大家分享到这里。

相关推荐
APP浏览体验设计的思考:如何理解用户的眼?
20个创意漂亮的手机应用程序登陆页面设计欣赏
iOS7用户界面设计的10个准则分享
交互设计上常见的界面切换动画如何优化
Windows Phone 8 UI设计指南分享
APP设计经典:Pinterest的交互细节
对症下药!如何设计受欢迎的应用引导页?
搞定APP着陆页优化的超实用原则(附工具)
APP界面设计:移动缺省页如何设计才会内容“丰富友好”?
产品设计:FEEDLY创始人再聊改版实战经验
写给初学者:移动站点app开发尺寸基础知识
扁平化设计与Material Design区别在哪里?
APP界面设计教程:让人眼前一亮的渐变设计手法
APP导航设计:不要在移动端菜单设计犯这些错误
交互设计基础!四个移动界面常见的动效类型
国外UI设计师:UI界面设计作品精选
APP设计!6个方法助你设计出优秀的APP
15个值得学习的APP交互体验设计细节
手机APP设计规范:图标和按钮视觉设计规范
APP界面设计之页面布局的22条基本原则
APP设计!教你怎样才能把APP引导页设计的高大上
经典案例分析:10个戳中痛点的APP更新欢迎页文案
2015最流行的APP设计是啥?比如 Facebook那样的
前方高能!别让这10个设计误区毁了你的APP
20款创意设计的移动动画界面案例欣赏
内容化设计项目总结:如何从0到1做出淘宝头条架构
想搞定移动端APP/网页设计?你起码得做好这几点
移动开发教程:移动页面适配小知识分享 设计师必备
民宿APP UI设计分享 在线旅游APP设计分享
扁平化设计的六点优势分析
视觉设计的思考:如何设计APP的登录页?
网页设计已死?如何看待近几年网页设计发展前途?
20款最佳移动UI界面设计欣赏
33款设计独特的非横向UI设计欣赏
十五个用户体验设计(UI/UX)案例剖析
腾讯CDC分享QQ登录界面的banner设计过程点滴

分类导航

教程推荐

热门特效

热门教程