小和

我的博客: zhangqiang.cc | 微信公众号: zhangqiang_cc | 专注于美学和体验

Day229 - 百度优化建议

前几天我手机端的科学上网工具被关闭服务了,这几天工作忙,没空找新的工具。于是,就一直在用Safari上的“百度”搜索。

用了几天之后,就想写这个文章了。这个文章可分为三部分:

一、对Safari“百度”一处交互改进的肯定

二、对Safari“百度”的优化建议

三、对Safari“百度”的吐槽



一、对Safari“百度”一个交互改进的肯定

下图是旧版的百度搜索结果页:

(图片来自Google)

下图是新版的百度搜索结果页:



在旧版搜索结果页中,若是想看“图片”,则需要点击“更...

Day227 - “讯飞语记”建议

使用“讯飞语记”App已经半年多了,经常用来记一些突发的灵感,我非常喜欢这个App。

有时也当做备忘录,记突然想起的一件或几件事情。


如上图所示,这样会比我用手打字要方便很多。

在我想写文章时,我也会使用讯飞语记。

先用嘴说出来文章的思路,用讯飞记录下来,然后在电脑上统一进行整理。这样整体的效率会快很多。


但是,在长期的使用过程中,我发现“分行”很让人头疼。

当我用嘴说的时候,我就不想用手再点击分行。我总觉得我可以用嘴全程控制分行。

从逻辑上讲,长时间的停顿可以实现“下一行”操作。可讯飞的停顿只有“逗号”和“句号”的操作。


无法“分行”这让我的每一段文字都很...

Day214~219 - Focus

我想根据个人兴趣做一个App。但由于是第一次做,可能我做的不是很好,想的也不是很完善,欢迎大家多批评多提意见:)


我曾尝试过各种各样的时间管理和目标管理工具,比如:

奇妙清单、Todoist、今目标、Habitica、一周计划、Quest、时间块、高效todo、iHour、Any to do、目标大作战、Omnifocus、June、RescueTime、Forest、MinimaList、Any.DO、学霸拯救地球、aTimelogger.....


但总是坚持不下来,自我剖析是因为:

这些软件的确是很优秀的时间目标管理工具,但没有对我自身产生很强的内驱力,没有调起积极性。...

Day121~122 - Personal Center


今天的设计练习是学习了别人的设计,我很喜欢这位设计师大胆的把导航栏下面的那一条线去掉,从而让画面显得愈加的空灵优雅,具有呼吸感,不那么的紧张死板。


同时去除导航栏上的文字,去除了一个信息点,让人的注意力更加集中到具体内容上面来。这里顺便说明一下:导航栏上的文字是起到告诉用户“你现在在哪里”的作用,而对于用户已经非常熟悉的界面,我认为可以适当的省略。


字体均为Light(细体),1像素色值为#EEEEEE的分割线,包括底部的按钮,都是使用线性的按钮,这样“纤细”的元素能给人很轻盈很灵巧很优雅的感觉~


若是需要厚重感的产品,则可以使用加粗字体、粗线条、大色块。


若是需要亲和力的产品,则多使用圆形图标、圆形按钮、圆角图片。


若是需要力量感的产品,则多使用小于90度的尖角、图标要有棱有角、按钮都是用直角,小标签可以使用菱形。


Day115~119 - Booking

今天做了一个“预订”的练习,比较简单,所以不知道该讲些什么心得=,=


经常会有人问我该如何学习UI、学习交互、学习产品,有什么方法或路径?


我目前发现的最好的方法就是:每日练习!


想学习UI,那就每天设计一个UI界面;

想学习交互,那就每天研究一个交互形式;

想学习产品,那就每天研究一个App做产品分析。

当然也可以“双修”,甚至“三修”,这要看个人的能力和目标。

其实,我更建议专注于一个唯一的目标,持续的往此方向努力下去。


每天都不要间断,一日一练,可以简单,可以降低工作量,但重点是坚持~


引用钢琴家佛拉基米尔·霍洛...

Day114 - Airplane

(点击图片可看大图)



这是近期研究App学到了的一种产品结构,全部逻辑如下图所示:


1、适用于简单逻辑的电商类业务,只有少数几个品类,产品较少,不需要筛选的情况下


2、只提供简单的预订购买服务


3、点击右上角的LOGO点击进入“我的”界面,里面有订单信息


4、“搜索”作为一个全局功能,往往是首页“流量最大”的入口,是很有存在的必要的。

并且很需要强化,因为大多数用户都会使用搜索。

虽然我没有真实数据,但我预测京东、淘宝、天猫的App首页,搜索会是最大的流量入口。

因为搜索可以满足最大用户群体的需求,且可以直达用户想要的商品,这是最快的路径。


在传统电商里这...

Day113 - QR code

抱歉~  

今天水了一发...

晚上刚到东京,吃过饭回到酒店就11:45了,先用我之前的一些图补上今天的设计练习,明天再做新的设计:)


附加以往的一些思考:

在未来,WiFi会成为一种基础建设,全民全球都会被WiFi所覆盖(或取代WiFi的一项新技术。)

届时,WiFi将完全免费,从而保证更多人在线,同时还会有更快的网速。

到时候,盈利的方式将会产生变化。

比如:

1、由于WiFi的全面覆盖及免费,可提供一个供用户娱乐的应用,有足够的在线人数和在线时长,可靠广告收费。

2、由于WiFi的免费和提速,很多产品的服务方式将产生变化,会有更精美的图片...

Day112 - 真的App分析

一直在准备做这种对“整个App”的分析优化,可这种分析涉及到的内容很多。而我又是一个完美主义者,对于自己做的不够完美东西不愿意发布出来,结果导致这个练习一拖再拖,从三月拖到四月,再从四月拖到了五月。


如今,回头发现正是自己的拖延导致了我这段时间的进步速度缓慢,这是我无法忍受的。

以至于看了《一万小时天才理论》后,我决定不管自己是否已做到足够完美,都要尽快发布出来。继续做这种不完美的设计练习会最终让我能够做出更好的设计。


并且,我的重点是会越来越侧重于“体验”,侧重于对用户感知的体察,对用户心流的探索,因为这会对我一生想要做的事情有极大的帮助,我要从现在开始训练自己这方面的能力。...

Day111 - Standards

应朋友要求,帮他们的App整理一个文章详情页的规范:

1、字体统一使用“PingFang-SC”


2、大标题使用“Medium”格式,日期作者来源使用“Light”格式,内容使用“Regular”格式


3、大标题字号48pt,日期作者来源字号24pt,内容字号34pt


4、大标题色值:#000000,日期作者来源色值#9B9B9B,内容色值#4A4A4A


5、由于产品的业务性质导致,其内容都是严肃的、理论性的文字,所以统一使用一个色值一个字号一个字体。


6、段落与段落之间间隔“一行”的距离,图片与段落之间间隔相同的距离(60px)。


7、由于图片全部由...

Day110 - Collection

今天在做设计练习时的一些思考:

1、提供欣赏浏览需求的产品,一般会有“喜欢”,比如500px、Lofter、花瓣、Dribbble...


2、提供新闻资讯类的产品,一般会有“收藏”,比如:腾讯新闻、网易新闻...

(凡是能够提供有价值信息的产品,大多都有收藏)


3、提供观点供用户甄别评价的,一般会有“点赞”,比如:知乎、微博...


4、每一个产品,都应该从自身的业务内容出发来思考到底该采用“喜欢”、“收藏”还是“赞”。


5、“喜欢”和“收藏”的功用相似,但性质不同,往往只存在一个


对未来的一点畅想:

1、用户可以把所有的收藏都集合到一个地方,打破...

Day107~109 - Activist

由于明天要参加自学考试,现在要抓紧时间复习功课,所以今天就水了一贴。


(点击图片可看大图)


这个是有人请我帮忙做的,是我设计的作品,版权归我所有,我可以提供Sketch源文件,且以发布的时间为证。

我拥有处理自己设计作品的全部权利,以及可以允许谁使用,不允许谁使用的权利。


Day104 ~106 - Uber

优化对象:

Uber


遭遇问题:

每次使用Uber打车,在街边等车时,总是不知道那一辆车是我打的车。


我只能通过车牌号来判断,可来来往往这么多车,只看车牌号真心累...

尤其是车快到我面前时,我总是把自己周围的所有车的车牌号都看一遍,生怕错过了,每一次幻起又幻灭... 

这种体验真心糟糕...

(这个问题首先是我的朋友于宙跟我提出来的,在此表示感谢!)


思考过程:

在等车的时候,如何快速的辨别那一辆车是我打的,这是一个痛点。

目前已有的信息是车牌号(不方便远距离判断)、车型(比如凯美瑞、朗逸,可惜大多数用户对这都不懂,并且远距离不方便判断)...

Day103 - Gourmet

(点击图片可看大图)


凭个人喜好设计了一个界面,对我来说,做设计是一件很开心的事~


(只要没有别人在背后胡乱指指点点,先说了ABCD,然后又说了EFGH,最后却说那还是改回ABCD吧~  得了,去死吧,才没空陪你玩呢)


记录一下设计感想吧:

1、移动端的UI设计是一种基于场景的设计,任何的交互形式都是基于当前产品的用户实际使用场景。


2、没有“某一种交互形式”就是优于“另外一种交互形式”这种说法,只有在当前的产品中,在实际的用户使用场景下,哪一种交互形式“更适合”,这样才对。


3、用户不会像我们(App的开发者设计者)这样喜欢我们的App,用...

如何画优美精准的交互原型

(10秒看完这个文章)

画原型的要点:

1、尊重iOS设计规范

2、建立统一的设计标准

3、灰色块色值不超3种

4、图标要精妙灵巧,不要傻大蠢笨

5、保证文案的真实准确

6、一定要对齐!

7、使用Sketch设计原型


以下是正文:


最近我的一个好朋友跟我说,他画的原型不好看,让我帮他看看。

在指导了他之后,我想干脆写一个文章吧。

一是自己可以进行一下总结;二是下次谁再问我同样的问题,我就直接把文章发给他,省时省力效率最高。


经朋友允许后,使用他发我的交互原型为案例,原图如下:


按从上到下的顺序进行分析:


1、状态栏的高度是40px(在750...

Day102 - Pay

优化对象:支付宝iOS

用户场景:在公司楼下的小饭馆吃完饭,使用支付宝付款

遭遇问题:输入金额的交互非常的别扭,付完款后居然没有显示我付了多少钱。


昨天吃饭时付款时,看到了支付宝中的以下两个界面,体验很不好,所以进行了自己的优化,具体过程如下。


第一张界面:


问题如下:

1、这个界面是调起了数字键盘,那么输入框中应该有相应“光标”

2、不但没有默认光标,就连我点击输入框,也没有出现光标。导致输入时很不踏实。

3、¥ 单位应该在数额的前面

4、确认支付的样式需要进行了统一风格的调整。


优化后如下:


第二张界面...


Day101 - Food



今天因个人兴趣而做了一个概念版的UI设计,此类设计在从美学上较为好看,但不适用于大众类型的App(大众类产品的UI适合多入口多信息展示)。此类设计较适合文艺气质的小众人群,因为只有与他们气质相符的App他们才会喜欢。



另外,谢谢豆爸的建议,经过我反复的考虑,决定从明天开始“每日”练习改为“每周”练习,原因如下:

1、我进行设计练习的最终目的是为了提升我的专业水平,形式根本不重要。


2、每天上传一个设计练习会由于时间限制,思考得不够深入,只能做到我在24小时之内发挥出来的水平,而不是我的最高水平。但对我专业水平提升帮助最大的是一次次发挥出我的最高水平,若改为每周练习会让我有充足的时间钻研以最终发挥出最高水平。


3、每日练习限制了我只能进行比较局部、细节的训练,无法进行更加宏观,更加框架结构的训练,而我需要更高维度的训练。


4、对于体验的分析:

需要搜集大量案例进行横向对比分析,这需要时间;

需要思考实际情况进行设计,这也需要时间;

提出方案后,需要反向推到反驳自己,这也需要时间;

把自己的方案转化为最方便读者理解的形式表达出来,这也需要时间。

所以,我需要充裕的时间才能做好这些。


5、凡品只是在浪费我的时间,为精品付出再多都值得。

我想多做精品,我想让我花费时间和精力做的每一次设计练习,都可以是一个优秀的作品。


6、一开始没有人知道路该怎么走,我只能先勇敢的踏出第一步。当我走了100步时,我看到了自己的收获。同时也看到了:为了取得更大的成绩,我需要做出一些转变~               


Day100 - Today's Specials





今天是第100天,对我而言,是一个值得纪念的日子!

首先感谢一直以来支持我鼓励我的朋友们:谢谢于宙、启菡、徐进、砖总、明哥、马佳、董宁,谢谢大家!



然后,对这100天进行一下反思:

1、由于我是针对于线上App进行的优化,并且保证我的优化方案可立刻上线,于是就使用了App本身的设计规范,导致我在视觉上的修改较少,因此给人以我的视觉设计方面没有创新的感觉。

这其实很无奈,我唯有像今天这样,设计一个全新的UI界面,才能比较好的展示我的视觉方面的功力。

所以,今后我会穿插设计一些全新的界面以展示我视觉设计的功底。


2、当我不做每日练习时,我的一天是这样的:

吃饭、睡觉、看美剧、刷知乎、看Dribbble、看微信读书、陪朋友聊天...... 不知不觉中一天过去了。

当我开始做每日练习时,我的一天是这样的:

吃饭时拿起手机研究UI与体验、睡觉时想着今天的每日练习应该这么做那么做、看美剧时会想先把今天的练习做了吧,不然看着美剧都不踏实、刷知乎时会想和UI体验无关的内容都不要浪费时间了、看Dribbble时会想能否给我的每日练习一点灵感......

同样是一天一天的过,一旦开始做了每日练习,就会让我的注意力集中到我的核心事业上,每一天的练习都不会浪费,都会对我今后要做的事情产生积累。


3、发现自己最早的每日练习水平,无论是UI、体验、逻辑上都存在很多漏洞,然后再联想到,等我做到第200天时,就会发现我今天做的练习存在的很多漏洞。

所以,想对看我每日练习的你说一声抱歉,我真的很想提供最优秀的设计作品供你参考学习。可是人的水平都是一点一滴进步的,目前的我也只是正处于正在学习进阶的阶段。



最后,进行深入的思考与总结:

经过这100天的练习,我确信专注于“美学”和“体验”是我正确的方向~!

我从小就对画面、图像更为偏好,画面好不好看是我选择一个文具、一部动画、一款游戏的最重要标准;

性格中感性多于理性;

极其丰富的想象力,可从表象联想到第7层和第8层;

能够感知对方的感受(较适合做交互,研究用户心理历程);

正直、厚道、实诚,无法为处理感情问题而采取迂回的策略;

喜欢安静独处,若处理不好则会给人以孤傲冷漠感;

执行力强,但容易自己给自己制定超乎现阶段能力的目标;


因此,我想得很清楚了:我这20多年来养成的性格不适合做沟通、协调、管理型的工作,我做不了一个八面玲珑的产品经理,也做不了一个协调管理型的CEO。

但我可以做我喜欢且适合的事情,那便是走专家型设计师的道路。专注于“美学”和“体验”,现阶段做UI/UX设计师,主要从事终端用户界面的设计(我可以每天长达4小时的投入)。

这是我连接未来的方式,也是我认为无比正确且具有非凡意义的事情~!


Day098 - Shopping cart





优化对象:

京东iOS


用户场景:

今天京东图书有满150减50的优惠,所以打算去买一些书看。在选书的过程中,我遇到了一些困扰,比如:

1、第一眼看这本书时,我觉得不错,是我需要的。于是我就放进购物车里了,然后我继续看着,结果在评论里看到了一个写得很认真的差评,说这本书的内容质量不高,只适合初学者。我心想,那算了吧,这本书对我没价值,于是我就想把这本书从购物车中删掉。

而我需要点击购物车,进入购物车列表,找到这本书,向左滑动,才能把它删掉。

这个过程是比较繁琐,且打断了我原本浏览书籍的节奏。


2、我在买两本同样是版式的书籍时,会进行大量的对比,看两本书的目录内容,看看哪一个本讲的更好,往往是在看的过程中,发现了其中一本书不够好,可还是必须要到购物车界面才能删掉。




思考过程:

看到一个东西不错,于是就立刻放入购物车,可一会又发现这个东西不够好,想从购物车中移去。那么能不能在当前界面,可以直接移去,省去我来回切换的麻烦。



解决方案:

从手机QQ消息红点的交互中得到的灵感,当用户拖动购物车中的红点时,会拖出当前的商品,松手后,当前商品被移去。


为了指示用户,当前商品已被添加进购物车,所以:

若当前商品未添加进购物车,那么购物车的红点提示是白底红字。

而当前商品已添加进购物车,那么购物车的红点提示是红底白字。


目前这个交互只是我的一个设想,可能不够成熟。只是我觉得移动端产品随着用户使用得越来越深度,应该会产生这样的一些新的交互形式。





Day097 - Logistics



优化对象:

天猫iOS


用户场景:

在天猫上给家人买了一些东西,闲暇时我打开天猫App,查看物流到那个地方了。然后我发现天猫的物流界面让人无法忍受,如下图所示:


我可以看到最新的物流信息,但是我很好奇有些地方为什么这么慢时,想看上一站的时间时,就觉得好奇怪,很混乱,很不适应。


思考过程:

这是因为天猫的物流信息是“倒序”,最新的物流信息在最上面,最旧的信息在最下面,这与人类一贯的阅读顺序(从上到下)是相反的。所以我才会觉得很混乱,很不适应。

我认为若改为“正序”就好了,最旧的物流信息在上面,最新的物流信息在最下面。


但这样真的好吗?

分析一下当前线上界面的优点吧。

目前天猫物流信息界面的优点:

1、顶部的物流状态很明显,立刻可以得到最重要的信息

2、当前物流信息比较靠前(浅绿色字),用户一眼就可以得到最新物流信息


在分析2时,我发现这个界面的痛点就是“当前物流信息”,用户在等待快递时,最渴望看到的信息就是当前物流信息,而对于旧的物流信息,并不关注,因为已经不重要了。


也就是说,若按照我之前的设想,其实并不符合当前界面需要解决的痛点。

这时,我才理解了这个界面为什么是现在这个样子。


然后,我认为此界面的信息展示还有可优化的地方,于是对所有信息进行了重新组织和整理。提炼出最关键的信息点,进行突出,方便用户获取最重要的信息。


解决方案:

如每日练习所示,提炼出“物流状态”、“关键性时间”。方便用户快速的获取最关注的信息点。



Day096 - Evaluation





优化对象:

京东


用户场景:

在京东上买了一个牙刷,很满意。于是来京东评价(动机是为了领京豆),可是发现京东的体验做的非常糟糕。如下图所示:

打开这个界面后,我当时是想尽快完成评价好拿京豆,于是就什么也没看,就赶紧点了“提交,可是提示我必须要评价。。。

于是我去评价,点击输入了“很好”(我不想浪费时间打太多的字),却发现“提交”按钮被键盘挡住了,我需要收起键盘,才可以点击提交。


思考过程:

根据用户场景中的问题进行分析,用户在当前界面,是想尽快完成评价,不在此多逗留,于是就没有心思仔细看内容。(此时输入框中密密麻麻的小字是没人看的)

若是必须要输入评价,那么可以把光标放到评价输入框,调起键盘,让用户到这个界面就可以直接输入。

这算是一个方案,但用户想的是尽快完成评价,此方案只是优化,但却未解决用户的痛点。并且默认展开键盘,会挡住“提交”按钮。



优化方案:

既然用户的痛点尽快完成评价,那么我们可以满足他,如我今天的每日练习所示,设计几个小标签,用户点击标签,即可点击提交完成评价。

且把“提交”按钮上移,不被键盘挡住。


遗留问题:

此方案是解决了用户的问题,但带来的遗留问题是大量用户选择相同的标签,导致评价质量降低。

这就丧失了评价体系原本起到的作用。这个交互优化不但起不到作用,而且起到了负作用。


遗留问题优化:

把输入框中的文案该为“大于100字的优质评价可得双倍京豆”

这样设计的原因是:用户的需求是多种多样的,不愿意评价的用户根本就不打开这个界面;愿意评价但却很着急的用户可以使用标签来快速完成评价;而愿意评价同时不着急的用户可以手动输入评价内容,然后得到双倍的京豆;对京豆很在意的用户,在这里就会认真的评价了,他们的评价会对新用户的购买产生影响。