哪些方面和细节会让一个 App 显得「粗糙/不精致」?

理由
举报 取消

有的app一眼看上去就感觉很粗糙,不精致,我想知道是什么原因导致了这种粗糙呢(不是那种资金不足,着急上线的原因,而是技术设计上的,比如说可能直接把图片拉长导致了图片粗糙等等)

2017年12月28日 10 条回复 1425 次浏览

发起人:纤尘 初入职场

信息爆炸时代,别把注意力放在垃圾上。

回复 ( 10 )

  1. 吕晨
    理由
    举报 取消

    题主问的是技术设计上的问题导致App的粗糙感,我觉得以下几个方面没有做好的话,就会产生强烈的粗糙感。

    多图预警!!!!

    • 非标准控件的使用

    不多说了直接给图:

    好好的系统控件不用,非要自己设计一个。

    设计的好也就算了,做出来这样还不如用系统控件啊!!!

    (╯-_-)╯╧╧

    好,那就用系统控件。

    可是这6.0系统都开始推送了,还在软件上用2.X的Dialog是个什么鬼!!

    (╯-_-)╯╧╧

    熟读MD设计规范,使用系统标准控件,这是最保险的做法。

    进阶:当然是自己设计控件啦~

    例如这个:race604/FlyRefresh · GitHub

    • Hybrid App

    反正我对Hybrid App是没有好感的,主要是对淘宝和京东App的不满。

    这TM都什么鬼!!!!!

    底部那变形的Tab到底是什么东西!!!

    粗糙粗糙粗糙粗糙粗糙粗糙!!!

    • UI设计

    所有东西排排列,毫无层次感。

    尤其添加人数多了之后页面信息更是复杂。

    但是另一个界面:

    显然就好多了。

    巧妙的设计,隐喻的使用,能使界面更加简洁,却表达出更多的信息。

    • 过渡动画的使用

    很多小动画,真的有化腐朽为神奇的作用。

    例如MIUI中卸载应用的粉碎动画,就使得单调的卸载操作变得灵动活泼。

    有些软件选取了不合适的过渡动画,也会导致应用的粗糙感。

    例如:

    点击这个应用右下角的FloatingActionButton(粉红色加号按钮,以下简称FAB),会跳转到事件添加页面,两个页面间的过渡动画是这样的:

    页面从右向左平移了过来。

    其实采用这样的过渡动画也无可厚非,但是它出现在这样一个MD设计的应用中,我会觉得非常违和。

    我觉得这里正确的转场动画应该是:

    1. 使用波纹动画过渡(RippleEffect),新页面以涟漪形拓展开铺满屏幕
    2. FAB向上平移,最后到达新页面中FAB应该所在之处。

    根据设计规范:

    当用户操作生成一个新元素时,元素的动画应该基于触控点展开。

    元素从触控点展开时,通过视觉效果将元素与触控点联系起来。

    //知乎不能传动图很蛋疼啊……

    正确范例可以参考一款安卓音乐播放器Phonograph Music player,他的“正在播放”界面是这样展开的:

    而如果在抽屉导航栏点击“正在播放”的话,它是这样处理的:

    可以看到经过这样的过渡动画处理,整个应用给人的感觉就非常的精致。

    一个App粗糙与否,往往就是这些细节决定的。

    而这些过渡动画,可以说是最直观的细节了吧。

    再举一个微信的例子。

    安卓端微信照搬苹果端设计虽然一片骂声,但是有些细节做的还是很棒的。

    比如左右滑动切换Tab的时候:

    这样的一个颜色转换的动画就做的非常棒~!

    • Icon选择

    作为App的入口,Icon的选择也是很重要滴!

    举个例子:

    且不论内容如何,这两个App,哪个给人的感觉更粗糙,我想诸位在第一眼看到的时候,就已经有定论了。

    这终究还是看脸的世界啊~搞好第一印象是非常重要滴!

    扁平化设计+圆角矩形的icon虽然已经烂大街了,但在没有好设计的情况下,跟大家走也不会错。

    去掉高光,选择合适的颜色和线条,即使入下图这么简单的icon:

    我相信给人的感觉是简约而不是粗糙。

    进阶:有理想的可以按照MD的设计规范去做:

    产品图标设计从现实材料的质感和触感中获得启发。每个图标都像真实纸张一样被裁剪、折叠和点燃,而用一些简单的图形元素来表现。我们通过干净的折痕和清晰的边缘来表现结实坚固的质感,或是利用微妙的亮点和一致的阴影来展现材料的磨砂抛光。

    • 总结
    • 控件使用
    • 使用Hybird 框架开发App
    • UI设计
    • 过渡动画
    • Logo选择

    我大概从这几个方面讲了下导致一个App粗糙的原因,其实总结一下,根本原因不过是:

    1. 没有能力创造出自己的一整套UI设计却又不遵守设计规范。
    2. 操作逻辑混乱,界面布局复杂,用户体验糟糕。

    最后放上一组对比,两个同样使用Material Design的软件,看看哪个更加粗糙,哪个更有质感。

    Ps: 所有图片都是使用Ashampoo_snap_7截取,同时使用了Vysor。我是真的很喜欢这些软件啊有哪些软件堪称「神器」,却不被大众所知? – 知乎用户的回答

    PPs:放上Google Material Design 中文版地址:

    Material Design中文版_Material Design中文教程_Material Design开发中文手册[PDF]下载

  2. nekocode
    理由
    举报 取消

    技术上找原因的话大概很关键的一点是: 工程师还原能力低。。

    其他可能是:

    • 设计稿对实际情况的覆盖率低(这个经常有,设计师的理想状态下很多东西都和实际不符 )
    • 工程师对一些细节的处理上不够好(n px 问题,阴影处理,图片裁剪算法不合理)

    ==== 以下是对设计上找原因的一些看法 ====

    • 强设计感的 APP 应该是给人一种细腻的感觉,不论内容复杂还是简单。

    • 设计感差的 APP 就如题主所说显得『粗糙』

    • 交互设计也十分重要(下面为一些交互例子 gif 图)

    movie_together.md · GitHub

    个人认为最重要的原因在于:

    • 色彩搭配不当
    • 设计(图标,字体,色彩)没有统一感
    • 内容排版有问题
    • 对字体的大小以及颜色不重视
    • 图标质量低,失真

    其中最重要的应该是 设计统一感!检验的标准就是检查 APP 是否有 统一的调色板,统一风格的 icon 库,统一的 dimen 表。以及 APP 内是否有没有令人感觉「异类」的元素。 通常能做到设计感统一就不会显得太过粗糙。

    而「好的 UI 设计」必然是需要设计师和工程师共同努力的(一个 具有设计感的前端工程师 一个有基础代码能力的设计师 十分重要

  3. 李建华
    理由
    举报 取消

    粗糙的原因很多,如果一个没有做过移动互联网的设计师,对移动互联网的感受不深,让她设计的话,就会设计的图片和界面不符合用户的习惯,然后就会感觉特别别扭,还有就是缺少设计的团队,设计不精都会有这样的后果。,

  4. 硫铵磷
    理由
    举报 取消

    那种没有针对大屏优化过app,点开就是直接缩放的无比模糊的app简直无法忍受

  5. 刘少锐
    理由
    举报 取消

    不遵守设计规范就会造成粗糙。

    原因可能是:

    一、产品经理根本不知道Android也有自己的设计规范或者知道也不遵守,举例

    1.去哪儿Android版,照搬iOS

    2.58同城Android版,照搬iOS

    3.当当网Android版,照搬iOS,上面两个虽然是照搬,但起码文字图片不至于失真,然而当当这个启动画面和底部导航按钮不忍直视

    二,依旧遵循旧的设计规范,举例:

    1.GoldenDict Android版,还在沿用Android4时代的holo风格

    2.AccuWeather Android版,进度条居然还在使用Android2时代的规范!

    主界面采用的是holo风格:

  6. itlr
    理由
    举报 取消
    1. 不设计
    2. 只有局部设计
    3. 有全局设计但不处理一致性
  7. 苏航
    理由
    举报 取消

    我们公司就我一个开发Android的.美工 测试 产品经理这些我们全没有……一切UI由我设计,需要图片自己去找,或者干脆自己画一个.

    APP不粗糙都怪了.

  8. 碧xiao
    理由
    举报 取消

    到现在还在用拟物设计的

  9. 叙事曲
    理由
    举报 取消

    缺钱

    真的不是其他原因

  10. 子沛
    理由
    举报 取消

    就拿Android来说

    如果一个app遵循Android Design + Material Design,是不会粗糙到哪里去的。你看Google的demo就知道,很简单的图形就可以让你感受到它设计的美感

    然而国内有多少设计和开发者看过的?

    随便凑一些组件上去拼出功能,然后扔几个100×100的图

    不丑真心对不起Google

我来回答

Captcha 点击图片更换验证码