来了：无设计经验，迅速掌握如何构造易用、不丑的应用

[crazytree]

前言

我的工作：交互设计师 /UE/产品设计师
为什么写这个：因为经常在此站看到你们请不起设计师时做的应用，希望掌握了下面的原则，可以帮到你
其他：我就想到哪写到哪，因为我要从这么多经验理论去提取概要，给你们最关键的东西

这不是教程（免得被喷）

---

开始吧

1.三个概念

1.交互设计：

动效只是交互的很小一部分，但是经常有人把他们划等号。交互设计包含：业务逻辑、信息结构、操作流程、页面布局等。每一项里面又包含更多交叉理论，下面会提一些关键点。

2.用户体验：

正如你所理解的字面意思。用户从接触你的服务-接受服务-离开服务 过程的体验感受。它可以反映在一条情绪曲线上，爽点痒点痛点。如果你能将用户情绪保持在较高的水平，那就是好的用户体验。

3.好的 UI/不难看的 UI

纯个人观点，就三点： ·简洁的 ·精致的 ·跟我交互稿没分歧的

---

---

下面就不区分交互和 UI 了，尽量找例子说明。

2.怎么做？不能怎么做？

1.保持逻辑清晰，从用户视角，按故事构建页面 ：

避免“产品设计图”这种全局思维。按用户故事划分，逐渐梳理各流程。
包括：设立用户目标、完整使用路径、引导用户行为、给予用户能力、结果和反馈等。 （ 能理解，不细讲

2.一个页面只侧重于一件事：

这个好懂，每个（二级）页面只有一个主要任务（主要按钮）其他都应该弱化。
有个问卷调查小程序那个帖子问题严重。

3.去掉不必要的步骤和页面、别轻易阻断用户行为

·比如说“启动页”、“广告页”、等。（还有问卷调查那个小程序打开的第一个界面，点击后才进入首页），（契合 Human interface guideline ）。这些既提升体验，也有助于转化。
·能不用弹窗就不用弹窗，减少阻断用户行为。容错机制也不一定用弹窗，比如 apple 用的垃圾桶、左滑删除的二次确认等，既提升效率，又容错。
ps：这里疯狂 diss 麦当劳小程序

4.符合习惯和心理预期，给予反馈、提示

·例如，左上角返回的习惯、iOS 右滑返回的习惯、按钮 左否定 右肯定 的习惯、等。
·例如，点击返回，预期是按页面堆叠顺序从右侧划出；例如，麦当劳小程序选择套餐内容后，预期是直接返回 or 确认按钮，然而都不是。
·反馈和提示就很好理解，不细说

有上面这些就差不多比较易用了，还有更多的，比如尼尔森可用性法则、减少输入、情景判断，就不说了。下面是视觉上的一些内容：

5.颜色

·最好看、最耐看的颜色：黑、白。
·app 上避免使用的颜色：中性灰（大面积）、中低饱和度的颜色。正绿、正黄、紫色慎用。
·好的颜色：较高饱和度、90%以上亮度。
·配色：互补色（色相相对，红-蓝 /橙-蓝）、近似色（红-橙 / 蓝-青）两种，这里红不特指 0°的正红，其他也一样。要保持较高的饱和度。
·除图片外，移动端 APP 界面应以黑白为主，主色面积 20%以内，辅色 5%左右，慎用大面积色块。否则界面杂乱无重点。
·现在渐变用得少了，最后会发现，还是简单的东西好看（ ps：手机也是一样）

6.样式

·不要描边。按钮、标签除外。
·线 越少越好。如果你非常想用，那么：border：0.5pt 、#EEEEEE。越细越好、越淡越好。
·禁止绝对直角。喜欢尖一点的，那 radius：4pt。圆润一点的，border 8、12、16、24pt。
·对齐。文字排版、元素较少时，左对齐不会错。按钮居中 or 靠右。
·投影。直接给经验值，白色块投影 #000 0.1 blur：16pt，spread：-8pt （ blur 值的一半），垂直偏移自己调整。有色色块：投影颜色=色块颜色，alpha：100%，其他同前。
·避免：既有圆角又有直角，通栏跟卡片结合。
·重复元素（比如 list ）中按钮应该弱化，减小大小 or 描边按钮。
·不要色块套色块，禁止套娃。

icon 就不说了，其实影响不大

7.文字

·一定要有对比。字重、字号、颜色。不要怕太夸张。
·字号不能太多。除标题和注释标签外，最多 2 个字号，一共四个。建议 18、14、12、10pt。
·同一行文字靠近时，不要字号对比。
·大段文字避免中性灰，建议：#434343 #9999 #CCC。
·文字与背景颜色一定要有边距。
·不要用细体。
·大段文字要调整行间距。1.2~1.5 倍。
·文字与背景要有足够对比。

8.其他

·页面乱不乱，就看格式塔法则：相似、接近、连续、闭合、简单，不展开说，可自行百度。
·页面顶部、底部的 icon 可以稍粗，描边 1.5pt 、2pt，其他 icon 尽量保持跟文本一样粗细（ 1pt ）。

---

---

如果你还是记不住：

·简洁至上

·一个（二级）界面只做一件事，只有一个主要按钮。

·黑白为主要颜色，背景色#F5F5F5 左右，主题色辅色用高饱和、高亮度颜色，分别不超过 20%、5%。别用中性灰。（移动端）

·完全扁平，都通栏 or 都不贴边，不用分割线，亲近关系靠间距体现。

·标签栏标题：18pt #434343 bold，内容标题：14pt #434343 medium，主要内容：14pt #434343 regular，次要内容：12pt #999/#CCC regular、标签等小字：10pt #999 regular。

·高级的左对齐。

看情况再补充

禁止白嫖

[crazytree]

两个图床都没打开，所以就没图了

[henryhu]

赶紧打开自己的小程序，对照检查

[TSai2019]

很有帮助

[noreplay]

老哥讲信誉，说发就发了

[crazytree]

@noreplay 周末都没人看了

[ch3nOr]

感谢已发送，希望楼主能讲多点

[crazytree]

@ch3nOr 我想多讲点来着的，但是说好了晚上发，来不及了呀😂，还有就是不晓得咋插图片

[jin1010v3ex]

老哥讲信用，说发就发，内容也很好

[roujiang]

@crazytree 图片上传这里就可以引用啦～ https://sm.ms/

[crazytree]

@roujiang 感谢，下次用

[lbyo]

@roujiang #9 催更了肉酱!!! 打算寄刀片了!!!

[ydatong]

学习了！

[bshu]

@crazytree 受教，能帮我这个指点一二吗? www.pplink.link

[crazytree]

@bshu #13 建议上面的珊瑚红撑满真个屏幕，采用左右结构，左边是说明图，右边是链接和文件传输框，字用白色，字号可以大一点，文件传输框可以简洁一点，用跟背景相近的颜色，不用虚线描边。

这是个好产品！

[bshu]

多谢回复，你建议的是 pc 上的布局对吧？我之前考虑过，感觉有点难度，当没有和其他设备建立连接时，这样没问题，一旦建立了连接，和对端的交互界面应该出现，并作为页面主体，布局变了就比较尴尬。而且那个虚线框下方需要放在不确定数目的待传文件，放右边，很可能出现左右不平衡的情况。其他是很好建议，我会参考调整一下。再次谢谢你

[crazytree]

@bshu #15 看了一下这个建立连接过后的样子。此时说明图片已经失去意义，用户接下来的操作是希望传输文件，所以可以考虑全屏。另外 四字段的号码是什么意义？是唯一识别号吗？那既然有号码，为什么没有输入框可以输入对方的号码建立连接？可以建立多人连接吗？如果不能，为什么连接后还有左边那一块的左中右结构？试了一下其实是可以多人连接的，这个功能其实可以突出介绍一下。发送文本消息需要那么大的区域吗？有文件过后，对话框会被挤开，这不太符合预期，或者说干扰了我的认知。好像只能关闭网页才能断开？然后页面排版不是很好。虽然功能简单，但是场景还是挺复杂的，建议从用户视角去梳理一下，哪些东西在当前是不必要的。

[bshu]

对，你提到的问题，确实是我设计上的不完善，因为很多功能上已经考虑了或者已经实现了，但是没有很好的传达给作为用户的你。
1、尝试过建立连接后，直接隐藏上面的宣传语，但是使用过程中，用户自己把文件加入待传列表后，把直连网址发给了待接受者，待接受者打开网址就是建立连接的过程，然后进入连接后的页面，那么他就无法再看到宣传语，也不知道这个网站是干嘛的，所以暂时保留了。
2、四字段是用户自己的名称，支持修改和自定义，这样对方容易识别（此功能现在有 bug，稍后会更新修复的版本）。这个让你误解那肯定我设计有问题，没有提示信息，只是图简洁了。
3、同一个页面支持多人接入，但是不太想突出，更希望打开不同的 tab，不同用户用不同 tab，这样可能更容易区分。
4、发送文本框大这个是故意的，这个功能主要用于手机 /电脑直接文字内容的相互 copy，主要不是为了聊天用户的。
5、有文件时，对话框被挤压这个，我实在没啥好想法，因为这个网站最核心的是远程文件传送，但是刚刚连接时可能没有文件。那是不是没有文件时也把位置空出来比较好一些呢？那中间可空了一大截啊,求指点。

[bshu]

忘了一条，就是关闭连接，在对话区域，每个连接操作区的顶部是可以控制连接状态的。这个你没有注意到，应该也是设计做的不到位

[crazytree]

@bshu #17 整体用户学习成本较高。我之前已经尝试过关闭，失败，你回复我过后，我又去找了，还是失败，最后才看见后面有个断链的小 icon。
我不觉得看不见宣传区就会不知道这个网站有什么用，因为文件都放上去了，况且 那个宣传区也看不出个啥来啊 2333
移动端也有一些新问题。
要改的话，整个都得改了。整体不要太割裂，状态的转换要明确，当下的重要信息要突出。

[bshu]

@crazytree 唉，其实这一版也折磨我很久，心有余而力不足。如果方便的话帮我设计一版？我会付费感谢的。另外如果时间充裕并且擅长平面设计的话，我还可以帮你介绍不少外单

[rizon]

@bshu #13 一直很好奇这种 p2p 的文件传输 怎么做的啊？ 难道数据不是通过中间服务器转发的吗？真的是直接点对点的吗？ 大概是应用的哪些技术啊？我挺想学一下的

[bshu]

@rizon 使用的 webrtc，此技术原本是用于实时视频和音频的，也就是做视频聊天或会议的，但是它里面有个数据通道，设计时主要考虑的是信令传输，但是好好利用一下也可以传数据。直连成功后，确实不需要中间服务器，中间服务器只负责在建立初期进行信令交互，帮助建立连接。想学的话，在 github 上搜索 webrtc 就可以看到很多 demo 的

[rizon]

@bshu #22 嗯嗯 谢谢哈，我研究一下

[crazytree]

@bshu #20 可以啊，bDU5NTMwNzYxMDA=

[bshu]

@crazytree “bDU5NTMwNzYxMDA=”这个啥？加密后的帐号？ 或者你可以直接连我，我们私聊： https://www.pplink.link/?r=1a4634f0-14bb-11ea-afbb-95dced5392d1

[okwork]

@bshu webrtc 在移动浏览器上兼容性怎么样？稳定性如何？

[bshu]

@okwork 最新版本兼容性比较好，不包括 IE 系列

[morizawatt]

样式、动效都要有针对性的产品分析，绝对直角、低纯度配色当然也要对应产品调性，弥散投影与多层阴影表现效果也有着相当的界面表现力。「无设计经验」与「迅速掌握」本身就是对立的，术业有专攻，审美的提升并不能速成，更何况一些菲茨、希克、雅各布等等专业理论了。如果只是追求能看的 ui，lz 说的很基本，bootstrap 模版就能很好满足。如果想从 ui 上获得可比性的话，还是出门右拐找平台吧。

[rizon]

@bshu #22 webrtc 也可以实现内网穿透？有些不太懂 NAT 的事情，所以如果是内网主机的话，它是走的 p2p 还是服务器中转的啊？

[bshu]

@rizon 内网主机要分情况，如果同一个内网，肯定 P2P，不同的内网，要看内网出口 Nat 的类型，可能 P2P，可能中继。这个就比较复杂了，一两句话可解释不清楚。

[rizon]

@bshu #30 嗯，webrtc 在传输时，会判断网络情况是吧，能直接连接的就是那个叫 stun 的，如果不行则借助中转也就是 turn 来实现是吧？ 所以这东西并无法解决 ipv4 下的普遍的内网传输问题，网速依然首先要与中转服务器

[crazytree]

@morizawatt #28 那是肯定的呀，这里说的都不是绝对的，只是在 v2 这里面对没有设计的程序员看看，专业交互 UI 的工作远过于此，所以才有“无经验”“迅速掌握”这种词，只是说让他们弄出来的东西不要太难用，不要太程序员思维。你说的那几个专业理论，其实一句话就可以概括，优设上的月经文章，我们日常工作自然而然得会考虑到，说实话我对优设发这种文章是有点嗤之以鼻的，就像在大学专门花一节课讲加减乘除理论一样，（我不是说他不重要）。bootstrap 这种框架是能提供好的骨架，但是落实到里面的内容，程序员们可能还是搞不太定。想靠看一篇这种文章就做出有可比性的 UI，那是不可能的，所以我在前面说了这不是教程。同意你说的术业有专攻。

[morizawatt]

@crazytree 理论指导实践啊，也是设计心理学的分支，是要系统学习的。我说的是 bootstrap 模板，一搜一大堆，一套完整的控件+二级页都有，完全没必要 0 经验去搭建一个仅仅能看的过去东西。

[crazytree]

沉了

[Nzelites]

感谢，期待 web 版本的设计经验

[crazytree]

@Nzelites #35 原则都是一样的，只是字体可以更大，可以用大面积色块，配色可以鲜艳大胆

[geying]

感谢分享，期待后续
是不是可以开课，我要听

[crazytree]

@geying 开课言重了 还不够水平哦