设计下笔前的思考之改版笔记


设计过程中,不要一拿到任务,就开始糊糊涂涂的打开PS,C+N新建文档,最终有可能你做的东西更不是产品经理想要的,也许是无止境的改改改,知道身心疲惫,无力吐槽,那么现在我就要和大家分享设计前的思考:

a;产品的用户是谁?

首先要了解你的用户,是谁在使用?他们的年龄,性别,职业,只有了解具体的用户信息之后才能对之后的设计风格定义等等做出有效的判断。

b,使用场景在哪里?

使用场景,使用场景,这些在做原型交互期间,产品一直强调和要思考的问题,用户是移动的例如地铁,公交,还是夜晚夜深人静的时候,都决定了我们做出什么样的设计,地铁公交,那么需要考虑到单手操作,屏幕的最佳点击范围;夜晚的场景那么就需要考虑增加夜晚阅读模式,甚至光线的自动调节明暗的设计;甚至贴心的设计提醒,夜间不适合就看,保护眼镜好好休息吧,晚安。这种情感化的设计,不仅仅让用户惊讶感动,更利于产品的传播,这么好用懂我的产品,我有什么理由不分享不喜爱呢?

c,解决什么问题?

说简单点就是产品的目标是什么?例如网易考拉,进口好货当地价;彩贝壳,周末溜娃神器等等,只有了解到产品的目标是什么,你才能去思考什么样的方法才能真正的帮助用户解决问题,当你能帮助用户解决问题,用户才会依赖于你,反之,将被更好的能解决问题的产品所替代。

项目背景

1.产品目标

智习客是一款让老师和学生课中课后互动,帮助学生学习辅导的在线教育平台。

2.用户群体

老师,学生,学校管理员

3.使用场景

课堂,家里

现状分析

1.颜色

主色调过于深沉,过于单一,不够活泼,主色过重,压抑界面呼吸感不够;



2.文字

分组文字层级不够突出,分割线过多,页面割裂感过强,整体性不够,视觉体验过杂。


3.布局

功能布局不够清晰,重点入口层级过深,用户需要多步操作甚至找不到入口;


设计提案

1.重新定义色彩

色彩在视觉中起着至关重要的作用,色彩是一种情感的传达,色彩不仅可以区分内容的主次,同时能渲染产品使用氛围,情感化的传达,同时强化品牌的认知;

由于产品为学校教育产品,项目初期,定义深蓝色为主色。

考虑到实际使用场景中80%用户是学生,20%是老师,而原主色调过于深沉稳重(左),市场用户调研分析过程中,学生大部分反映产品风格老气,色彩压抑沉重,所以我们在原有品牌蓝的基础上进行了明度的加法,得出了互联网教育蓝的主色(右):


2.层级结构调整

对功能结构合理的划分,功能层级的优化,调整入口,降低学习成本,让用户能够准确快速的操作;好的交互需要知道用户想要找到什么,坏的交互就是用户想要A,你却给了B,或者用户想要A,你却让你通过C来找B,再通过B来找到A,这就是所谓的交互体验的重要性,不要将想要进门的用户关在门外。


3.界面设计

再明确现有存在的设计问题后,最终决定使用微渐变的手法来重新表达设计,通过视觉的重新定义表达从之前的呆板沉稳到活泼年轻的方向调整,而恰好微渐变不仅是视觉上轻便,没有压迫感,同时又不失活泼的元素氛围。同时在设计过程中需要考虑以下3点建议:

a, 依照原型文档,找到每个界面需要表达的重点,内容的优先级,通过色彩,字体及留白,动态等设计手段强调核心功能;

b, 遵循设计规范,整体界面在色彩,图标,样式上尽量保持一致,让用户沉浸式的体验而不是突然冒出一个隔壁老王的儿子;

c,  设计因人而异的美,不是所有美的设计都适合你的用户,任何项目下笔之前,首先都要思考:我的用户是谁?我的用户是什么样的人群?他们想通过产品解决什么样的问题?在界面设计上,始终保持功能第一,内容第一的态度,视觉是服务于内容本身,切记避免过于强调视觉表现力。


4.开发

大部分设计人员在设计稿输出后都避免不了和开发的扯皮,建议大家在设计之前开始沟通,毕竟每个开发的开发习惯不同,撸码能力有高低,所以,需要和开发人员一起制定一套切图规范,标注命名规范。

a,标注

设计稿以iPhone6(750*1334)为准进行标注。使用PXCOOK软件在线进行标注,开发人员只需要打开软件即可共享标注界面。

b,命名

为了便于后期版本迭代的时图标的替换,经过跟android及ios开发团队的沟通,举例参考以下命名规范:

例如:btn_yes_nor

          btn_yes_press

          btn_yes_sele

          btn_yes_hover


c,界面走查

开发过程中难免遇到最终实现的界面效果与设计稿不符,这种时候,界面需要一一走查,当然如果效果差太多的话,开发下个月绩效maybe为D啦,(捂嘴.GIF)言归正传,设计要和开发一起讨论,界面实现的难点再哪里,如何才可以保持最大的还原度,设计需要配合哪些修改的工作,当然,团队就是齐心合力将产品越做越好,所以,不要害怕犯错,多问多交流,开发哥哥其实没有那么冷酷无情屌炸天。

以上为我工作过程中的思考笔记,欢迎大家讨论共同进步,谢谢。

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