Day4 制作草稿

客户:「我希望这个东西可以帮我洗碗」

我:「这个需求简单明了」

客户:「」

这个时候就需要Wireframe!

为的就是确认双方脑袋里的想法是不是都是一致的,简单绘制Lo-Fi草图与客户沟通,不需要太完整太美丽,主要目标就是确认双方共识,缩短沟通时间,增加工作效率,早点完成工作早点下班回家(并不会。

以下提供几个工具给大家使用。

  • Balsamiq
  • Draw.io
  • 纸跟笔

Balsamiq

一款简单方便操作的应用程序,下载後就可以开始快速的绘制出wireframe。如果下载桌面版的话可以免费试用30天

网址:Balsamiq

https://ithelp.ithome.com.tw/upload/images/20210918/20140638410u3hg3yZ.png

上面会有很多素材可以直接拖拉下来,使用上也是挺直觉的,但是身为免费仔,对於只有30天的试用期并不是很满意,所以可以使用另外一个工具。

这边有一段影片大家可以参考用,但是年代久远,想要上手最快的方法就是实际操作啦。

https://youtu.be/70hfU7_95Gw

Draw.io

一款线上的网页图表工具。

网址:Draw.io

Untitled

他与上一款类似都可以直接在旁边的资源库做拖拉,资源算是满丰富的。

这款软件陪伴我度过大学艰苦困难的日子,我最一开始使用是拿来绘制各式的diagram,例如:use case diagram, sequence diagram与一些教授喜欢看到的图,他可以绘制的图形种类是真的很多,有兴趣的朋友可以去玩看看。

除了绘制diagram也可以在里面绘制wireframe,绘制完成可以直接存放在你的本机硬碟、google云端硬碟或是Onedrive里,也是挺方便的

纸跟笔

最後一样我们选择回归原始,虽然上面介绍的软件都还挺好用的,如果跟客户面对面开会,最快的方式就是直接用笔画出来,客户也可以参与绘画。也有很多设计大师还是坚持使用手绘设计图稿,他们觉得这样的图稿才有温度,需要修改的时候才方便。

下一篇来说明利用figma来绘制更精确的UI设计。

下一篇件写写打家打家摆掰。


<<:  使用jupyterhub执行MNIST training

>>:  Day.11 搞懂主从架构- 主从复制(Master Slave Replication)

Day 06 - Lenses (Basic)

yo, what's up 今天要在 FP 里很有用的概念 Lenses, 它可以减少在处理资料结构...

Day.20 Course Schedule

Leetcode #207. Course Schedule 题目给你一系列的课程,每一个门课都有它...

容器化及容器技术(containerization and container technology)

-虚拟机和容器部署(来源:NIST SP 800-190) 虚拟机器监视器(Hypervisor)...

Progressive Web App 个案分析: 乐天 24 导入 PWA 後带来的好处 (10)

小编在读 PWA 相关技术文章的时候,刚好读到了乐天 24 这篇导入 PWA 的个案分析,乐天 24...

【Day3】odoo社区版之应用模组架构

#odoo #开源系统 #数位赋能 #E化自主 前言 我们前一天讨论了如何进行odoo社区版的安装,...