APP设计师拿到APP产品原型开始,七步搞定APP设计(转)

简介:

任何一款成功的APP都需要以坚实的产品概念作为基础,因为概念决定了产品最终完成的潜力。

一般情况下,交到app设计师手里的都是移动app产品原型图。当然这个是在移动产品经理反复斟酌,并且与大家开会讨论需求定下来的一个产品交互原型。

prottapp原型测试工具2

当你拿到参与讨论确定好的这个移动app产品原型之后,你是不是需要重新理清楚一下整个产品的业务逻辑和UI相关的事情。

所以,今天25学堂借助简书上的血儿的一篇博文《UI到底做什么》来跟大家好好的聊聊,到底如何七步搞定app界面设计。

当然,大家有兴趣可以阅读:

1、你必须要知道移动APP的设计要点,才能玩转APP设计

2、移动APP布局设计经验之道:独门七字诀

3、成功设计一款App需要注意哪些问题?

 

下面就跟随血儿设计师来看下如何搞定app设计

 

第一步、从APP产品需求入手,考虑我们到底要用什么主色调

定好主色调:比如同样是团购,糯米用的是桃红色,而美团是翠绿色。那么我们在UI设计的时候首先就要考虑主色调的问题。

定好尺寸:设计尺寸是多大,是以640*1136设计还是750*1136 还是1242 *2208来设计。

所有APP设计尺寸大小规范:点击查看全部的app设计尺寸

appsize

 

第二步、配色和辅助色用什么颜色

在考虑到产品气质和品牌色的同事,我们经常要考虑配合衬托产品主色调的辅助色。在不同的产品中,辅助色运用的策略是不同的,比如我们经常说的:邻近色、对比色等。都是我们选择辅助色的方法。

配色在线网站:http://colourco.de/ 以及主色调和辅助色的信息图解APP色彩搭配方案是由主色、辅助色和点缀色构成

 

第三步用什么风格来表达

定好风格:可以根据产品需求,从竞品当中找到几个合适的参考。

现在来说,说到风格一句话,扁平风。但是在扁平中也有区别。比如下图,同样是扁平。但是左图微微带有一些光影,而右图是纯扁平。你能说哪个好或者不好吗?不能。

 

同样的信息,在UI的表达上也有不同的表达方式。那么只能在具体你的UI设计中去考虑具体你需要用什么风格。这些都是UI的工作内容。

 

第四步APP图标化画成什么风格和创意表达

同样是设置、发现、首页,不同的app在基本结构一致的情况下也有很多细微的差别。倒是是要用圆角的icon、还是直角,是用面还是线形,这背后的设计语言逻辑是什么,设计目的是什么。都是需要UI设计来考虑。

 

比如:同样是腾讯的产品,手Q和微信的icon就完全不一样。其原因是由于产品面面对的人群不同,手Q更偏年轻化。同样,你去看陌陌、来往、易信的聊天icon也是不一样的。这都是需要UI设计师一点点抠细节的去画出来的。

 

第五步如何表达情感化设计特别是app引导页的设计和启动页的设计

相关的博文推荐:谈谈如何进行产品设计以及产品情感化设计

在一些细节页面我们常常要考虑情感化设计,以此来提升app的品质,降低用户在异常情况下 的挫败感。同时好的设计师还会考虑到如何引导用户去解决,从而满足产品诉求。不同的产品在做情感化设计的时候方式方法不同,风格也不一样。这些也都是需要UI设计来处理的。

app电子券

马蜂窝旅游攻略APP引导页设计

这些情感化的设计元素,始终要贯穿到整个APP界面设计当中去。特别是一些细小的情感交互设计上面。

 

 

第六步动效如何做或者说APP交互怎么实现

因为手机交互是动态的。所以我们如果可以用在一些跳转页面引用动效设计,无意是对整个app加分的好方法。

4196_131226125212_1

好的app交互设计体现出一个app设计师的水平,同时也提升这个app设计的档次。也能让客户端的程序员更明白设计师的心思。

 

第七步、宣传推广的APP  图标icon 的设计

关于app的图标设计方法,一万个人有一万个答案,那么具体怎么做,还是要考虑用户、场景、需求等细节。产品可以提供方向,但是具体的落地还是需要UI设计师来完成。

APP图标ICON的设计尺寸是:1024*1024  同时也可以去下载各个平台的icon设计模板

最新iOS图标模板和iphone、ipad GUI设计模板2015推荐

ios图标模板

 

 

最后,在设计app界面的过程当中,也要把APP切图、适配的因素放在心上。避免后期切图和程序员适配出现不合理的设计之处。还有一点不容忽视的很重要的一个步骤。

就是学会一边设计一边用真机测试预览。

psplay移动预览工具

 

 

转自:链接



本文转自SharkBin博客园博客,原文链接:http://www.cnblogs.com/SharkBin/p/4956395.html,如需转载请自行联系原作者

相关文章
|
2天前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
34 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
前端开发 JavaScript NoSQL
Axure用中继器做聊天APP原型(含视频教程)
Axure用中继器做聊天APP原型(含视频教程)
|
消息中间件 Cloud Native Linux
开发者5日学【消息队列全家桶产品训练营】上线 快来 APP打卡赢积分
开发者社区上线开发者五日学活动,大家可以在阿里云APP上参与活动,5日学习每天都有积分奖励,快来参与吧~
开发者5日学【消息队列全家桶产品训练营】上线 快来 APP打卡赢积分
|
物联网 Android开发
毕业设计 基于51单片机无线蓝牙APP控LED灯亮灭亮度设计
毕业设计 基于51单片机无线蓝牙APP控LED灯亮灭亮度设计
331 1
毕业设计 基于51单片机无线蓝牙APP控LED灯亮灭亮度设计
【Axure教程】用中继器做答题app原型
【Axure教程】用中继器做答题app原型
【Axure教程】用中继器做答题app原型
《优酷APP全量支持“暗黑模式” 设计与技术完整总结》电子版地址
优酷APP全量支持“暗黑模式” 设计与技术完整总结
368 0
《优酷APP全量支持“暗黑模式” 设计与技术完整总结》电子版地址
|
人工智能 移动开发 运维
阿里云APP “题库 ” 重磅上线!考取阿里云认证刷题神器,“懒人”必备
阿里云APP上线最新题库功能,和小编一起探索新功能~
11811 17
 阿里云APP  “题库 ”  重磅上线!考取阿里云认证刷题神器,“懒人”必备
短视频app制作,技术设计合理性的评判维度
短视频app制作,技术设计合理性的评判维度

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 4
    【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
    31
  • 5
    陪玩APP推送配置:陪玩系统手机锁屏收不到推送?可能是这些原因!解决方案来了!
    34
  • 6
    小游戏源码开发之可跨app软件对接是如何设计和开发的
    33
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    135
  • 8
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    60
  • 9
    语音app系统软件源码开发搭建新手启蒙篇
    44
  • 10
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    884