楼仔

V2

2023/03/16阅读:24主题:橙心

技术派交互视觉设计

承接上文,这篇文章让大家了解技术派的交互和视觉设计,这个也是一个项目必不可少的环节,这篇文章对需要创业的同学可能更有帮助,非创业同学仅了解即可。

基础知识

交互视觉设计,其实分为交互和视觉两个领域,先看一下百度百度对这两个的解释:

  • 交互设计(英文Interaction Design,缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析,关注以人为本的用户需求。
  • 视觉设计是针对眼睛功能的主观形式的表现手段和结果。与视觉传达设计的异同,视觉传达设计属于视觉设计的一部分,主要针对被传达对象即观众而有所表现,缺少对设计者自身视觉需求因素的诉求。视觉传达既传达给视觉观众也传达给设计者本人,因此深入的视觉传达研究已经关注到视觉的方方面面感受,称其为视觉设计更加贴切。

感觉解释得好复杂,我理解的“交互设计”,就是用户使用该系统时,整体的交互流程;“视觉设计”,就是界面设计,让用户感觉整个界面美观大方。

不同的领域,分工也不一样,交互设计一般由产品给出,整个交互细节会体现在产品的原型图中;视觉设计,由专门的 UI 设计师负责,包括配色、界面设计、图片设计等。

由于文章发布类的平台,交互都大同小异,所以这个不是本篇文章的重点,这篇文章主要是告诉大家,技术派的视觉设计是如何做的。

前台设计

界面设计

最开始的界面设计图,是我们用 figma 画的,参考的是第三方文章发布平台,下面是所有的界面设计图。

社区首页:

文章详情页:

我的页面:

没错,这个我们最开始设计的版本,并且第一版也开发完成,后来担心版权问题,就改成了目前这种样式,很多页面已经被改得和之前完全不一样。

社区首页:

文章详情页:

我的页面:

这里其实有暴露了一个问题,就是我们一开始的界面是没有设计好的,虽然开发了一版,后来又全部推到重来,浪费了大量时间,大家需要引以为戒!

Logo设计

Logo 设计是最难的环节,对于非专业的同学肯定搞不定,所以我们请了一个设计师,专门给我们设计 Logo。

问一下大家,你们觉得设计一个 Logo,需要多少钱呢?官方网站给的数据:

  • 1000--2000元:大都是刚刚结业没多久的结业生设计或许是某宝的个人接单的设计师水平。
  • 2000—3000元:一般是树立不久的设计工作室,经历比较匮乏的设计人员。
  • 4000—9000:一般是商标logo设计较多的郑州商标logo设计公司,而且设计师具有多年的商标logo设计经历了,一般均可满意企业关于公司商标logo设计的要求,而且商标logo设计出稿的速度也比较快。
  • 9000—30000元:一般是比较有名气的闻名设计公司,这类公司做企业商标logo设计一般都是需排单的。
  • 30000—几十万:一般属设计职业的大师级人物了。假设一款商标logo设计费能够到达上百万元的,必定是在设计圈内响当当的人物了。

我们没有那么多经费,所以找的熟人,给的友情价。

设计理念:用字母 T 来组成 π,T 代表着科技,π 就是“派”的谐音。

最后上色之后的效果:

最后看一下底色为黑色的效果,因为这个使我们的主色:

其实设计 Logo,设计师会设计出好几种,供我们挑选,再让大家看看我们淘汰的方案。

如果是你,你最喜欢哪种方案呢?

系统配色

大家会发现,我们整个界面的色系都是统一的暖色系。

这套色系主打橘色 + 黄色,然后又有一点点偏红,主要是为了和我么你的 LOGO 色系呼应,但是这个肯定不是我们自己配的,我们找了几套色系模板,最后定了下面这套。

模板只能帮忙定主色调,剩下的很多细节,都是大家慢慢调的。

图片设计

图片设计,真的是花了我们不少功夫,因为每个设计师的审美不一样。

比如我的页面的背景图,最开始找了一位设计师,给的设计方案如下。

是不是感觉超级好看?

但是适配的效果却非常不好,所以也就废弃了,最终还是选择下面这种效果。

比如对于用户卡片的设计,也给了一套方案,最终也没有采用。

再比如卡片顶部配色,最终选择橘色的方案。

还有很多,就不一一列举了,最后是教程图片设计,先看看我们设计的教程封面。

这些都是我们自己设计的,给大家推荐 2 款软件:

  • 搞定设计:https://www.gaoding.com
  • Canva 可画:https://www.canva.cn

后台设计

对于后台,整体的 UI 交互图如下。

数据统计界面:

导航栏和文章专栏界面:

Banner、分类、标签、文章界面:

后台的配色不需要我们单独设计,直接复用开源框架即可。

不过我们还是进行了简单的改造,把技术派的 Logo 加上去。

分类:

后端

标签:

后端

作者介绍

楼仔
V2