用面向对象思想做设计

最近读了两本设计大拿的书籍（Design Methods 101 & Microinteraction），结合书中的思想，突有感而发，遂书此文。

本文讨论的对象是对于数字产品的交互设计，主要是界面元素和交互内容。

对象##

对象我假象是设计的对象，可以是一整个产品，也可以产品的某一个功能，或者是承载功能的某一个页面。
从大至小，from high level to low level, 都可以尝试用这个思想去解构。

属性##

对象的静态特征。如果以一个产品来考虑，即这个产品的功能是哪些。细化到界面，则是界面的元素是哪些。再细化界面的元素，元素的构成有哪些，比如边框，文字，背景，阴影等。

方法##

对象的动态行为。产品层面，功能的触发器是什么，功能以何种规则运行，功能运行时的反馈是什么（运行前，运行时，运行结束），功能是否有多状态和循环。

联系##

对于数字产品，功能的触发器是具体到某一元素上的，所以便在属性和方法间搭了一座桥。通过方法操作对象的属性来反应当前对象的状态，进而给用户反馈，达到良好的用户体验。

实例分析##

结合 DailyUI::006 的主题 User Profile 我举例说明这个思考模式。

就以微信此类的社交产品作为例子，限定设计产品的类别好针对具体问题进行思考。

穷举你认为需要的页面属性：昵称，性别，头像，简介，地区。其他属性可针对具体产品进行添加，这里 keep it simple。

思考属性的方法

昵称：修改昵称
性别：选择性别
头像：上传头像
简介：修改简介
地区：选择地区

确定方法的基本规则

昵称：通过输入框输入
性别：通过选择框选择
头像：通过上传获得
简介：通过输入框输入
地区：通过选择框选择

细化方法的规则[包括触发，限制，反馈、模式、循环]，这是出现创新想法和保证逻辑严谨的关键环节

昵称：
前置状态
如何可以通过通讯录或者关联帐号读取用户姓名的化，把其设置成默认昵称。无法读取则通过后台代码生成一个随机具有当地意义的昵称。
中置状态
需要有光标提示，同时键盘根据默认键盘显示，外加显示删除全部图标。保存后修改有效。如果字数超过一定长度自动不让用户输入。如果含有特殊字符，保存时提醒用户含有非法字符，请重新编辑再确认。
后置状态
当有修改发生时，保存标签变成激活状态。保存后退出到上级界面。如果用户停留该界面达到10分钟未点击保存，自动帮用户保存一下。

Logic 1

性别：
前置状态
默认值为空，可以获取准确性别时显示。
中置状态
单选男或女，某些国家可添加其他取向或保密。
后置状态
选择后回到上级界面。

Logic 2

头像：
前置状态
默认值为系统默认无性别头像，如果性别确定了后，改变成对应性别默认头像。需要有图标提示用户如何操作。
中置状态
空状态时：可以拍照，上传头像。
非空状态时：还可以下载头像到本地。
后置状态
上传完成后，显示新头像预览，用户手动回到上一级。

Logic 3

简介：
前置状态
默认值可以提示，你是谁类似信息。
中置状态
同昵称，区别是实时显示剩余可输入字数。
后置状态
保存后回到上级界面。

同 Logic 1

地区：
对前置状态
在可以读取地理位置情况下，设置其为默认值。读取不了默认值为空，趣味性高的APP可以提示你是来自外空之类。
中置状态
单选国家，之后省，最小单位到市。
后置状态
选择后回到上级界面。

同 Logic 2

对象可视化

打算使用工具 Sketch

假使平台为 iPhone7, 对 Profile 界面上的每个控件再采取面对对象思想进行思考，正好 Sketch 提供了组件功能，复用性大大提升。

昵称：Title, Input, Default value, Delete button, Hover cursor, Keyboard
性别：Title, Default value, Single selection
头像：Title, Image, Operation icon
简介：Title, Default value, Delete button, Remaining number note
地区：Title, Single selection

现在可以将单个控件提出进行设计：

Tilte
Input
Filed value
Default value
Delete button
Hover cursor
Keyboard
Operation icon -> to be general -> Icon
Remaining number note -> to be general -> Note
Single selection

当然也可以将单个控件组合形成组件，进一步提升复用性，在这里不做复杂分析。

每一个控件又可以当做一个对象，分析其属性和方法。属性需要兼顾美观和交互，方法需要关联属性的改变从而给用户反馈。

属性如下：重复属性不再列举

Tilte：字体，字号，颜色，内外阴影，背景色，字间距，透明度，其他装饰
Input：边框颜色，边框粗细，边框样式，背景色，内外阴影
Default value：字体，字号
Delete button：图标
Hover cursor：颜色
Keyboard：按钮（再细分），背景色，内外阴影
Icon：线条粗细，线条颜色，有无填充色，是否圆角
Field value: 字体，字号
Note：字体，字号，颜色
Single selection：图标

按顺序依次排列

UI设计环节是另外一个创意出现的地方，你可以做无数种尝试，是个反复迭代的过程

现在需要考虑方法对属性的改变，同时完善所有辅助元素

昵称：提示信息
头像：默认头像，操作图标
简介：动态改变剩余字数
地区：右向二级箭头

初步终稿：

动效##

个人看法是能不用动画尽量别使用。这里如果为了刻意提升趣味性，触发器为单击事件，但是给所有触发都添加个翻转动画效果。

优点##

用面向对象思想做设计的优点我觉得有主要2点：

一是用这种类似编程思想思考设计问题可以很好的培养自己的逻辑能力，易于发现 edge cases 和创新想法。
二是可复用性，当一个元素的属性和方法不断被穷举后，下次碰到相同的情况，便可以重新使用上次设计过的内容，适当改动和创新即可。

饭点到了，日后还会补充对动效交互的探索。