首页

UI 网站设计分析:构建用户体验与视觉传达的桥梁

蓝蓝设计的小编 网站设计文章及欣赏

UI 网站设计是一个综合性的工程,需要从用户体验、视觉传达、响应式设计、内容呈现和性能优化等多个方面进行精心策划和设计,以打造出一个用户喜爱、功能完善且性能优良的网站。对于复杂或大量的信息,可以采用渐进式展示的方法。先展示主要信息和摘要,用户感兴趣时再展开详细内容。例如,产品介绍页面先显示产品的基本信息、图片和价格,用户点击 “详情” 按钮后再显示更详细的参数、用户评价等内容,避免一次性给用户过多信息造成负担。

UI设计公司兰亭妙微打造卓越网站设计:UI 的艺术与科学

蓝蓝设计的小编 网站设计文章及欣赏

打造卓越的网站 UI 设计需要从视觉设计、用户体验设计、品牌塑造和测试优化等多个方面入手,将艺术与科学相结合,深入了解用户的需求和行为,以创建一个既美观又实用、能够吸引用户并实现网站目标的优秀网站。

ui设计分享:黄色调网站设计

蓝蓝设计的小编 网站设计文章及欣赏

以下是关于黄色调网站设计的特点和设计方法,但请注意这里的黄色调是指积极、明亮的色彩倾向,与不良内容无关。
一、黄色调网站 UI 界面设计特点
  1. 活力与热情
    • 黄色是一种充满活力和热情的颜色,能够瞬间吸引用户的注意力。使用黄色调的网站界面给人一种积极向上、充满生机的感觉,激发用户的探索欲望。
    • 例如一些运动品牌的网站,可能会运用黄色调来传达品牌的活力与动感,鼓励用户积极参与运动。
  2. 温暖与友好
    • 黄色也可以营造出温暖和友好的氛围。相比于冷色调,黄色更容易让人产生亲近感,使网站更具亲和力。
    • 社交类网站或亲子类网站可以适当运用黄色调来打造温馨的用户体验,让用户感受到社区的温暖和家庭的关爱。
  3. 突出重点
    • 由于黄色的醒目性,它可以很好地用于突出重要的元素和信息。比如在按钮、链接或关键的文本内容上使用黄色,可以引导用户的视线,提高交互的效率。
    • 电商网站常常会用黄色来突出促销信息、购物车按钮等,吸引用户进行购买行为。
  4. 情感共鸣
    • 不同深浅的黄色可以唤起不同的情感反应。浅黄色可能给人带来轻松、愉悦的感觉,而深黄色则可能传达出稳重、可靠的印象。设计师可以根据网站的主题和目标受众,选择合适的黄色调,以引发用户的情感共鸣。

 

二、黄色调网站 UI 界面设计方法
  1. 色彩搭配
    • 黄色虽然醒目,但单独使用可能会过于刺眼。因此,需要与其他颜色进行搭配,以达到平衡和和谐的效果。
    • 常见的搭配有黄色与白色搭配,营造简洁、明亮的氛围;黄色与蓝色搭配,形成强烈的对比,增加视觉冲击力;黄色与灰色搭配,显得稳重而不失活泼。
  2. 色彩比例
    • 确定黄色在界面中的比例非常重要。如果黄色使用过多,可能会让用户感到疲劳和厌烦;如果使用过少,又可能无法发挥黄色的特点。
    • 一般来说,可以将黄色作为主色调之一,占据一定的比例,但不要超过整个界面的三分之一。同时,可以通过调整黄色的明度和饱和度,来控制其在界面中的强度。
  3. 布局设计
    • 在布局上,黄色可以用于引导用户的视线。例如,可以将黄色的元素放置在页面的重要位置,如导航栏、标题区域或关键内容周围,以吸引用户的注意力。
    • 同时,要注意保持界面的简洁和清晰,避免过多的黄色元素造成混乱。合理的布局可以让用户更容易理解网站的结构和内容,提高用户体验。
  4. 交互设计
    • 黄色可以在交互设计中发挥重要作用。比如,当用户鼠标悬停在某个按钮上时,可以用黄色来显示反馈效果,增强用户的交互感。
    • 此外,还可以通过动画效果来突出黄色元素,增加界面的趣味性和吸引力。但要注意动画效果不要过于复杂,以免影响用户的使用体验。
  5. 品牌一致性
    • 如果网站有特定的品牌形象,那么黄色调的设计应该与品牌风格保持一致。从品牌的价值观、目标受众和市场定位出发,选择适合的黄色调,并将其融入到整个网站的设计中。
    • 这样可以增强品牌的识别度和用户对品牌的认知度,提高品牌的影响力。

视线的秘密!利用浏览习惯提升网页视觉吸引力

蓝蓝小助手 网站设计文章及欣赏

在网页布局上,将重要的图像放在显眼的位置,比如头部区域。这样可以迅速吸引用户的注意力,并引导他们进入页面。对于需要详细解释的内容,可以采用图文结合的方式。先通过图像吸引用户的注意力,随后用文字详细阐述相关信息。

掌握网页设计精髓:排版布局与结构分析,揭秘响应式设计技巧,打造独特版式风格全攻略

蓝蓝小助手 网站设计文章及欣赏

网页版式设计和风格在网页设计中都是至关重要的元素,但它们的重要性因项目需求、目标受众和品牌特性等因素而异。无法简单地说哪一个更重要,因为它们通常是相互关联、相辅相成的。一个成功的网页设计应该既能满足用户的信息需求,又能给用户带来愉悦的视觉体验,同时能够准确地传达品牌的价值观和形象。
因此,在网页设计中,我们应该根据项目的实际需求、目标受众和品牌特性等因素综合考虑网页版式设计和风格的重要性,并在设计中找到它们之间的平衡点。

网页元素设计规则研究

蓝蓝小助手 网站设计文章及欣赏

通过以上的实际应用和案例分析,我们可以看到删格系统和响应式设计的结合在B端网页设计中的重要性和实用性。这种结合方式能够兼顾页面的整体结构和内容的自适应显示,为用户提供更加舒适、便捷的浏览体验。因此,设计师在实际项目中可以考虑充分融合这两种设计方法,以创造出更加出色的网页设计作品。

UI设计师必须要懂的4个设计心理学!

蓝蓝小助手 网站设计文章及欣赏

菲茨定律在App产品设计中强调了目标区域的大小和距离对用户操作的影响。通过增大重要按钮的大小、减少操作间距离、设计适合手势操作的界面以及提供清晰的反馈指引,可以优化用户体验,提高用户操作的准确性和效率。这个原理指导着设计师如何布局界面元素,使得用户更轻松、更快速地进行交互操作,进而提升产品的易用性和吸引力。

PC端应用界面UI设计:如何打造高效与美观并重的用户体验

蓝蓝设计的小编

在数字化时代,PC端应用作为人们工作、学习、娱乐的重要工具,其界面UI设计直接关乎到用户的使用体验和满意度。一个优秀的PC端应用界面UI设计,不仅应当具备美观的视觉效果,更要注重功能布局、交互逻辑以及用户体验的全面提升。那么,如何进行PC端应用界面UI设计,以打造高效与美观并重的用户体验呢?以下是一些关键要点。

用7个章节,帮你完整掌握网页设计中的字体设置|北京蓝蓝UI设计公司

周周

不同操作系统、不同浏览器下的默认字体是不同的,在网页项目中可以通过 CSS 的 font-family 和 @font-face 来让页面渲染出适合当前网页的字体。

 

一篇文章带你看懂B端后台基础逻辑

周周

前言:为什么要看懂B端基础逻辑


相信很多设计师同学都接触过B端产品,对于很多设计师而言,遇上B端产品是一件令人又爱又恨的事情,爱是因为目前市场上大多数的公司主要经营的都是B端系统,B端系统相对于C端来说UI界面显得并没有那么的重要,所以设计师的责任也相对没有那么重,而恨是因为目前大多数B端系统页面都是由前端UI框架搭建的,前端同学很多时候直接套用组件即可,所以UI设计师对于整个系统来讲也显得可有可无,导致设计师话语权也特别的低,甚至有些做B端系统的公司压根不用UI设计师也能完成项目开发。


但是作为交互设计师(小公司一般是产品经理)在B端却特别吃香,并且拥有主要的话语权,因为我们主导这整个系统的基础逻辑与业务逻辑设计,所以无论是前端还是后端同学都需要根据我们的设计进行开发,最终完成整个系统。


因此,今天这篇文章并不是告诉大家有哪些前端UI框架或后台组件等..(相信这些大家也看得太多了,工作中都是套框架,能用得上的没几个),而是从交互上如何去看懂B端后台的基础逻辑以及以后自己晋升成产品经理或者交互设计师时,怎样去设计一个完整闭环的系统。


一、B端产品有哪些基础逻辑


B端产品和C端不同,C端产品大多数都是针对个人用户,设计的关系结构相对来说比较简单,每一个用户拥有的权限都是一样的,例如微信、淘宝等,我能看到的页面你都能看得到,很少不存在权限差异问题。


而B端产品的用户一般都是企业,企业用户一般会管理着多个角色,也就是角色多元化(例如一些校园系统角色就分为:普通教师、级长、主任等角色),不同的角色对系统的需求和职能也不一样,我们需要根据角色的需求去划分不同的权限,让他们互不干扰但又满足他们的需求问题,因此B端产品的基础逻辑比C端产品相对复杂。


看完上面文字的同学可能蒙了,又角色又权限的,能不能说点人话?


行!其实很简单,B端系统无非三个逻辑(也是三个页面):用户管理、角色管理以及菜单管理。(有些系统因为业务需求可能有部门管理,那么算上部门管理就四个)

二、什么是用户、角色跟菜单


(1)什么是菜单


为什么我把菜单放到最前面跟大家讲?是因为菜单管理比前面两个相对简单,而什么是菜单也特别好解释,大家可以直接认为系统左侧的页面列表就是菜单,系统中拥有多少个页面那么就有多少个菜单,你的菜单越多就以为着你的权限就越多。


菜单管理的作用就是用于管理员对整个系统页面的管理(管理最主要就是增删改查),而有一些公司为了减少开发工作量会直接不要菜单管理,有多少个页面都由代码直接写死,管理员不能通过页面进行人工配置,这样会导致以后扩展会非常麻烦,当然了,有一些系统的菜单几乎不改的话,代码写死也没问题。



(2)什么是权限


在讲解用户之前我需要提前跟大家讲一下什么是权限,准确来讲应该是权限分为哪些?


在目前的后台系统中,权限一共分为三种权限,分别是菜单权限(也就是上面介绍的)、数据权限以及操作权限。


菜单权限决定了用户有没有这个页面,例如学校系统中,主任有看到所有教师的教学数据的界面,而教师却没有这个功能,那么在给主任新增账号的时候就应该把对应菜单赋予进去。看上去很复杂,其实具体操作就是新增的时候把对应的菜单勾选上就可以了。



数据权限则决定用户能不能看到对应的数据。还是学校系统的例子,初中部主任只能看到初中部所有教师的教学数据,而高中部主任也只能看到高中部教师的教学数据,不同用户能看到的数据也是不同的,所以在新增的时候需要给用户配置(一般配置就是勾选)好对应的数据权限。


但是这里有一个问题,配置数据权限时我们如果一个一个人去勾选配置的话会特别的麻烦,假如初中部主任只能看到初中部的老师,那么我在给他配置账号的时候需要一个一个的初中老师勾选上,张三、李四、王五..等等,如果人多的话可能需要勾选成百上千次,用户体验就会变得特别差,因此现在的系统在配置数据权限时都是以部门为单位进行配置,也就是说,直接选择部门就代表着拥有整个部门的数据权限。


最后操作权限即决定了用户有没有对数据进行操作(一般是增删改查)的功能。还是上面的例子,初中部主任拥有查看教师的页面以及数据,那么他能不能对教师们的数据进行增删改查或者导入导出呢?这就取决于操作权限的配置了。目前很多的后台系统在配置菜单权限的时候同时需要把操作权限进行配置(因为只能先有页面才能进行操作),操作权限一般就是增加、删除、修改以及查询,当然如果页面还有导入导出或者其他功能,这些也需要在操作权限中进行配置。


(3)系统中的用户


用户其实也很容易理解,B端系统的用户其实就是需要登录进系统的账号,所以有一些系统的用户管理也叫账号管理。


因此用户管理的作用就是对登录进系统的账号进行增删改查等,当我们需要对别人提供一个账号时,我们就新增一个用户的账号密码给他们,直到他们用完了再把他们的账号进行删除。


那么问题来了,上面我们说到,不同的用户可能有不同的需求问题,那么就意味着我们每一个用户给要他们分配不同的菜单去做他们的事情。


例如在学校系统中:普通教师只负责自己班级学生的成绩录入,所以普通教师只有班级成绩录入的菜单,但是学校主任却不一样,他不仅仅能看到各班学生成绩,还能根据各班成绩进行对比分析,年级学生排名等等..


因此在刚开始的传统权限系统中,我们会直接把相应的菜单权限、数据权限、操作权限赋予给用户,每新增一个用户我们就选择好所有的权限都勾选上赋予给用户,最后提供给用户进行操作。


然而这种操作方式有一个弊端,就是如果每新增一个用户,系统管理员就需要重复进行勾选相同的权限,那么就会耗费大量的精力(一个用户要配置的权限特别多,如果用这个方式操作的话新增一个用户可能就需要花费很长时间)。因此,为了解决这个问题,我们在用户与权限之间建立了角色管理。


(4)角色的作用


系统中角色的定义其实跟生活中是一样的,我们把固定的权限集合到一起从而形成了角色。例如,生活中UI角色就负责页面的视觉设计,而交互设计师则负责了产品的逻辑或者用户体验设计,这些角色拥有的权限一般很少变化,也几乎不会进行删除或者修改,就好像UI设计师或者交互设计师这些角色不会一时半刻就被完全消灭一样。

有了角色,我们可以先把对应的权限集合赋予给角色,然后新增用户时,再选择用户对应的角色即可。


这样做的好处是什么呢?好处就是当我们新增用户的时候,如果是相同角色的用户,我们不再需要重复去大量勾选相应的权限了,只需选择好该用户是那个角色就可以间接对用户赋予权限,并且后续要对用户进行权限的修改也十分便捷。因此,在现在的后台系统中,大多数都是采用权限赋予角色,然后新增用户时再选择用户对应的角色的方式。


三、整体流程


如果看完上面的知识点还有点懵的话也没关系,这部分给大家展示在后台系统中菜单管理、角色管理与用户管理的实际应用是怎样的。


第一步先查看菜单管理有哪些内容,一般情况下,一个成熟系统的菜单页面几乎是已经固定不变的,那么也就是说菜单管理列表中所拥有的菜单都不需要怎么操作,列表中有多少数据就代表着系统总体有多少菜单。


第二步进行角色管理,如果是成熟系统的话,角色管理的角色也早已经分配好了,我们并不需要过多的进行操作,但如果是刚研发完成的系统,那么我们就需要根据现实的用户需求进行角色的设置,具体添加角色的主要参数包括角色名称、菜单权限、数据权限以及操作权限(其实也就是上文介绍的三种权限),其他的参数都是根据自身业务进行添加。


最后一步就是用户管理,配置好角色后,我们就可以根据需求进行用户的新增操作,例如现在我们需要新增一个账号进行登录系统,那么在用户管理页面中点击新增按钮,随后填写用户名称与密码,最后选择用户角色,点击确定按钮即可完成(因此,新增用户的三个必要参数是用户名、密码以及角色,有部门的需要填写所属部门,其他参数根据系统业务进行添加)。添加完成后你们可以试一试使用自己所填写的用户名密码登录后台系统,随后体验一下作为其他角色是否能完成自身需要的业务。


四、最后总结(特别重要)


用户管理、角色管理以及菜单管理是B端系统最基础的逻辑,也是同学们将来需要转岗B端交互设计师或者产品设计师所必须掌握的知识,上面所介绍的仅仅是RBAC模型中最简单的一种,现实设计中可能出现各种情况,因此关于这次的B端产品设计我想给大家几点Tips:


    1、在现实开发中,后台系统并不一定像我上面所说的那么完善,有些系统并不需要菜单管理,老板要求直接代码写死就好了,又或者有些系统就只有一个角色,那么角色管理也不需要了,这些情况都是有可能发生的,所有我们做设计的时候除了运用自己的知识以外,更多的是工作经验,知识是死的,人是活的,永远别忘了设计的本质是解决用户需求问题。

    2、很多时候后台的逻辑管理会比我上面说的要复杂的多,例如一个用户可以拥有多个角色吗?不同角色能不能有相同的权限?如果有角色被删除了,那么该角色关联的所有用户应该怎么处理?可能你认为这些并不是自己目前需要考虑的问题,但是除非你以后并不想晋升到更高的位置,不然这些问题以后肯定会遇到的。

    3、上面介绍的管理操作都是基于超级管理员账号(admin)进行操作的,如果你拿一个普通账号的话一般是没有对应的菜单权限,我担心有同学看完文章后马上登录自己的后台系统进行操作,接着登录进去找了半天都没有找到对应的菜单在哪里。

好了,最后希望文章能让大家有所收获,如果大家有不明白或者其他想法的话,欢迎大家一起探讨,共勉。

文章来源:优设网    作者:北沐而川


分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档