首页 > 其他分享 >界面原型设计

界面原型设计

时间:2023-01-05 22:01:40浏览次数:54  
标签:界面 原型 设计 UI 工具 Mockplus

引用锤子科技视觉设计总监——罗子雄在重庆TEDx活动上说的一小段话:

每当我们看到一些美妙的设计的时候,很多人心里面会有一种冲动,这种冲动会让你们想去创造一些新的东西,创造一些美妙的事物。

我们常说用户体验用户体验,用户使用你的软件,第一个会接触的是什么?没错,图形化界面(GUI),简称UI,对于用户而言,最直观,给用户留下第一印像的是往往是程序的界面,而非功能!人,总喜欢美的东西,对吧?假如一样的功能,决定用户取向的,往往是UI!精美的UI!当然还有一些贴心的人性化操作等!下图两个计算机的App界面:

界面原型设计_Android

界面原型设计_Android_02

由此,一个产品的UI是非常重要的,而产品的界面原型设计一般是由公司的产品经理+美工来完成的,需求分析 ->界面原型设计 ->我们来写代码!可能你觉得界面原型对我们而言并不没什么作用,但假如你以后想自己开发App呢?又或者你升做产品经理呢?公司的话,大部分使用的都是Axure Rp,但是这个东西比较难用!除了这个以外还有其他很多的原型设计工具:

  • Pencil
  • Framer
  • Shireframe
  • UIDesigner
  • Balsamiq Mockups
  • Mockup Builder
  • Mockup
  • FrameBox
  • iPhone Mockup
  • GOOFLOW
  • WireframeSketcher
  • FluidIA
  • Indigo Studio
  • Origami
  • Quartz Composer
  • Justproto
  • Avocado
  • PaintCode
  • Mockplus(摩客)
  • 墨刀等....

两个国产的界面原型设计工具,他们分别是:Mockplus(摩客)和墨刀本文会简要的介绍下Mockplus的用法!

Mockplus原型工具的使用:

有网页版以及客户端版供你选择:​​Mockplus官网​

Step 1:注册一个你自己的账号,然后新建文件进入编辑界面!(时间关系,这里笔者直接试用)然后弹出一个原型风格的对话框给我们选择:素描跟线条!

界面原型设计_UI_03

选择线条:

界面原型设计_Android_04

我们要做的就是从左边的组件栏中啦控件到手机界面上,当然,我们可以双击某个控件,自定义我们的样式,比如颜色,背景图片等!

Step 2:交互实现:界面原型除了界面外,肯定是少不了交互的,这里我们做一个简单的新闻应用的交互例子给大家体验下:我们在其中一个新闻类别中添加跳转链接。

界面原型设计_UI_05

接着我们可以点击右上角的播放按钮:

界面原型设计_UI_06

接下来我们就可以看具体的交互了,PS:这里可能是网页版的问题,有些图片显示不出来!

界面原型设计_Android_07

好了,大概的用法就这些,大家可以自己摸索摸索,另外,如果生成文档是要升级为付费用户的哦!

Android自带DroidDraw工具设计Android界面:

其实Android也给我们提供了一个"老掉牙"的界面设计工具,跟上面这些高大上的界面原型工具相比,差几十条街,可以理解成一个分离的ADT,比ADT高级一点的功能就是自动生成代码...对于很少接触原型设计的朋友来说,花1,2分钟就可以掌握这个工具,还是比较值得!

工具界面:

界面原型设计_原型设计_08

图示已经写明相关的操作了,很简单,实践是检验真理的唯一标准,自己下来试试吧!!

软件下载:​​droiddrawr.jar​

标签:界面,原型,设计,UI,工具,Mockplus
From: https://blog.51cto.com/u_15641375/5991951

相关文章

  • Rust 程序设计语言(8)
    title:Rust程序设计语言(8)date:2023-01-03updated:2023-01-05comments:truetoc:trueex......
  • 第十二章 GUI界面编程
    一、实验目的和要求1、学会应用常用控件;2、学会使用BoxSizer布局;3、学会事件处理。二、实验环境软件版本:Python3.1064_bit三、实验过程1、实例1:使用wx.StaticText......
  • JS原型链
    一.构造函数1.对象众所周知,JS是面向对象编程的弱类型语言,对象几乎涵盖了JS的所有----------万物皆对象。那么创建对象的方式有哪些呢?方法一:通常object的代码表现形式......
  • Triple 协议支持 Java 异常回传的设计与实现
    作者:陈景明背景在一些业务场景,往往需要自定义异常来满足特定的业务,主流用法是在catch里抛出异常,例如:publicvoiddeal(){try{//doSomething...}catch(IGreet......
  • Triple 协议支持 Java 异常回传的设计与实现
    作者:陈景明背景在一些业务场景,往往需要自定义异常来满足特定的业务,主流用法是在catch里抛出异常,例如:publicvoiddeal(){try{//doSomething...}catc......
  • 界面控件DevExpress WinForm——属于WinForm组件的MVVM框架
    DevExpressWinForm拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForm能完美构建流畅、美观且易于使用的应用程序,无论是Office风......
  • 设计模式
    一、装饰器模式1.基本概念和功能装饰器模式能够实现从一个对象的外部来给对象添加功能,有非常灵活的扩展性,可以在对原来的代码毫无修改的前提下,为对象添加新功能。除此之外,装......
  • [unity3D插件]Unity界面插件NGUI核…
    本文转载于互联网,是一个比较经典帖子,特来分享:UICamera-可以添加到任何相机,包含事件系统.UICamera是每个UI的重要组成部分.它负责发送Camera中所有NGUI的活动.如果场景中......
  • Python设计图书馆管理系统技术文档(五)
    (Python设计图书馆管理系统技术文档(五))5.3管理功能实现这个程序管理员的功能就3个,添加书籍、淘汰书籍、用户管理。5.3.1管理员界面(AdminHome.py)importsysimportq......
  • Python设计图书馆管理系统技术文档(六)
    (Python设计图书馆管理系统技术文档(六))6.图形界面程序打包与资源下载6.1打包(1)PyInstaller命令格式:pyinstaller[options]script-D:将所有文件打包到一个目录下-F:将......