今天来跟大家分享一个个人信息选择页！

最开始设计师交上来的版本：

比较普通，这个页面还是有很多值得优化的地方，可以让它更加丰富。这是修改后的

这中间都做了哪些思考和修改呢，就来分享我的修改思路。
 
01 原设计信息引导不清晰 同样都是新人信息填写页页，我去看了一些其他 app 是怎么做的，发现他们都有一个共通点———都拥有强引导性的文字！

所以我们不妨也在页面头部加这样一行文字

是不是看着就清晰很多，同理，当我们在做其他页面时也可以反思，这样做能否让用户看得懂。 

02 修改反人类的交互操作大家看这部分的东西：

它想让用户选择性别、年龄、常住地，这种交互方式其实是不太合理的，因为选项之间的互斥性很强、非此即彼。性别只有一种，年龄只有一个，常住地也只有一个。但现在做出来的却是多选的标签，意味着一个人他可以既选男又选女；既选择是 80 后，又可选择为 90 后。之间就很矛盾。所以最终改成了下拉框单项选择，就合理很多。

03 文字宽度和它底板的宽度

大家看这张图：

当文字一长，这个文字就会撑满甚至超出底板

考虑到这种情况，我们有两种解决方式
1. 开发根据文字长度做自适应，只需要保证文字距离底板左右两端的间距一直不变

运用到此方式的设计：


2. 知道文字最多和最少的字数是多少，定死一个标签宽度。
但是要确保这个宽度无论放比较多的字还是比较少的字，都是合适的。比如说这个设计

我们选择合适的方式运用在设计上即可！这样页面框架就重构完成了！下面可以进行视觉设计。

 

视觉较于原版要做的更丰富在用户填写完所有信息后，他在个人主页看到的信息是这样呈现的

是借助了「身份卡、身份证」的概念做的设计样式。
新人引导页也可以用到类似的设计样式。


标题的地方还是有些空，我们再加一行小字丰富设计层次，就会精致一些：

为丰富画面，再来点缀元素

整个页面就处理的差不多啦
交稿！过稿！ 

总结应该带着思考做设计，在拿到一张原型图后，一定要知道这张页面想要达成的目的，通过设计去实现这个目的，会让我们的设计更有价值。

 

声明：* 本站所提供的资源均来源于互联网，站内所有文字、图片内容由网站会员上传而来，UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷，本站不负任何责任。如果有侵犯到您的权益，请联系本站删除，谢谢合作！联系邮箱：Uishe#qq.com (请将[#]换成@)