我的工作:交互设计师 /UE/产品设计师
为什么写这个:因为经常在此站看到你们请不起设计师时做的应用,希望掌握了下面的原则,可以帮到你
其他:我就想到哪写到哪,因为我要从这么多经验理论去提取概要,给你们最关键的东西
动效只是交互的很小一部分,但是经常有人把他们划等号。交互设计包含:业务逻辑、信息结构、操作流程、页面布局等。每一项里面又包含更多交叉理论,下面会提一些关键点。
正如你所理解的字面意思。用户从接触你的服务-接受服务-离开服务 过程的体验感受。它可以反映在一条情绪曲线上,爽点痒点痛点。如果你能将用户情绪保持在较高的水平,那就是好的用户体验。
纯个人观点,就三点: ·简洁的 ·精致的 ·跟我交互稿没分歧的
下面就不区分交互和 UI 了,尽量找例子说明。
避免“产品设计图”这种全局思维。按用户故事划分,逐渐梳理各流程。
包括:设立用户目标、完整使用路径、引导用户行为、给予用户能力、结果和反馈等。 ( 能理解,不细讲
这个好懂,每个(二级)页面只有一个主要任务(主要按钮)其他都应该弱化。
有个问卷调查小程序那个帖子问题严重。
·比如说“启动页”、“广告页”、等。(还有问卷调查那个小程序打开的第一个界面,点击后才进入首页),(契合 Human interface guideline )。这些既提升体验,也有助于转化。
·能不用弹窗就不用弹窗,减少阻断用户行为。容错机制也不一定用弹窗,比如 apple 用的垃圾桶、左滑删除的二次确认等,既提升效率,又容错。
ps:这里疯狂 diss 麦当劳小程序
·例如,左上角返回的习惯、iOS 右滑返回的习惯、按钮 左否定 右肯定 的习惯、等。
·例如,点击返回,预期是按页面堆叠顺序从右侧划出;例如,麦当劳小程序选择套餐内容后,预期是直接返回 or 确认按钮,然而都不是。
·反馈和提示就很好理解,不细说
·最好看、最耐看的颜色:黑、白。
·app 上避免使用的颜色:中性灰(大面积)、中低饱和度的颜色。正绿、正黄、紫色慎用。
·好的颜色:较高饱和度、90%以上亮度。
·配色:互补色(色相相对,红-蓝 /橙-蓝)、近似色(红-橙 / 蓝-青)两种,这里红不特指 0°的正红,其他也一样。要保持较高的饱和度。
·除图片外,移动端 APP 界面应以黑白为主,主色面积 20%以内,辅色 5%左右,慎用大面积色块。否则界面杂乱无重点。
·现在渐变用得少了,最后会发现,还是简单的东西好看( ps:手机也是一样)
·不要描边。按钮、标签除外。
·线 越少越好。如果你非常想用,那么:border:0.5pt 、#EEEEEE。越细越好、越淡越好。
·禁止绝对直角。喜欢尖一点的,那 radius:4pt。圆润一点的,border 8、12、16、24pt。
·对齐。文字排版、元素较少时,左对齐不会错。按钮居中 or 靠右。
·投影。直接给经验值,白色块投影 #000 0.1 blur:16pt,spread:-8pt ( blur 值的一半),垂直偏移自己调整。有色色块:投影颜色=色块颜色,alpha:100%,其他同前。
·避免:既有圆角又有直角,通栏跟卡片结合。
·重复元素(比如 list )中按钮应该弱化,减小大小 or 描边按钮。
·不要色块套色块,禁止套娃。
·一定要有对比。字重、字号、颜色。不要怕太夸张。
·字号不能太多。除标题和注释标签外,最多 2 个字号,一共四个。建议 18、14、12、10pt。
·同一行文字靠近时,不要字号对比。
·大段文字避免中性灰,建议:#434343 #9999 #CCC。
·文字与背景颜色一定要有边距。
·不要用细体。
·大段文字要调整行间距。1.2~1.5 倍。
·文字与背景要有足够对比。
·页面乱不乱,就看格式塔法则:相似、接近、连续、闭合、简单,不展开说,可自行百度。
·页面顶部、底部的 icon 可以稍粗,描边 1.5pt 、2pt,其他 icon 尽量保持跟文本一样粗细( 1pt )。
看情况再补充
1
crazytree OP 两个图床都没打开,所以就没图了
|
2
henryhu 2019-11-29 22:42:01 +08:00
赶紧打开自己的小程序,对照检查
|
3
TSai2019 2019-11-30 10:26:50 +08:00 via Android
很有帮助
|
4
noreplay 2019-11-30 10:29:05 +08:00 via Android
老哥讲信誉,说发就发了
|
6
ch3nOr 2019-11-30 18:01:40 +08:00
感谢已发送,希望楼主能讲多点
|
8
jin1010v3ex 2019-11-30 18:37:28 +08:00 via Android
老哥讲信用,说发就发,内容也很好
|
9
roujiang 2019-11-30 19:15:28 +08:00
@crazytree 图片上传这里就可以引用啦~ https://sm.ms/
|
12
ydatong 2019-12-01 08:20:24 +08:00 via iPhone
学习了!
|
13
bshu 2019-12-01 19:25:09 +08:00 via Android
@crazytree 受教,能帮我这个指点一二吗? www.pplink.link
|
14
crazytree OP @bshu #13 建议上面的珊瑚红撑满真个屏幕,采用左右结构,左边是说明图,右边是链接和文件传输框,字用白色,字号可以大一点,文件传输框可以简洁一点,用跟背景相近的颜色,不用虚线描边。
这是个好产品! |
15
bshu 2019-12-02 10:07:43 +08:00 via Android
多谢回复,你建议的是 pc 上的布局对吧?我之前考虑过,感觉有点难度,当没有和其他设备建立连接时,这样没问题,一旦建立了连接,和对端的交互界面应该出现,并作为页面主体,布局变了就比较尴尬。而且那个虚线框下方需要放在不确定数目的待传文件,放右边,很可能出现左右不平衡的情况。其他是很好建议,我会参考调整一下。再次谢谢你
|
16
crazytree OP @bshu #15 看了一下这个建立连接过后的样子。此时说明图片已经失去意义,用户接下来的操作是希望传输文件,所以可以考虑全屏。另外 四字段的号码是什么意义?是唯一识别号吗?那既然有号码,为什么没有输入框可以输入对方的号码建立连接?可以建立多人连接吗?如果不能,为什么连接后还有左边那一块的左中右结构?试了一下其实是可以多人连接的,这个功能其实可以突出介绍一下。发送文本消息需要那么大的区域吗?有文件过后,对话框会被挤开,这不太符合预期,或者说干扰了我的认知。好像只能关闭网页才能断开?然后页面排版不是很好。虽然功能简单,但是场景还是挺复杂的,建议从用户视角去梳理一下,哪些东西在当前是不必要的。
|
17
bshu 2019-12-02 10:47:28 +08:00
对,你提到的问题,确实是我设计上的不完善,因为很多功能上已经考虑了或者已经实现了,但是没有很好的传达给作为用户的你。
1、尝试过建立连接后,直接隐藏上面的宣传语,但是使用过程中,用户自己把文件加入待传列表后,把直连网址发给了待接受者,待接受者打开网址就是建立连接的过程,然后进入连接后的页面,那么他就无法再看到宣传语,也不知道这个网站是干嘛的,所以暂时保留了。 2、四字段是用户自己的名称,支持修改和自定义,这样对方容易识别(此功能现在有 bug,稍后会更新修复的版本)。这个让你误解那肯定我设计有问题,没有提示信息,只是图简洁了。 3、同一个页面支持多人接入,但是不太想突出,更希望打开不同的 tab,不同用户用不同 tab,这样可能更容易区分。 4、发送文本框大这个是故意的,这个功能主要用于手机 /电脑直接文字内容的相互 copy,主要不是为了聊天用户的。 5、有文件时,对话框被挤压这个,我实在没啥好想法,因为这个网站最核心的是远程文件传送,但是刚刚连接时可能没有文件。那是不是没有文件时也把位置空出来比较好一些呢?那中间可空了一大截啊,求指点。 |
18
bshu 2019-12-02 10:51:02 +08:00
忘了一条,就是关闭连接,在对话区域,每个连接操作区的顶部是可以控制连接状态的。这个你没有注意到,应该也是设计做的不到位
|
19
crazytree OP @bshu #17 整体用户学习成本较高。我之前已经尝试过关闭,失败,你回复我过后,我又去找了,还是失败,最后才看见后面有个断链的小 icon。
我不觉得看不见宣传区就会不知道这个网站有什么用,因为文件都放上去了,况且 那个宣传区也看不出个啥来啊 2333 移动端也有一些新问题。 要改的话,整个都得改了。整体不要太割裂,状态的转换要明确,当下的重要信息要突出。 |
20
bshu 2019-12-02 11:32:27 +08:00
@crazytree 唉,其实这一版也折磨我很久,心有余而力不足。如果方便的话帮我设计一版?我会付费感谢的。另外如果时间充裕并且擅长平面设计的话,我还可以帮你介绍不少外单
|
21
rizon 2019-12-02 11:50:03 +08:00
@bshu #13 一直很好奇这种 p2p 的文件传输 怎么做的啊? 难道数据不是通过中间服务器转发的吗?真的是直接点对点的吗? 大概是应用的哪些技术啊?我挺想学一下的
|
22
bshu 2019-12-02 11:55:30 +08:00
@rizon 使用的 webrtc,此技术原本是用于实时视频和音频的,也就是做视频聊天或会议的,但是它里面有个数据通道,设计时主要考虑的是信令传输,但是好好利用一下也可以传数据。直连成功后,确实不需要中间服务器,中间服务器只负责在建立初期进行信令交互,帮助建立连接。想学的话,在 github 上搜索 webrtc 就可以看到很多 demo 的
|
25
bshu 2019-12-02 13:28:03 +08:00
@crazytree “bDU5NTMwNzYxMDA=”这个啥?加密后的帐号? 或者你可以直接连我,我们私聊: https://www.pplink.link/?r=1a4634f0-14bb-11ea-afbb-95dced5392d1
|
28
morizawatt 2019-12-02 14:32:38 +08:00 via iPhone
样式、动效都要有针对性的产品分析,绝对直角、低纯度配色当然也要对应产品调性,弥散投影与多层阴影表现效果也有着相当的界面表现力。「无设计经验」与「迅速掌握」本身就是对立的,术业有专攻,审美的提升并不能速成,更何况一些菲茨、希克、雅各布等等专业理论了。如果只是追求能看的 ui,lz 说的很基本,bootstrap 模版就能很好满足。如果想从 ui 上获得可比性的话,还是出门右拐找平台吧。
|
29
rizon 2019-12-02 15:00:43 +08:00
@bshu #22 webrtc 也可以实现内网穿透?有些不太懂 NAT 的事情,所以如果是内网主机的话,它是走的 p2p 还是服务器中转的啊?
|
30
bshu 2019-12-02 15:12:04 +08:00
@rizon 内网主机要分情况,如果同一个内网,肯定 P2P,不同的内网,要看内网出口 Nat 的类型,可能 P2P,可能中继。这个就比较复杂了,一两句话可解释不清楚。
|
31
rizon 2019-12-02 15:26:36 +08:00
@bshu #30 嗯,webrtc 在传输时,会判断网络情况是吧,能直接连接的就是那个叫 stun 的,如果不行则借助中转也就是 turn 来实现是吧? 所以这东西并无法解决 ipv4 下的普遍的内网传输问题,网速依然首先要与中转服务器
|
32
crazytree OP @morizawatt #28 那是肯定的呀,这里说的都不是绝对的,只是在 v2 这里面对没有设计的程序员看看,专业交互 UI 的工作远过于此,所以才有“无经验”“迅速掌握”这种词,只是说让他们弄出来的东西不要太难用,不要太程序员思维。你说的那几个专业理论,其实一句话就可以概括,优设上的月经文章,我们日常工作自然而然得会考虑到,说实话我对优设发这种文章是有点嗤之以鼻的,就像在大学专门花一节课讲加减乘除理论一样,(我不是说他不重要)。bootstrap 这种框架是能提供好的骨架,但是落实到里面的内容,程序员们可能还是搞不太定。想靠看一篇这种文章就做出有可比性的 UI,那是不可能的,所以我在前面说了这不是教程。同意你说的术业有专攻。
|
33
morizawatt 2019-12-02 16:34:29 +08:00
@crazytree 理论指导实践啊,也是设计心理学的分支,是要系统学习的。我说的是 bootstrap 模板,一搜一大堆,一套完整的控件+二级页都有,完全没必要 0 经验去搭建一个仅仅能看的过去东西。
|
34
crazytree OP 沉了
|
35
Nzelites 2019-12-06 16:09:24 +08:00
感谢,期待 web 版本的设计经验
|
37
geying 2019-12-07 09:30:07 +08:00
感谢分享,期待后续
是不是可以开课,我要听 |