V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
crazytree
V2EX  ›  设计

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

  •  9
     
  •   crazytree · 2019-11-29 22:02:16 +08:00 · 10741 次点击
    这是一个创建于 1819 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    我的工作:交互设计师 /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。

    ·高级的左对齐。

    看情况再补充

    第 1 条附言  ·  2019-12-02 09:56:40 +08:00

    禁止白嫖

    38 条回复    2019-12-07 13:26:44 +08:00
    crazytree
        1
    crazytree  
    OP
       2019-11-29 22:03:26 +08:00   ❤️ 1
    两个图床都没打开,所以就没图了
    henryhu
        2
    henryhu  
       2019-11-29 22:42:01 +08:00
    赶紧打开自己的小程序,对照检查
    TSai2019
        3
    TSai2019  
       2019-11-30 10:26:50 +08:00 via Android
    很有帮助
    noreplay
        4
    noreplay  
       2019-11-30 10:29:05 +08:00 via Android
    老哥讲信誉,说发就发了
    crazytree
        5
    crazytree  
    OP
       2019-11-30 12:57:04 +08:00
    @noreplay 周末都没人看了
    ch3nOr
        6
    ch3nOr  
       2019-11-30 18:01:40 +08:00
    感谢已发送,希望楼主能讲多点
    crazytree
        7
    crazytree  
    OP
       2019-11-30 18:17:31 +08:00 via Android
    @ch3nOr 我想多讲点来着的,但是说好了晚上发,来不及了呀😂,还有就是不晓得咋插图片
    jin1010v3ex
        8
    jin1010v3ex  
       2019-11-30 18:37:28 +08:00 via Android
    老哥讲信用,说发就发,内容也很好
    roujiang
        9
    roujiang  
       2019-11-30 19:15:28 +08:00
    @crazytree 图片上传这里就可以引用啦~ https://sm.ms/
    crazytree
        10
    crazytree  
    OP
       2019-11-30 19:40:22 +08:00 via Android
    @roujiang 感谢,下次用
    lbyo
        11
    lbyo  
       2019-11-30 19:55:40 +08:00   ❤️ 1
    @roujiang #9 催更了肉酱!!! 打算寄刀片了!!!
    ydatong
        12
    ydatong  
       2019-12-01 08:20:24 +08:00 via iPhone
    学习了!
    bshu
        13
    bshu  
       2019-12-01 19:25:09 +08:00 via Android
    @crazytree 受教,能帮我这个指点一二吗? www.pplink.link
    crazytree
        14
    crazytree  
    OP
       2019-12-02 09:53:29 +08:00
    @bshu #13 建议上面的珊瑚红撑满真个屏幕,采用左右结构,左边是说明图,右边是链接和文件传输框,字用白色,字号可以大一点,文件传输框可以简洁一点,用跟背景相近的颜色,不用虚线描边。

    这是个好产品!
    bshu
        15
    bshu  
       2019-12-02 10:07:43 +08:00 via Android
    多谢回复,你建议的是 pc 上的布局对吧?我之前考虑过,感觉有点难度,当没有和其他设备建立连接时,这样没问题,一旦建立了连接,和对端的交互界面应该出现,并作为页面主体,布局变了就比较尴尬。而且那个虚线框下方需要放在不确定数目的待传文件,放右边,很可能出现左右不平衡的情况。其他是很好建议,我会参考调整一下。再次谢谢你
    crazytree
        16
    crazytree  
    OP
       2019-12-02 10:30:29 +08:00
    @bshu #15 看了一下这个建立连接过后的样子。此时说明图片已经失去意义,用户接下来的操作是希望传输文件,所以可以考虑全屏。另外 四字段的号码是什么意义?是唯一识别号吗?那既然有号码,为什么没有输入框可以输入对方的号码建立连接?可以建立多人连接吗?如果不能,为什么连接后还有左边那一块的左中右结构?试了一下其实是可以多人连接的,这个功能其实可以突出介绍一下。发送文本消息需要那么大的区域吗?有文件过后,对话框会被挤开,这不太符合预期,或者说干扰了我的认知。好像只能关闭网页才能断开?然后页面排版不是很好。虽然功能简单,但是场景还是挺复杂的,建议从用户视角去梳理一下,哪些东西在当前是不必要的。
    bshu
        17
    bshu  
       2019-12-02 10:47:28 +08:00
    对,你提到的问题,确实是我设计上的不完善,因为很多功能上已经考虑了或者已经实现了,但是没有很好的传达给作为用户的你。
    1、尝试过建立连接后,直接隐藏上面的宣传语,但是使用过程中,用户自己把文件加入待传列表后,把直连网址发给了待接受者,待接受者打开网址就是建立连接的过程,然后进入连接后的页面,那么他就无法再看到宣传语,也不知道这个网站是干嘛的,所以暂时保留了。
    2、四字段是用户自己的名称,支持修改和自定义,这样对方容易识别(此功能现在有 bug,稍后会更新修复的版本)。这个让你误解那肯定我设计有问题,没有提示信息,只是图简洁了。
    3、同一个页面支持多人接入,但是不太想突出,更希望打开不同的 tab,不同用户用不同 tab,这样可能更容易区分。
    4、发送文本框大这个是故意的,这个功能主要用于手机 /电脑直接文字内容的相互 copy,主要不是为了聊天用户的。
    5、有文件时,对话框被挤压这个,我实在没啥好想法,因为这个网站最核心的是远程文件传送,但是刚刚连接时可能没有文件。那是不是没有文件时也把位置空出来比较好一些呢?那中间可空了一大截啊,求指点。
    bshu
        18
    bshu  
       2019-12-02 10:51:02 +08:00
    忘了一条,就是关闭连接,在对话区域,每个连接操作区的顶部是可以控制连接状态的。这个你没有注意到,应该也是设计做的不到位
    crazytree
        19
    crazytree  
    OP
       2019-12-02 11:05:09 +08:00   ❤️ 1
    @bshu #17 整体用户学习成本较高。我之前已经尝试过关闭,失败,你回复我过后,我又去找了,还是失败,最后才看见后面有个断链的小 icon。
    我不觉得看不见宣传区就会不知道这个网站有什么用,因为文件都放上去了,况且 那个宣传区也看不出个啥来啊 2333
    移动端也有一些新问题。
    要改的话,整个都得改了。整体不要太割裂,状态的转换要明确,当下的重要信息要突出。
    bshu
        20
    bshu  
       2019-12-02 11:32:27 +08:00
    @crazytree 唉,其实这一版也折磨我很久,心有余而力不足。如果方便的话帮我设计一版?我会付费感谢的。另外如果时间充裕并且擅长平面设计的话,我还可以帮你介绍不少外单
    rizon
        21
    rizon  
       2019-12-02 11:50:03 +08:00
    @bshu #13 一直很好奇这种 p2p 的文件传输 怎么做的啊? 难道数据不是通过中间服务器转发的吗?真的是直接点对点的吗? 大概是应用的哪些技术啊?我挺想学一下的
    bshu
        22
    bshu  
       2019-12-02 11:55:30 +08:00
    @rizon 使用的 webrtc,此技术原本是用于实时视频和音频的,也就是做视频聊天或会议的,但是它里面有个数据通道,设计时主要考虑的是信令传输,但是好好利用一下也可以传数据。直连成功后,确实不需要中间服务器,中间服务器只负责在建立初期进行信令交互,帮助建立连接。想学的话,在 github 上搜索 webrtc 就可以看到很多 demo 的
    rizon
        23
    rizon  
       2019-12-02 12:00:23 +08:00
    @bshu #22 嗯嗯 谢谢哈,我研究一下
    crazytree
        24
    crazytree  
    OP
       2019-12-02 13:23:35 +08:00
    @bshu #20 可以啊,bDU5NTMwNzYxMDA=
    bshu
        25
    bshu  
       2019-12-02 13:28:03 +08:00
    @crazytree “bDU5NTMwNzYxMDA=”这个啥?加密后的帐号? 或者你可以直接连我,我们私聊: https://www.pplink.link/?r=1a4634f0-14bb-11ea-afbb-95dced5392d1
    okwork
        26
    okwork  
       2019-12-02 13:36:34 +08:00
    @bshu webrtc 在移动浏览器上兼容性怎么样?稳定性如何?
    bshu
        27
    bshu  
       2019-12-02 13:48:43 +08:00
    @okwork 最新版本兼容性比较好,不包括 IE 系列
    morizawatt
        28
    morizawatt  
       2019-12-02 14:32:38 +08:00 via iPhone
    样式、动效都要有针对性的产品分析,绝对直角、低纯度配色当然也要对应产品调性,弥散投影与多层阴影表现效果也有着相当的界面表现力。「无设计经验」与「迅速掌握」本身就是对立的,术业有专攻,审美的提升并不能速成,更何况一些菲茨、希克、雅各布等等专业理论了。如果只是追求能看的 ui,lz 说的很基本,bootstrap 模版就能很好满足。如果想从 ui 上获得可比性的话,还是出门右拐找平台吧。
    rizon
        29
    rizon  
       2019-12-02 15:00:43 +08:00
    @bshu #22 webrtc 也可以实现内网穿透?有些不太懂 NAT 的事情,所以如果是内网主机的话,它是走的 p2p 还是服务器中转的啊?
    bshu
        30
    bshu  
       2019-12-02 15:12:04 +08:00
    @rizon 内网主机要分情况,如果同一个内网,肯定 P2P,不同的内网,要看内网出口 Nat 的类型,可能 P2P,可能中继。这个就比较复杂了,一两句话可解释不清楚。
    rizon
        31
    rizon  
       2019-12-02 15:26:36 +08:00
    @bshu #30 嗯,webrtc 在传输时,会判断网络情况是吧,能直接连接的就是那个叫 stun 的,如果不行则借助中转也就是 turn 来实现是吧? 所以这东西并无法解决 ipv4 下的普遍的内网传输问题,网速依然首先要与中转服务器
    crazytree
        32
    crazytree  
    OP
       2019-12-02 15:29:48 +08:00
    @morizawatt #28 那是肯定的呀,这里说的都不是绝对的,只是在 v2 这里面对没有设计的程序员看看,专业交互 UI 的工作远过于此,所以才有“无经验”“迅速掌握”这种词,只是说让他们弄出来的东西不要太难用,不要太程序员思维。你说的那几个专业理论,其实一句话就可以概括,优设上的月经文章,我们日常工作自然而然得会考虑到,说实话我对优设发这种文章是有点嗤之以鼻的,就像在大学专门花一节课讲加减乘除理论一样,(我不是说他不重要)。bootstrap 这种框架是能提供好的骨架,但是落实到里面的内容,程序员们可能还是搞不太定。想靠看一篇这种文章就做出有可比性的 UI,那是不可能的,所以我在前面说了这不是教程。同意你说的术业有专攻。
    morizawatt
        33
    morizawatt  
       2019-12-02 16:34:29 +08:00
    @crazytree 理论指导实践啊,也是设计心理学的分支,是要系统学习的。我说的是 bootstrap 模板,一搜一大堆,一套完整的控件+二级页都有,完全没必要 0 经验去搭建一个仅仅能看的过去东西。
    crazytree
        34
    crazytree  
    OP
       2019-12-06 11:23:40 +08:00
    沉了
    Nzelites
        35
    Nzelites  
       2019-12-06 16:09:24 +08:00
    感谢,期待 web 版本的设计经验
    crazytree
        36
    crazytree  
    OP
       2019-12-06 16:31:21 +08:00
    @Nzelites #35 原则都是一样的,只是字体可以更大,可以用大面积色块,配色可以鲜艳大胆
    geying
        37
    geying  
       2019-12-07 09:30:07 +08:00
    感谢分享,期待后续
    是不是可以开课,我要听
    crazytree
        38
    crazytree  
    OP
       2019-12-07 13:26:44 +08:00 via Android
    @geying 开课言重了 还不够水平哦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1249 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:27 · PVG 07:27 · LAX 15:27 · JFK 18:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.