用面向对象思想做设计

最近读了两本设计大拿的书籍(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设计环节是另外一个创意出现的地方,你可以做无数种尝试,是个反复迭代的过程

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

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

初步终稿:

UI

动效##

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

优点##

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,097评论 18 139
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,495评论 6 13
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 13,334评论 0 15
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,561评论 25 707
  • “多情只有春庭月,犹为离人照落花”。五月的时光是火热的,每个人都显得那么忙碌。步入五月,一切都忙的那么有序。 五月...
    卟再壤倪沩莴芯疼阅读 244评论 0 2