Axure优雅装逼指南:开启原型高颜值形态

作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。


Axure优雅装逼指南:开启原型高颜值形态

  内容目录:

  • 啥是高保真原型?简单说明原型

  • Axure可以画出什么水准的高保真?给示例,开启装逼模式

  • 特殊的技巧:

  • 核心内功:目标清晰/理解设计规范

  • 画图习惯:像素对齐/用浅色/上素材

  • 啥时候上高保真?:适用场景 and 不适用场景


  • 啥是高保真原型?


    啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:


    原型:草图。从产品流程来看,将想法形成草图原型,原型再有设计师形成效果图,程序猿们根据需求和效果图开发,出来的软件样子就是和效果图差不多。原型在过程中就是产品最终形态的骨架。


    低/中/高保真:根据图的粗糙程度划分,以最终效果图为参照。保真程度越高,离最终效果图越接近。


    Axure:工具只是实现想法的工具。在众多的原型软件中,最广泛使用的就是Axure了。


    Axure可以画出啥水准的高保真?


    在这里一图胜过千言,以下分享自己画过低/中/高保真原型截图。

    @低保真:最轻松和省时间的原型,粗犷的风格让我们只重视结构和流程,原型不在乎太多设计细节。


    • 示例1:一个App官网下载页的低保真原型,我们甚至可以成为结果图,突出了这个需要哪一些元素。

    Axure优雅装逼指南:开启原型高颜值形态

    Web下载页.png


    • 示例2:wap版本下载页,同样低保真,突出结构和元素。

    Axure优雅装逼指南:开启原型高颜值形态

    wap下载页.png

    @中保真:这类原型最常见,低保真不容易描述产品最终样子,高保真容易干扰设计师,中保真汇集了各类有点,也是比较常用的。


    • 示例3:本示例图为微信酒店订房下的系列页面,中保真对比低保真,更能体现了交互细节和产品流程。

    Axure优雅装逼指南:开启原型高颜值形态

    某订房流程.png


    • 示例4:这是一个”邀请好友注册获取奖励“的流程,采用中保真并强调了多个页面的交互流程。

    Axure优雅装逼指南:开启原型高颜值形态

    推荐好友注册.png


    @高保真:对比中低保真,高保真可以称之为效果图了,如果加深细节可以直接对着开发咯,换句话说,高保真更强调细节。


    • 示例5:在校期间做的校园助手小项目,和同学的第一个1000+用户的项目,简直无以言必的自豪感。由于组内无设计同学,于是要求用Axur直接先画出类似最终效果的高保真,最后再开发。图中除了素材,其他都是使用Axure直接绘制出来。

    Axure优雅装逼指南:开启原型高颜值形态

    校园助手首页.png


    • 示例6:在校期间某日看到了多年未更新的老版36Kr,根据自己兴趣画了新版效果图,也是可以直接通过Axure绘制出来。

    Axure优雅装逼指南:开启原型高颜值形态

    兴趣36KR.png


    Axure优雅装逼指南:开启原型高颜值形态

    侧边栏.png


    • 示例7:众包某App中“我的”页面。

    Axure优雅装逼指南:开启原型高颜值形态

    众包App我的页面.png


    高保真的特殊技巧


    特殊的技巧:
    - 核心内功:目标清晰/理解设计规范
    - 画图习惯:像素对齐/用浅色/上素材


    @核心:
    目标清晰:不管采用低中高的原型,核心目标是交互稿就是想法的表达,产品流程的表达。可以采用“目标、堆叠、排序”方式来表达。目标指的是页面目的,流程目的,都是为了实现某些需求。堆叠指的是为了满足目的,一个新闻详情页需要哪些元素?一个登录页需哪些元素?建议先用思维导图或者手绘出基本包含的元素,先把包含的元素列出来,不在乎样式,正如HTML编码里面的”内容/样式/结构“,堆叠考虑的是内容和结构。
    等列出这个页面的所有元素,那就可以开始排列了,这就涉及涉及规范和画图习惯了。

    Axure优雅装逼指南:开启原型高颜值形态

    目标元素排列.png


    了解设计规范:了解不同类型产品的设计规范是很有必要的。比如IOS、Android、Web设计规范,或者某个产品常用页面设计方法。没人会把登录按钮放在账户密码框的上面,了解设计规范的目标是调整好页面结构,将页面元素合理的摆放。推荐《UI设计模式》和《Web信息架构》这两本书,总结了移动端和Web端常用的页面设计知识。

    Axure优雅装逼指南:开启原型高颜值形态

    了解设计规范.png


    @习惯:
    绘图习惯直接影响到了画出来的效果,如果想轻松画出颜值较高的原型,那么可以遵守以下细节。


    控制组件到素级级别:低保真原型比较粗糙是因为不在乎细节,啥事细节,就是一个页面内元素的宽高圆角等。所以画高保真原型时候,最常用习惯就是计算和定义组件的宽高等属性。 比如App基础背景页面我们可以定义为320x480(Iphone4s的对半比例)、360x640(720P屏幕的对半)等其他比例,然后在此基础上,定义状态栏高度20PX像素,xxx栏高度44Px,几乎就是按照设计规范给的来画组件了,自定义组件一般取10px的倍数,如状态栏这类组件尽量复用。

    Axure优雅装逼指南:开启原型高颜值形态

    控制组件像素.png


    善用对齐功能:对齐在Axure里面非常重要,善用Axure自带对齐功能!

    • 不同组件间距尽量对齐相同,或者10px的倍数规律。

    • 2个元素间关系善用向左/右对齐,居中对齐,页面内元素间必须存在对齐关系(左右居中)

    • 3个元素以上,善用间距对齐。

    Axure优雅装逼指南:开启原型高颜值形态

    把握间距.png

    Axure优雅装逼指南:开启原型高颜值形态

    Axure的对齐.png


    浅色为主,慎用深色:在组件颜色选择上,尽量采用浅色,首先是深色显得比较重,建议关键组件采用深色。

    Axure优雅装逼指南:开启原型高颜值形态

    浅色为主,谨慎用深色.png


    图标等采用真实素材:在低保真中,涉及图片图标等素材用占位符,而画高保真时,我们可以替换为真实素材。图标可以去Iconfont下载寻找,图片尽量找真是素材替换。


    有兴趣适当配色:在不影响设计师的前提下,可以尝试配色,但是交付设计师的交互稿最好不带颜色。


    啥时候上高保真?


    并不是任何时候都适用于高保真原型,哪些场景下比较适合使用呢?

    适用场景:

    1. 不干扰设计师的前提下,想要尽量接近产品最终效果。

    2. 涉及会议演示。

    3. 做好方案对B/C端用户直接展示,越保真效果越好。


    非适用场景

    1. 产品流程还在探索期,此期强调流程而不是细节,建议采用低保真。

    2. 周期短,那还是重点表达清流程和适当的细节。


    总结,高保真原型:

    • 制作周期:较长,耗时间。

    • 适用场景:流程清晰的前提下,想要接近或者定义最终效果。

    Axure优雅装逼指南:开启原型高颜值形态


    Axure优雅装逼指南:开启原型高颜值形态

    作者:yanggan

    文章来源:https://www.jianshu.com/p/95c458b17bef

    转载文章仅供学习交流,不作任何商业用途。


    Axure优雅装逼指南:开启原型高颜值形态

    原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36748/

    (0)
    交互精选交互精选
    上一篇 2018-04-28
    下一篇 2018-04-28

    相关推荐

    • 用Axure写PRD:虎扑app产品需求文档(附下载链接)

      需求文档是产品经理的基本功,产品小白入门的必经之路,但对于小白来说,没经历过一个完整的项目,自然也没有产品可以写,所以倒推产品是一个练手的好方法。Axure也是产品经理的基本功,画原型图的利器,但axure不止是能画原型,还可以用来写prd,正如臻龙大神说的做这样一个一体化产品需求文档出于的目的就是传统的方式产生的文件过多,过于杂乱,不易整理和回溯。如果把每个版本的内容都整理在一个html中,这样无论是团队协作还是文档回溯都能大大提高效...

      2018-03-15
    • 看世界之Google对话式交互设计规范

      目录序言1.对话式用户界面及其重要性2.建立友好用户界面的关键-理解对话如何进行设计实践3.设计原则与方法论4.设计走查5.设计检查表6.用户界面工具包最佳实践7.像你的用户一样...有合作精神(待翻译)8.解锁口语的力量(待翻译)9.通过确认逐渐给用户信心(待翻译)10.对话中是没有错误的(待翻译)1.对话式用户界面及其重要性我们已经进入全新并且充满希望的计算机时代,机器学习和人工智能的进步使得对话式界面和自然语言处理得以兴起,通过技...

      2018-02-24
    • Axure模板库(13)-直播

      最近直播app越来越火,我整理了一些直播app,做了几个模板,跟大家分享。原型文件在文章最后。1、首先临摹一个国外的。(1)首页第一个展示的是快速发布直播的入口,鼓励用户创作内容。第二个展示的是一系列标签。如果平台上内容类型比较多的话,可以像这样强调标签、分类。如果平台上都是美女主播,那分类的权重就可以小一点了。第三个展示的是直播列表。直播最重要的信息就是直播的画面,列表上可以放一张大图,或者更直接,展示一小段视频。(2)直播页面,展示...

      2018-03-04
    • 长大的用户体验不好,想退货了

      来都说:本周,小编的桌上多了一盆仙人球,世界各地还发生了这些小事情:钻石兄弟情、无声面包店、「自杀式」教学、午夜「决斗」、从天而降的小女孩、我明白得有些晚、长大的用户体验……01钻石兄弟情近日,美国印第安纳波利斯市一处停车场内,一位 80 岁的老爷爷遭遇抢劫。由于行动不便,拄拐杖的老爷爷只能任凭灰帽衫劫匪的摆布……这时,一个身影冲过来,朝着劫匪的后背就是一拳,劫匪被打得踉跄了几步,脑袋也有点蒙了。这个身影是 80 岁老爷爷的哥哥,今...

      2018-04-13
    • 用户体验之旅-开篇

      设计菜会有啥?设计菜主要针对用户体验的方方面面进行分享。也会适当分享行业的一些资讯。主要为了沉淀,不追求快节奏,慢下来去思考去沉淀是设计菜的宗旨。没有商业目标~没有商业目的~欢迎围观和点评。欢迎━(*`∀´*)ノ亻留言及分享!谢谢!图片来自于:pinterest

      2018-04-27
    • 蔚来ES8正式上市 | 重新定义汽车用户体验

      就在刚才,首届NIO Day蔚来日在北京五棵松体育馆圆满结束。蔚来ES8也正式上市并开启预订。近万名蔚来好友相聚于此今晚,这些信息你不容错过:蔚来ES8正式上市 公布售价蔚来ES8售价公布ES8基准版补贴前售价44.8万起,限量1万辆创始版补贴前售价54.8万,用户也可以选择电池租用方案,车价比常规购买低10万,每月支付1,280元电池月费,同时可享受电池升级服务。ES8上台亮相源于赛道冠军的极致性能4秒SUV俱乐部最大功率480千瓦(...

      2018-02-02
    • 2018年移动端用户体验设计趋势

      在移动应用领域,事物正飞速发展。要想在用户体验设计领域获得成功,设计师必须有远见,并为即将到来的新挑战做好准备。为了简化这个任务,我列出了2018年最重要、最有影响力的趋势,而且很有可能远不止如此。1.简化用户的使用流程当我们与应用程序或网站互动时,我们有一个特别的目标。通常,我们花在实现这一目标上的努力越少,体验就越好。线性用户使用流程线性用户体验设计指的是一种带有特定的开始、过程和结束,并且可以让用户在每一步完成一个动作的用户体验设...

      2018-02-01
    • 星环AI部门招聘 | 春风十里,星环有你

      星环简介星环科技是全球领先的大数据与人工智能基础平台供应商,专注于提供企业级容器云计算、大数据和人工智能核心平台的研发和服务,打造大数据和人工智能生态的“中国心”。公司以上海为总部,以北京、广州、多伦多为区域总部,并在南京、郑州、成都设有支持中心,同时在深圳、天津、武汉等地设有办事机构。经过多年自主研发,星环科技建立了四条产品线:一站式大数据平台Transwarp Data Hub(TDH)、基于容器的云操作系统Transwarp Op...

      2018-04-02
    • 用户体验 | 6个细节成就了今天的X1 Carbon 2018(下篇)

      上篇我们聊了Logo配色、ThinkShutter以及电源键设计,这一次我们一起来看看外形设计、移动便携和扩展能力ThinkPad X1 Carbon 2018在用户体验上有什么有趣的故事吧!一条曲线的神奇虽然建筑师高迪说直线属于人类,而曲线属于上帝,而逐渐读懂曲线的意义,思考曲线与直线之间合理应用,这整个的过程正是人类自我救赎和思想进化的过程。纵观笔记本变化的历史,外形和颜色往往决定着“颜值”,改变外形或者颜色设计的情况比比皆是,连M...

      2018-03-22
    • 抖音|如何提升广告的用户体验

      最近发现越来越多的人开始分析抖音这款产品。小编接触抖音时间也蛮久了,到现在成为年轻人的标配。今天小编就来跟你唠唠抖音那些事儿。douyin抖音·  正·  文·  来·  啦·从产品的冷启动,到现在的野蛮成长期,抖音这款产品变化不得不说变化很大,当时的抖音很纯净,并没有什么广告,当然这也是符合产品生命周期的特性。以前的抖音技术流占据了大部分江山,如今的抖音变成了生活小百科,网红商品的发源地,产品内容标准也在随着产品所处的阶段在变化。如今...

      2018-05-05