1.7 界面原型设计.pdfVIP

1.7 界⾯原型设计 本节引⾔： 引⽤锤⼦科技视觉设计总监——罗⼦雄在重庆TEDx活动上说的⼀⼩段话： 每当我们 到⼀些美妙的设计的时候，很多⼈⼼⾥⾯会有⼀种冲动，这 种冲动会让你们想去创造⼀些 新的东西，创造⼀些美妙的事物。 我们常说⽤户体验⽤户体验，⽤户使⽤你的软件，第⼀个会接触的是什么？没错，图 形化界⾯(GUI) ，简称UI ，对于⽤户⽽⾔，最直观，给⽤户留下第⼀印像的是往往是 程序的界⾯，⽽⾮功能 ！⼈，总喜欢美的东西，对吧？ 假如⼀样的功能，决定⽤户取 向的，往往是UI ！精美的UI ！当然还有⼀些贴⼼的⼈性化操作等 ！ 下图两个计算机 的App界⾯： 我们先不说功能，从UI上讲，你喜欢哪个？ 由此，⼀个产品的UI是⾮常重要的，⽽ 产品的界⾯原型设计⼀般是由公司的产品经理+美⼯来完成的，需求分析 -界⾯原型 设计 -我们来写代码 ！可能你觉得界⾯原型对我们⽽⾔并不没什么作⽤，但假如你以 后想⾃⼰开发App 呢？又或者你升做产品经理呢？嘿嘿 ！世事⽆绝对，以后的事，谁 知道呢？公司的话，⼤部分使⽤的都是Axure Rp ，但是这个东西⽐较难⽤ ！除了这个 以外还有其他很多的原型设计⼯具： Pencil Framer Shireframe UIDe igner Bal amiq Mockup Mockup Builder Mockup FrameBox iPhone Mockup GOOFLOW WireframeSketcher FluidIA Indigo Studio Origami Quartz Compo er Ju tproto Avocado PaintCode Mockplu (摩客) 墨⼑等 笔者使⽤过的是两个国产的界⾯原型设计⼯具，他们分别是：Mockplu (摩客)和墨⼑ 本⽂会简要的介绍下Mockplu 的⽤法 ！ Mockplus原型⼯具的使⽤： 有⽹页版以及客户端版供你选择：Mockplu 官⽹ Step 1 ：注册⼀个你⾃⼰的账号，然后新建⽂件进⼊编辑界⾯ ！(时间关系，这⾥笔者 直接试⽤) 然后弹出⼀个原型风格的对话框给我们选择：素描跟线条 ！ 笔者选择线条： 我们要做的就是从左边的组件栏中啦控件到⼿机界⾯上，当然，我们可以双击某个控 件，⾃定义我们 的样式，⽐如颜⾊，背景图⽚等 ！ Step 2 ：交互实现： 界⾯原型除了界⾯外，肯定是少不了交互的，这⾥我们做⼀个简 单的新闻应⽤的交互例⼦给⼤家体验下： 我们在其中⼀个新闻类别中添加跳转链接， 接着我们可以点击右上⾓的播放按钮： 接下来我们就可以 具体的交互了，PS:这⾥可能是⽹页版的问题，有些图⽚显⽰不 出来 ！ 好了，⼤概的⽤法就这些，⼤家可以⾃⼰摸索摸索，另外，如果⽣成⽂档是要升级为 付费⽤户的哦 ！⼀个⽉6元不贵，就⼀个早餐钱，当然如果是⾃⼰玩玩⽽已就没必要 开了 ！ Android ⾃带DroidDraw⼯具设计Android界⾯： 其实Android也给我们提供了⼀个⽼掉⽛的界⾯设计⼯具，跟上⾯这些⾼⼤上的界⾯ 原型⼯具相⽐，差⼏⼗条街，可以理解成⼀个分离的ADT ，⽐ADT⾼级⼀点的功能就 是⾃动⽣成代码...对于很少接触原型设计的朋友来说，花1，2分钟就可以掌握这个⼯ 具，还是⽐较值得 ！ ⼯具界⾯： 图⽰已经写明相关的操作了,很简单,实践是检验真理的唯⼀标准, ⾃⼰下来试试吧!! 软件下载：droiddrawr .j ar 本节⼩结： 本节给⼤家介绍了下界⾯原型设计的概念，轻量级Mockplu (摩客)的简单实⽤，以及 Android ⾃带的DroidDraw⼯具，内容⽐较简单，还需⼤家⾃⾏实践理解 ！ W3Cschool （ ）最⼤的技术知识分享与 习平台 此篇内容来⾃于 ⽹站⽤户上传并发布。