当前位置:

首页 > 系统应用 > 1.7 界面原型设计

1.7 界面原型设计

本节引言: 引用锤子科技视觉设计总监——罗子雄在重庆TEDx活动上说的一小段话: 每当我们看到一些美妙的设计的时候,很多人心里面会有一种冲动,这种冲动会让你们想去创造一些 新的东西,创造一些美妙的事物。 我们常说用户体验用户体验,用户使用你的软件,第一个会接触的是什么?没错,图形化界面(GUI),简

本文目录

    本节引言:

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

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

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

    先不聊功能,单看UI,你会更偏向哪一个?
    说白了,产品的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:注册一个你自己的账号,然后新建文件进入编辑界面!(时间关系,这里笔者直接试用) 然后弹出一个原型风格的对话框给我们选择:素描跟线条!

    笔者选择线条:

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

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

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

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

    好了,大概的用法就这些,大家可以自己摸索摸索,另外,如果生成文档是要升级为付费用户的哦!一个月6元不贵,就一个早餐钱,当然如果是自己玩玩而已就没必要开了!

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

    其实,Android自己也带了一个有点“上年头”的界面设计工具。真要跟前面那些看起来很专业、很炫的界面原型工具放在一起比,差距确实不小。可以把它理解成一个独立拆出来的ADT,至于比ADT多出来的那点实用价值,主要也就是能自动生成代码……不过话说回来,对于平时很少接触原型设计的朋友,这个工具上手门槛确实不高,花上1、2分钟基本就能摸清怎么用,还是有一定价值的。

    工具界面:

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

    软件下载:droiddrawr.jar

    本节小结:

    本节给大家介绍了下界面原型设计的概念,轻量级Mockplus(摩客)的简单实用,以及Android自带的DroidDraw工具,内容比较简单,还需大家自行实践理解!

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
    作者最新文章
    系统应用
    相关文章 更多
    Yandex浏览器官网登录与在线体验入口
    Yandex浏览器官网登录与在线体验入口

    Yandex浏览器官方网站登录入口是https://www.yondex.net/,提供多语言下载、账户同步、广告拦截、Turbo模式及隐私保护等功能,支持跨设备数据同步与安全浏览。

    2026年AO3镜像最新地址及稳定入口
    2026年AO3镜像最新地址及稳定入口

    ao3镜像2026最新入口包括主站archiveofourown.org、镜像站ao3mirror.com和xiaozhan.icu,建议收藏备用并根据网络情况切换使用。

    Win10搜索不到蓝牙耳机的排查与连接方法
    Win10搜索不到蓝牙耳机的排查与连接方法

    面向在Windows 10系统中无法发现蓝牙耳机的用户,本文提供从耳机配对模式到系统设置的完整排查路径。首先确保耳机已充电并进入可被搜索的配对状态,断开与其他设备的连接;随后在Win10设置中开启蓝牙并添加设备。若蓝牙开关缺失或适配器异常,需通过设备管理器检查驱动状态并更新,以恢复正常的蓝牙音频设备识别功能。

    Win10蓝牙耳机麦克风没声音?检查输入设备与权限设置
    Win10蓝牙耳机麦克风没声音?检查输入设备与权限设置

    面向在Windows 10系统中遇到蓝牙耳机能听声但无法录音的用户,本文解决因输入通道选择错误、隐私权限关闭或语音连接缺失导致的麦克风无声问题。关键步骤包括:在系统声音设置中正确选择Headset Microphone或Hands-Free AG Audio作为输入设备;在隐私设置中开启应用访问麦克风权限;确认蓝牙状态包含语音连接而非仅音乐连接,必要时重新配对或更新驱动。注意Stereo模式不支持麦克风输入,勿为音质牺牲通话功能。

    Win11打开服务管理器的两种方法:运行命令与计算机管理
    Win11打开服务管理器的两种方法:运行命令与计算机管理

    面向需要在Windows 11中查看或配置系统服务的用户,本文提供两种快速进入服务管理器的路径。一是通过Win+R运行services.msc直接打开,适合快速访问;二是从开始菜单进入计算机管理,再展开服务和应用程序找到服务列表,适合在统一管理界面中操作。文中说明查看状态通常无需特殊权限,而修改服务设置可能需要管理员账户,帮助用户根据实际需求选择合适入口。

    fences怎么彻底删除 清理残留文件
    fences怎么彻底删除 清理残留文件

    想知道Fences怎么彻底删除?本教程详解Windows 11下卸载Fences、使用官方Purge工具清理残留、删除布局备份及日志的步骤,助您干净移除软件并恢复桌面原生体验。

    Win11打开组策略的命令及家庭版无法使用说明
    Win11打开组策略的命令及家庭版无法使用说明

    面向需要在Windows 11中调整系统设置的用户,介绍通过运行命令gpedit.msc快速打开本地组策略编辑器的方法。该功能仅内置于专业版、企业版和教育版,家庭版通常不包含此工具,运行报错并非系统故障。本文详解正确的命令输入格式、界面确认方式以及通过任务栏搜索的替代路径,并指导家庭版用户如何查看系统版本以选择对应的设置入口或升级方案。

    Win11家庭版找不到组策略编辑器怎么办
    Win11家庭版找不到组策略编辑器怎么办

    面向使用Windows 11家庭版或家庭中文版的用户,解决运行gpedit.msc提示找不到文件的问题。该现象源于版本功能限制,修改文件名或重装同版本系统均无效。本文指导用户先通过“设置-关于”确认系统版本,日常配置优先在“设置”应用中完成;若确需本地组策略功能,建议通过官方渠道升级至专业版,并警示避免使用来源不明的第三方安装工具。

    fences怎么退出 关闭后台运行程序
    fences怎么退出 关闭后台运行程序

    想让 Fences 暂时停止接管桌面?本文详解 Windows 11/10 下关闭 Fences 总开关、禁用开机启动及验证后台状态的操作步骤,区分临时停用与彻底卸载,确保桌面文件安全。

    电脑黑屏图片有哪些类型?纯黑壁纸与故障画面辨别方法
    电脑黑屏图片有哪些类型?纯黑壁纸与故障画面辨别方法

    分不清电脑黑屏是设置了纯黑壁纸还是系统故障?本文详解纯黑壁纸的视觉特征与故障黑屏的区别,提供Windows和Mac系统的纯黑壁纸设置方法,助你快速判断屏幕状态。

    查看更多
    精品专题 更多
    装机必备
    装机必备

    正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

    Windows
    Windows

    正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

    PDF教程
    PDF教程

    正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法,同时介绍常用PDF软件和工具的使用技巧。

    Mac软件 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    Aperty macOS版
    Aperty macOS版
    macOS

    Aperty 是 Skylum 推出的 AI 人像修图软件,支持自然肤质修饰、瑕疵处理、面部与身体调整、预设及批量同步。

    WINDOWS 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    PixTV 网页版
    PixTV 网页版
    Windows

    PixTV 是一款在浏览器中使用的 AI 视觉内容创作平台,提供图片、视频、音频、文字生成、AI 分镜、局部重绘、提示词反推和无限画布等工具,适合短剧、漫剧、广告及社交媒体内容制作。