Design a login screen - wiznote

这是我bittiger上ux培训班的作业哦。

...

1.方向选择

对于design a login screen，我选择的是wizNote的登陆界面来redesign.这是一款类似于Evernote的产品。在redesign前期，我也参考了其他笔记类软件的login页面，开阔思路。自己在视觉方面很薄弱，所以颜色尽量往简洁方面走。

因为没有Mac...哭晕...暂时选择用MockingBot做的。

2.WizNote登陆界面、分析 

自己做的图

布局：很模块化，没有整体感，缺少沉浸体验；按钮是长方形设计，太有棱有角；产品的两个特点放在拆分在两个轮播图里，没必要

视觉：wiznote主色调是蓝色+白色，logo和产品使用界面都是如下图这种色调。所以在注册期间搭配深色的背景图，我很不理解，觉得可以换掉。

logo

3.Redesign

自己做的

3.1 sign in、sign up、skip按钮

我起初觉得，笔记类app的使用者，有可能是从pc端转移过来的，也有可能第一次在移动端下载使用这款app，所以在“登录、注册”的按钮设计上，我起初觉得应该是两两开，即保持原设计。但是后来再设计过程中，想到笔记app既然主打的是跨平台同步，也就意味着有更多的用户可能是为了同步而下载app。所以突出了“sign in”按钮。

自己做的

另外redesign之前，看了下有道云笔记、evernote等竞品的登陆界面，反正我是不喜欢evernote的登陆界面，我觉得它应该增加个“试用”的按钮，让新用户有选择试用的权利，而不是上来就必须要登录或注册。

3.2 color

不喜欢wiznote的登录注册界面。我选择的颜色就是他们的主题色，比较简单，蓝➕白。

3.3problem

wiznote原本的设计中，登录界面右上角有个“配置”按钮，似乎对应企业账户和个人账，默认的是个人账户吧。但是打开时，我很困惑，所以就为当前模式添加了颜色条。

自己做的

Yuan Chen老师评价:

做的非常认真，有自己的思辨能力和判断能力，非常棒！从临摹作业做出来了redesign，还领先了一大步，完全领会了老师们布置作业的意图，非常棒！

首先我分为视觉和逻辑两大块简单点评一下。

1.视觉：

小伙伴在做完research说产品的色调偏蓝白所以觉得登录界面需要统一，这是个很好的观察，鼓励鼓励～大基调定下来后细节上有些部分值得再次琢磨，比如：

字体颜色不统一：

登录密码的填写框的提示字颜色，忘记密码的颜色以及第三方登录都是三种不同深浅，不同tone的灰色，建议统一。

第二屏里有一个web形式的选框，需要考虑是否符合mobile的体验习惯。一般来说设计师们在设计手机spp的时候会尽量避免使用web的体验，比如下拉菜单，hover等等，用更加符合手机体验的模式来替代。同时这个菜单弹窗里的字体也不统一。

2.逻辑：

其实在思考一个成熟设计的产品的时候有一点很重要，很多时候设计的决策取决于很多因素，比如自身的商业战略考量，目标用户的测试情况，所以不能仅凭主观的感觉去定义两页轮播图是否有必要。比如我第一眼看到redesign的首页，我可能没有一个概念，wiznote是什么，他的核心功能是什么，如果是一个新手用户，没有一些简单的新手教程（on boarding）可能这个用户就流失掉了。所以这一点可以再重新去考量你的目标用户群体，不仅仅是那些你提到的，pc端转移过来的熟练用户，还有一些是没有接触过wiznote的新用户。

同理，sign in, sign up 以及skip的priority也需要遵循用户画像，商业需求整个全局来考虑。

总体来说还是一个非常走心的作业，很棒！其实做临摹作业可以展现出很多思考的一些盲区，对于在学习ux的小伙伴来说是一个非常好的学习机会！加油！