前几天读了《用户体验要素》一书之后，最大的收获是初步了解了用户体验的五层架构。我想到可以利用这个思路，重新设计一下自己Axure设计练习“个人主页”。在原有模型的基础上，改动元素，使其能够更好的发挥它展示自身的功能。不过由于自身水平有限，对于UI、交互等方面认识水平有限，所以无法做出精美的作品。

这里简单讲述自己的思路。最终还是希望在产品设计上能学到更多东西，为自己应聘产品岗位增添一份信心。

产品：“个人主页”

战略层：

作为个人练习，在此产品中展示个人履历，个人能力和风采等，在求职的过程中作为展现个人学习能力的作品。

对于招聘方，可以预先了解求职者的学习、工作经历，生活态度等，可以作为检验求职者水平的一个参考方向。

范围层：

在原始版本中，我将这个练习作为一个简单的Axure软件学习作品，作为简历的补充来设计。

接下来的V2版本，我打算在原有的基础上进行补充和完善。分为：

个人信息：联系通信方式、社区账号地址等。

教育背景：就读院校、专业、在校表现情况。总之，将在校所做的事归类一起。

工作经历：包括自己的正式工作和兼职等。

个人能力：包括为面试产品岗位所学习的知识和技能、已经掌握的技能、擅长的技能。

个人作品：最主要的是展示在准备产品岗位面试的这个阶段里做了哪些功课。包括Axure的设计作品、竞品分析、读书笔记、需求文档撰写等。

兴趣爱好：主要集中于:爱好文字（伪文青）、摄影、各种二、三次元动画、电视剧等等。

结构层

在结构层中，要解决如何用何种形式来表现出需求和功能。交互设计如何做，才能使用户得到良好的体验。同时，需要符合用户的习惯，不要让用户花费太多心思考虑诸如“这个地方是不是可以再打开？”这样的问题。

由于个人主页主要记录的是自己的履历，所以在可扩展性和成长性方面并没有要求。在布局上，只要能将现有的模块装进去就行。同时分散的项目比较多，每个模块间并不是一个连贯的过程，也就是说用户不必拘泥于某一个流程来查看个人主页。

基于此想法，我想将个人主页做成卡片堆模式的交互设计。同时在菜单栏提供快捷的切换入口。使得整体不至于散乱无章。这个思路和原始版本一样。在范围层提到的几个方面都独立当成“卡片”抽换，清晰明了。对于包含内容不多的个人主页来说，是一种挺好的表现形式。

框架层

这里要先说一下分辨率的问题，这个问题确实比较难办。原先由于想要和手机一样做720*1280，结果做了外框之后发现在Axure里面设计非常麻烦。字体、图片、矩形框之类的都变得很被动。光是字体，就调整了很久。另外，在浏览器预览的时候，无法全部显示，需要调整网页缩放比才可见全貌。然后折中之后我把它调整到差不多330*650左右，在网页看起来比较舒服，而且制作起来还算可以。不过小屏也有劣势，例如图片小到一定程度就不清晰。颗粒感比较重。或许有其他种方法和硬性要求，这里我就没在深究。

在整体风格上，颜色用了蓝色。这个蓝色是直接抓取Axure页面某些图标的颜色的，因为觉得这个颜色很舒服。是蓝色里面加了点白色。关于配色，早期在大学里面制作ppt就醒悟过来，合适的颜色能够给人特定的情绪冲击。例如在做表现“团结”的团支部ppt时用了橙色。

同时用了扁平化的思维。在颜色上使用单色凭借，需要区分的地方稍微添加阴影或者灰度浅一些的线条。当然，这个只是我自己的想法，完全的业余水平，也只能叫做“伪扁平化”。

在页面设计上我对原始页面进行扩展。原来是大框嵌套小框，想要表现出“卡片”的质感，这样使得单页装载的内容偏少，视野也不够开阔。所以我索性将内页小框去掉，使得排版更加自由。

同时优化了页面设计，将每个模块的子标题移到状态栏，进一步强调卡片之间的联系。

在每个模块中，我尽力使其不需要跳转，主要还是觉得入口太深影响阅读。毕竟这只是一个个人主页，并不要求用户来熟悉整个页面的使用。力求第一次查看页面就能顺利阅读完想看的内容。所以我还是使用动态面板，将信息尽力归结在一个不跳转的页面里。比如在教育背景里，我设置了tab切换的表格形式：

内容不多，就不需要在特意做一个详细页来跳转了。

在导航设计上，使用了传统的左右切换加上菜单栏切换。主要是为了方便快捷用。这在原始版本中也提到了，V2版本并没有改动。

表现层

最后的表现层就是各个元素如何表现的问题了。由于并没有专业的学习过，我只是按照自己的想法做了一些比较统一的设计。

最主要的还是可触发的按钮、字体和图片的提示，然后就是引导用户触发效果了。

比如一张图片点击可以放大，这个需要提醒用户么？如果需要，该怎么提醒？

这个图标是有外链的，如果用户看了之后并无动于衷，该怎么办？

如果用户不知道可以左右滑动切换卡片，该怎么告诉他？

这些都需要我在细节处进行引导。最常用的就是鼠标移入变色了。这个再原始模型里讲过。但是，现在，还有个问题——假设用户用的是手机，那他并没有一个鼠标时刻贴在屏幕上啊，那么这个时候鼠标移入时候状态改变就没什么用了。那怎么办？

在这里我感觉可以从几个方面入手：

1. 参考其他app做法，做用户最惯用的设计。

2. 进行微小的视觉提示。比如用户没滑动的话，出现一个手指提示用户滑动。当然这有风险，如果用户正在专心看你的某些资料，结果出现某张图片，会分散用户的注意力。

3. 仿真和习惯操作。比如在一张图片下面设计个小小地叠层，用户就会感觉“这个图片是可以翻动的”。或者在图片的两侧加上两条图片截图竖线，就会给人一种“图片是以照片墙的形式贴着的，可以左右切换”。诸如此类的小引导都是可以的。

写在最后，这个个人主页的升级版其实相比原版并没有多出什么内容，甚至于整个页面也没有多大变化。但是这个是我重新思考后得到的结果。有时候想了非常久的东西，而改动出来的地方却只有不起眼的一两处。

不过这都是思想的结晶，值得我自己骄傲。另外，需要防范的一点是，在设计页面的时候，千万不要因为细节而忽略整体。这一方面我依然做得不好，容易陷入某个细节处而纠结不已，还内伤。

希望自己能够越来越收悉产品的设计和工具的使用。在成长的道路上由更多收获！

附上链接：个人主页V2版本