Day#17 基本功能=直觉的画面

前言

最近写不熟的语言觉得有点累,想看看ios的其他相关技能。
同时也在思考一份完整的专案需要的前端画面是否可以靠自己来设计。想到约莫一周前写的使用者体验,今天想再来研究一下最近开发的注册/登入画面。
希望将功能开发完善後可以逐渐调整前端成想要的样子。

I'm 免费仔

决定了要先做流程,欲善其事必先利其器,本来想说都要开发潮潮的iOS了,就要用自家的sketch呀。

而且加上我许久前买了Hahow的课程iOS 入门 - 从介面设计到开发殊不知我到现在进度还是只有27%,果然买了线上课程跟side project一样,做完第一步就成为dead thread :cold_sweat:

总之,Adobe XD有提供免费版,功能基本、轻量,不过已经算很完备了! 为了上手,我参考Udemy上面的免费课程How to Design & Prototype in Adobe XD,这真的很推荐,从制作prototype的过程很完整的介绍所有功能,还有带到一些快捷键。

Wireframe

开启画面如下,可以直接开一个iPhone12,或任何行动装置大小的专案。

Adobe XD初始画面

登入

非常随便的先将专案就取叫Double Date。不是想抄袭...但我真的先想不到别的名字QQ
虽然在pinterest上研究了一下登入/注册的页面长怎麽样,但後来觉得如此==基本的功能应该设计的直观,以及不需要使用者花费额外的心力去理解画面、或是学习如何互动。

个人觉得这样的介面还算直觉。也提供了忘记密码、显示密码等的功能。

然後底下的使用条款就是放了觉得好像很潮。

注册

这边的介面差不多,比较需要注意的是couple code。第一天有提到第二个人在注册的时候需要输入这个号码,将两个人资讯连结在一起。

结语

到目前为止,Adobe XD使用起来我觉得一切都很直观,只是需要一些时间把画面刻出来。

未来展望(?)

後来有发现一些可以修改,或是需要修改的...

  1. email/password等提示字会直接写在输入格当中,而不是输入格上方
  2. 现在只有拉非常粗略的区块,但并没有考虑iPhone nav或是浏海等元件
  3. 因为视觉与Logo都还没有设计,各个区块大小与边界框线效果都需要另作设定

...这样讲好像代表未来的UI会跟现在大相径庭呢。

若上述内容有误或任何指教,欢迎留言~谢谢!


<<:  Day17-Vue Router与前端路由管理

>>:  Day17-Kubernetes 那些事 - Auto Scaling

[DAY 23]纠团通知功能(3/3)

纠团的功能我把它切成两个部分 使用者输入讯息 背景执行 今天介绍背景执行的部分 背景执行 这个部分主...

Day 25 用 WebMock + VCR 来实作测试

该文章同步发布於:我的部落格 WebMock 以及 VCR 是拿来实作关於网站请求的工具,在这篇文...

Day 23 - 网站与网路应用程序攻击

出於书本 Chapter 14. Web sites and Applications 前言 网站与...

全端入门Day23_後端程序撰写之多一点的Node.js

昨天写了写了基本的Node.js,但还没有介绍程序码,今天就来介绍昨天的程序码。 Node.js入门...

Day 20 | 万年范例-TodoList(3)

那今天就继续来扩充这个小专案的功能,我们现在可以新增及删除了,那今天就来实作更换卡片的状态好了。 首...