Interaction Analysis - 1.3

Settings页面交互设计简析

http://www.jianshu.com/settings

闲话少说，今天就让我们一起来看一下的设置页面的交互是用怎样的方式来呈现的。

页面中，左侧是非常简单的小Icon，从上至下，分别代表着几块重要的功能（首页、专题、动态、写文章），至于为什么拎出这几个来，相信一定是在做了大量的用户调研基础之上得出的结论，不在多而在于精。下面的就分别是跟个人相关的一些操作设置等。左侧大面积的留白想必一定是留给最核心的部分，也就是我们看到的设置页：

Setting-basic

分为了基础设置、个人资料、社交账号、密码修改、其他、黑名单，账号管理七个大的模块，现在就让我们来逐个拆解吧！

基础页：昵称的可修改和邮箱的不可修改强调了在的个性名称和规范的邮箱使用（避免滥用邮箱等情况）且需要验证。可用Markdown编辑器是一大亮点，本人正在采用的是富文本模式，但在图片的嵌入和排版上感觉不是太好，想必是和编辑器的选择有关？因为对程序的不熟悉造成了在这一点上无法尝试Markdown模式下噼里啪啦的键盘敲击快感了...扯回来，用Markdown编写肯定相当有趣。在往下是首页标签顺序的排列，充分的强调了用户在自主选择上的自由性（这里的设置更改影响到首页上标题栏里的分类显示调整，值得一提的是，直接在标题栏通过设置一样可以移动其模块达到排列先后顺序的问题，这点的交互上做的还是相当的周全）详见下图：

标签顺序的自由拖拽排序功能

标题栏的设置状态中同样可以移动模块来进行调整

然后就是语言切换的设置，看了下其英文翻译水准还是相当之高的，应为人工翻译后对应到中文，保存之后立即就刷新了页面上的文字。

个人资料页：在个人资料页的交互上倒没有太多的亮眼之处，最为重点的应该是微信二维码的上传这个功能了（楼主大概尝试了下，可以传jpg、png图片格式的文件，容量大小期待尝试！）在更换头像的展示上采用了时下比较流行的圆形头像，而不是传统老旧的正方形，楼主认为：圆形从结构上而言没有棱角不突兀，显得有亲和力，这比较符合亲切感强的交互界面（看看现在新版微博的头像界面便知），而反观正方形，则是严肃、规矩、工整的代表（诸如很多会议网站、Linkedin）。

看到彩蛋了吗

社交账号页：这是跳转链接绑定到对应网站的功能，故不做特别介绍就直接跳过了。

修改密码页：中规中矩的设置密码的方式，但是我要说：保存按钮在这里似乎有点略显多余了吧！（既然点击毫无反应却还要放在这里）

其他业：这是一个以Option为主的表单页面，可以设置我们的通知订阅设置等跟阅读关联的开关。但是楼主在这里还是对其中一点产生了疑惑，让我们来看下：

评论独为按钮方式

产品区分了评论管理和新文章的评论设置，同为对评论的管理设置，却采用两种不同的方法来实现，确实让我产生了一个很大的困惑，是否是因为一个是针对所有一个是针对新发表的文章？（没有勇气面对过去！？ — |—）。下载文章，这个功能还是很贴心的，可以永久的下载回来保存在自己的电脑上（下载回来的是所有文章的压缩包，里面的文章以网页的形式保存）。

黑名单页和删除账号页面同是一种很决绝的操作，故没有太多的交互动作，只有想清楚了才是最重要的！

一番体验下来，楼主觉得产品在 ”保存“ 按钮的逻辑上似乎不是那么的流畅，默认跳转退出当前页面既不保存，撰写文章还好（几乎是实时保存状态），在设置页面中却不会保留所编辑的字段，难道是因为字段的内容太少？反而要单独点击保存按钮才会更新操作。当然，我觉得产品本身这样做的出发点是因为设置保存是对产品本身的控制，而文章却只针对所编辑的文章来做操作，两者面相的对象不一样，所以用到的处理方法自然有所区别了。

研究交互，自然不是我这般夸夸其谈，还需要沉下心来，感同身受的作为使用者来体验产品，提高同理心，多看好的交互模式，接下来转化为好的设计自然是事半功倍之举。

交互之路，其修远兮。