从零开始设计一款APP之如何做原型图

2023-05-16

这个系列的文章把整个设计过程的经验总结成文,逐点分享,上期是概述+立项,这期聊聊低保真和高保真原型图的作用、处理工具和文件要求等。

Low-fi,即低保真原型图,整个APP设计阶段,设计师真正开始上手的环节。待PM制作好PRD文档和逻辑流程图之后,交互设计师开始依据已有的结论,画出Low-fi。

Low-fi的作用

1. 方便团队进行方案的讨论和统一。

就像使用场景Scenario和用户画像Personas,团队每个成员脑海中所理解的都会有所不同,但通过PRD,咱们可以进行至少是大体上的统一。而在这基础上,APP的具体画面和流程,每个人都有自己想象的视觉效果。Low-fi就在此时起了相同的作用。

当然统一的进一步促进效果是,进行后面核心功能的深入探讨,将概念落实到实施方案,并验证逻辑上是否能跑通,以及主页面元素的确定。

  1. 方便开发人员进行整体架构的布置,开始着手一些基础元素的部署。

  2. 做出demo进行内部尝试、小范围的用户调查,一般会有一些更改,不会影响项目主方向,大多是功能上的调整

Low-fi 的处理工具与文件要求

作为交互设计师,在Low-fi阶段多使用的是sketch,PS更侧重于用来做图片的处理。出发点还是更多的从效率上进行考虑,sketch运行速度非常快,文档小,测量距离方便,可复用的图层组(symbol),做好图之后导出多倍图也十分方便。所以在此阶段做草图,sketch是不二之选。

然而,对Low-fi的文件处理也有一些要求,主要分为视觉效果和文件名整理。

视觉效果上倾向于使用黑白灰无色彩感的设计方案,目的是为了降低视觉上的干扰,让设计师和团队其他成员,将精力重点放到APP本身的功能完善和逻辑完整上面。

而文件名的整理主要表现在图层命名需要规范。统一的控件用symbol进行管理,symbol的命名建议使用驼峰式,即每个单词间没有空格,每个单词首字母大写(这里说的是大驼峰式,即第一个单词的首字母也大写了)。

Symbol 的分类主要有这几类:StatusBarKeyboardHeader、Button、CardsTabBarControlListItemPopup等,如果想细分也可以再进行一些细分,比如Popup可以再分出一个细枝为Toast等。

icon类的只能用小写且不能以数字开头,不能包含空格。对于 icon,建议对通用模块再分子类(例如:icons/topnav/; icons/tabbar/; icons/general/…),原则是分类非常符合常识,到了后期icon类的symbol 会非常多,这样方便快速从一堆 icon 中找到它。

对于Sketch的group管理,建议按照功能模块进行分类与命名。比方说,video中有VideoPlayer和SingleVideo不同种类,game有GameScore和GameReport等,按照不同的用途进行重组。

这样的目的是为了,在接下来用一些动态原型工具,比如Flinto或者Origami等等时,方便查找,以及合成图层组。绝大部分动态原型工具,都是靠渲染图片来进行展示原型的,图层越少,电脑效率越高使用越流畅。

文件在Low-fi阶段整理地越清晰,设计师头脑越清晰,High-fi阶段越省力。

总的来说,在Low-fi阶段是定主体功能和APP雏形的阶段,在这一阶段,设计师需要帮助团队统一APP的整体架构,页面的大体功能模块分类和跳转关系,让APP从大家脑海中的形象落实到真实的视觉效果中。

当项目进行到Hi-fi阶段时,设计师会同PM一起开会,经过立项阶段,走过Low-fi过程,来到Hi-fi的这一步。在这一系列的相处过程中,大家会遇到问题,然后解决问题,会产生摩擦也会一笑泯恩仇。

注:Hi-fi 是高保真原型图
在这里插入图片描述

这节主要集中于讲Hi-fi的主要内容和与PM相处之道。

1. 角色定位与交流主旨

交互设计的角色是帮助、协助PM一起完成产品,不是画设计图,也不是切图,而是帮助团队一起经历产品从0到1的整个过程。为什么会在开头强调这个事,这个决定设计师对自己作品的态度,不是完成任务,作为交换工资的筹码,而是倾注自己的激情与心血的作品,是自己的一个代表面。

而交流的主旨呢,不是从气势上压倒对方,证明自己的做法是对的,或者说显示自己多么聪明,而是帮助PM,帮助团队顺利完成产品的开发,产品好,团队好,对方好,自己才能更好。这就是一种双赢的思维吧。

2. 工作内容的交流

在这里插入图片描述
与任何人的工作内容都包含两个方面,一方面是对方向你的信息输入,另一方面你给对方的信息输出。

PM对交互设计师的信息输入主要是场景的沟通与对用户画像的建立。想讲明白一件事,咱们做的产品是给什么人在什么情况下因为要解决什么问题而干了什么事。会有相应的用户画像,即对我们的目标用户进行年龄、职业、兴趣爱好等方面信息的确认。

当交互设计师拿到这样的信息时,最不在状态的反应就是没有任何反馈,一切听从PM的信息传输。比较好的做法是,在讨论当时就说出自己的疑虑,跟PM进行沟通,最常见的术语是“有没有考虑过在这种情况下用户…”、“倘若用户不这么做,而是…”等等。及时的反馈会帮助PM进行场景上的完善和调整。

当然,这样的讨论过程是个持续输出的状态,不管自己做Low-fi还是hi-fi的时候都会遇到,然后自己一边做一边想到问题,一遍去问PM。不反馈的话,这些问题在开发的阶段都会一个个蹦出来,逃也逃不掉。

PM对设计师另一个信息的输出就是针对设计稿。首先会设计稿整体对用户传达的信息是否有所体现进行refine,接着会对信息是否完整,流程是否通常进行进一步的确认。

3.提供必要的情绪价值

生活的方方面面都是在与人进行沟通,你帮我,我帮你进行解决问题。除了解决工作内容后,如果能学会与人交朋友,让别人更开心地与你合作,提升同事与你合作的体验是一件干得特别漂亮的事情。有空再展开这篇进行讨论吧,楼主也在锻炼自己这方面的能力中。

Hi-fi的三个阶段

做Hi-fi,说明产品的功能和流程基本确定,产品雏形已经形成,现在拿出Low-fi图开始进行细致地UI设计,做出精美的商业视觉效果,让用户感受到这是一个值得信赖的成熟产品。

Hi-fi大概也可以分为前期、中期和后期三个阶段。前期的主要任务是hero screen(主功能页面)的尝试设计,通过它进行视觉风格上的确定。包括代表色、代表字体以及它们搭配方案、用法等的确定。

中期,在确定好风格的基础上进行APP其他页面的视觉完善,比如辅助功能,页面的空状态和无网络状态的确定。

后期,继续完善,抽出时间,来进行创意性以及个性化的设计,这些会是产品的点睛之笔,让灵魂呼吁而出,比如个性化的loading小动画,lauch card(启动页)等等。

总的来说,设计师先学会做人,然后才能用心体会到做事。敬请期待下期对Hi-fi阶段的详细解析~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从零开始设计一款APP之如何做原型图 的相关文章

  • 运行x程序出现:Can't open display 原因及其解决方法

    因为Xserver默认情况下不允许别的用户的图形程序的图形显示在当前屏幕上 如果需要别的用户的图形显示在当前屏幕上 则应以当前登陆的用户 也就是切换身份前的用户执行如下命令 xhost 43 xhost 43 的作用 xhost 是用来控制
  • ORACLE数据库管理员的职责

    ORACLE数据库管理员的职责 一 xff0e 概述 ORACLE数据库管理员应按如下方式对ORACLE数据库系统做定期监控 xff1a 1 每天对ORACLE数据库的运行状态 xff0c 日志文件 xff0c 备份情况 xff0c 数据库

随机推荐

  • 实用webpack插件之ProvidePlugin

    现代化前端的全局引入是一个很有趣的东西 先来看下以下几个场景 xff1a 在webpack中 xff0c 我们可以在resolve的alias中定义一个层级较高的目录为一个自定义变量 例如resolve alias 64 path join
  • Conda&&Pip 使用

    提示 xff1a 文章写完后 xff0c 目录可以自动生成 xff0c 如何生成可参考右边的帮助文档 目录 一 conda 配置环境 1 查看conda版本 2 升级conda版本 3 修改conda下载源渠道 4 conda删除追加的下载
  • IDEA2022.1创建maven项目,规避idea2022新建maven项目卡死,无反应问题

    idea 2022的新建项目和旧的不一样 选择maven archetype 输入 name xff08 项目名称 xff09 location xff08 项目文件路径 xff09 jdk 1 8 catalog xff1a 目录 xff
  • tightvnc绿色版,细数4款超好用的tightvnc绿色版

    在使用tightvnc软件时 xff0c 通常都希望能找到绿色版软件 xff0c 那大家知道有哪些tightvnc绿色版软件吗 xff1f 你所使用过的tightvnc绿色版软件又有哪些呢 xff1f 接下来让我们一起来看看那些超好用的ti
  • 修改 FTP 文件夹 权限 Linux

    cd 到根目录 1 例如FTP服务器根目录是aliRoot cd aliRoot 2 指定一个文件夹修改权限 xff1b 命令 xff1a chmod R 777 goodlist 现在 aliRoot goodlist 文件夹下就可以上传
  • Linux命令大全: mkdir命令 - 创建目录

    1 详解 mkdir命令是 make directories 的缩写 xff0c 用来创建目录 注意 xff1a 默认状态下 xff0c 如果要创建的目录已经存在 xff0c 则提示已存在 xff0c 而不会继续创建目录 所以在创建目录时
  • shell基础教程25: Shell字符串截取(最详细的教程,看完这篇可以弄懂整个原理)

    Shell 截取字符串通常有两种方式 xff1a 从指定位置开始截取和从指定字符 xff08 子字符串 xff09 开始截取 一 从指定位置开始截取 这种方式需要两个参数 xff1a 除了指定起始位置 xff0c 还需要截取长度 xff0c
  • Linux命令大全: nohup命令 – 后端运行程序

    nohup命令的全称为 no hang up xff0c 该命令可以将程序以忽略挂起信号的方式运行起来 xff0c 被运行的程序的输出信息将不会显示到终端 无论是否将 nohup 命令的输出重定向到终端 xff0c 输出都将附加到当前目录的
  • Linux命令大全: cat命令 – 在终端设备上显示文件内容

    1 详情 Linux系统中有很多个用于查看文件内容的命令 xff0c 每个命令又都有自己的特点 xff0c 比如这个cat命令就是用于查看内容较少的纯文本文件的 cat这个命令也很好记 xff0c 因为cat在英语中是 猫 的意思 xff0
  • Nginx安装报错:./configure: error: the HTTP gzip module requires the zlib library.

    错误信息 span class token punctuation span span class token operator span configure error the HTTP gzip module requires the
  • Nginx安装时:安装zlib1g-dev时提示“E: 无法定位软件包 zliblg-dev“的原因

    起因 安装zlig1g dev 依赖包时 xff1a sudo apt get install zliblg dev安装失败 发现 zlig1g dev中的第5个字母不是l xff0c 而是阿拉伯数字1 解决 输入sudo apt get
  • Nginx在Linux下常用的命令

    一 命令说明 选项说明 h帮助命令 v查看版本号 V查看版本号和配置选项 可用类查看已安装的所有模块 t测试配置文件是否正确 T测试nginx conf文件是否存在语法错误 q优雅停止nginx xff0c 有连接时会等连接请求完成再杀死w
  • ubuntu安装nginx与卸载

    一 安装nginx 1 前言 安装nginx 主要有2种方式 1 直接使用 sudo apt get install nginx 2 使用源码的形式安装 本次主要记录的是使用源码安装 2 下载nginx源码 a nginx官网下载地址 gt
  • ping不通Linux服务器怎么办?

    问题描述 xff1a ping是最常见的网络命令 xff0c 用来测试和远程机器是否连通的方法 我们常常会遇到一个问题 xff1a 无法ping一台远程主机 原因分析 xff1a ping不通远程机器 xff0c 最常见的原因有 xff1a
  • Nginx 学习 2: nginx进程模型

    一 概述 nginx有两类进程 xff0c 一类称为master进程 相当于管理进程 xff0c 另一类称为worker进程 xff08 实际工作进程 xff09 启动方式有两种 xff1a 单进程启动 xff1a 此时系统中仅有一个进程
  • nginx学习 3: Nginx 核心配置详解

    一 结构说明 说明 main 配置影响nginx全局的指令 一般有运行nginx服务器的用户组 xff0c nginx进程pid存放路径 xff0c 日志存放路径 xff0c 配置文件引入 xff0c 允许生成worker process数
  • Android中最佳实践@BindView代替繁琐的findViewById

    ButterKnife ButterKnife是一个专注于Android系统的View注入框架 以前总是要写很多findViewById来找到View对象 xff0c 有了ButterKnife可以很轻松的省去这些步骤 是大神JakeWha
  • 从零开始设计一款APP之Android设计规范篇

    一 基础概念 1 什么是DPI xff1f DPI xff08 Dots Per Inch xff09 xff1a 每英寸点数 xff0c 表示指屏幕密度 是测量空间点密度的单位 xff0c 最初应用于打印技术中 xff0c 它表示每英寸能
  • 从零开始做App 系列之项目立项+预估时间篇

    UI 设计师从零开始做一个App 要经历哪些流程 xff1f 这个系列的文章会为新手一一讲解 本篇会为你讲解如何做项目立项和项目预估时间 xff0c 实用高效 xff0c 新手来收 项目立项篇 如果你所在的是一个团队健全的公司 xff0c
  • 从零开始设计一款APP之如何做原型图

    这个系列的文章把整个设计过程的经验总结成文 xff0c 逐点分享 xff0c 上期是概述 43 立项 xff0c 这期聊聊低保真和高保真原型图的作用 处理工具和文件要求等 Low fi xff0c 即低保真原型图 xff0c 整个APP设计