精华内容
下载资源
问答
  • web界面设计原则
    万次阅读 多人点赞
    2019-07-08 12:06:32

    在web界面的设计过程中,如果全凭自己的感觉和认识来组合布置设计,很可能自己觉得效果不错,而实际用户体验并不好,用户体验不好有什么后果就不用多说了吧,因此为了更好的进行界面搭建设计,提供几个专业成熟的原则,可以在工作中借鉴遵循


     

    一致性原则

    ​ 对于相同或相近的业务功能,操作方式保持一致,培养用户的操作习惯。比如查看联系人功能,如果有的页面是点击弹出窗口查看,有的页面是点击从右侧展出内容,就会让用户产生困扰,降低用户体验。所以要不就统一的弹出窗口查看详情,要不就统一的从右侧展开详情。

    ​ 此外,对于组件颜色、组件尺寸、组件摆放位置也尽量保持一致。比如弹出窗口,类似的业务不能有的窗口大,有的窗口小;一个查找联系人的输入框,不能有的页面放在右侧,有的却放在左侧;确认按钮,不能有的页面是蓝色,有的页面是灰色。

    主次性原则

    ​ 避免并列过多操作让用户选择,在不得不并列多个操作时,需区分操作主次,减轻用户的选择难度。

    扁平化原则

    ​ 这里说的扁平化除了指界面效果的扁平化外,还包含了操作的扁平化这一层意思。即:

    ​ 1、降低页面层级,能够一个界面解决的不要弹出窗口,能够弹出一层窗口解决不要弹出两层窗口;

    ​ 2、降低操作复杂度,以清晰明了的方式让用户完成操作。比如对于复杂的表单填写进行分步处理,每一步给出指引;

    ​ 3、降低鼠标点击次数。比如一个新增用户操作,如果是每增加一个用户都要用户点击弹出一次窗口,完成后点击“确定”窗口关闭,添加第二个人再弹出窗口。不如加入一个“确定并继续添加”按钮,这样窗口并不关闭,让用户每次添加用户都可以少点两次鼠标,降低用户使用系统的疲劳感;

    ​ 4、不要用提示框阻断用户。很多时候如果不是有必要,不要弹出一个confirm让用户确认。如果仅仅是提示用户操作已完成就更没有必要让用户再点击一下确认按钮了,贸然的阻断用户是很不友好的,这时需要使用toast这类非阻断提示,提示出现后几秒自动消失。而不是为了提示一下,阻断了用户的操作。

    及时反馈原则

    ​ 任何一个产品,即使用户界面做的再好,也离不开用户引导和信息提示。操作过程中尽可能将状态的反馈给用户,即时的响应会给用户增加信赖感。包括:

    ​ 1、加载反馈。比如当用户点击一个按钮时,其实后台已经开始处理业务,但如果界面无任何反应会让用户觉得操作失败,所以当一个操作需要一定时间完成时,就需要即时告知进度,保持与用户的沟通;可以给一个进度条或者一个信息提示,甚至是一个转圈的小图标表示正在进行中也可以;若加载时间较长,应提供取消操作。

    ​ 2、录入反馈。比如操作过程中可通过校验规则,让用户及时发现并纠正错误;使用输入框组件的自动完成功能,用户输入时,下拉列表会随着输入的关键词显示匹配项;实时搜索,随着用户输入,实时显示搜索结果等。

    ​ 3、结果反馈。操作结束后,给出提示告知用户。尽量使用toast这类非阻断式提示,这是不打断用户操作的轻量级提示方式。必要时也可使用弹窗反馈,弹窗是很强的反馈机制,只有在传递非常重要,且可操作的信息时才需要使用它。

    有参考原则

    ​ 除非你是个优秀的用户体验设计师,否则请不要凭空臆想的搭建界面,而是尽量基于已有的模板进行稍加改动。常用的几个web框架提供了很多界面布局模板供你选择使用,如果你见过其他感觉不错的设计方案,也可以模仿着别人的案例搭建界面。总之,你的界面最好是有例可循,才可以避免界面丑的太离谱。

    更多相关内容
  • WEB界面设计

    2017-11-23 11:39:50
    WEB界面设计WEB界面设计WEB界面设计WEB界面设计WEB界面设计
  • web界面设计

    2018-09-28 09:31:48
    word介绍文档,介绍web模型、标准,如何设计较好的web 界面
  • 人机交互技术_06 Web界面设计.ppt
  • WEB界面设计规范

    2019-03-05 17:43:52
    WEB界面设计的规范设计,主要讲解了不同的分辨率,响应式布局。
  • 《瞬间之美:Web界面设计如何让用户心动》是界面设计领域的畅销书中文版。书中通过30 多个故事,阐明了如何将好的设计原则运用到实际的Web 应用程序界面中,使界面引人入胜,如何创造完美的瞬间,给用户以美好的体验...
  • 智能家居web界面设计

    2014-04-11 17:27:21
    智能家居网页控制,WED代码,使用S3C2440开发板上面运行的
  • Web界面设计PDF版

    2013-08-29 16:33:26
    关于UI很不错的电子书,Web界面设计打击,适合web界面设计、开发、研究人员、爱好都和web项目管理员人参考。收集自网络
  • Web界面设计及UI设计

    2016-10-03 23:33:21
    Web界面设计及UI设计就是要多看多学,这里提供Web界面设计及UI设计、WEB界面设计.pdf、Web界面设计-样章.pdf、交互设计那些事儿.pdf和Web界面设计规范.doc,需要的人可以下载看看
  • Web界面设计(中文)

    2013-08-28 15:04:36
    Web界面设计(中文)
  • 人机交互Web界面设计文档(含界面图片)
  • Web界面设计(中文)-2

    2013-08-28 15:20:37
    Web界面设计(中文)
  • web界面设计要素及基本设计规范

    千次阅读 2020-04-04 21:10:00
    Web界面又最基本的构成单元组成,然后根据的既定的需求进行设计。所以,要明确的知道Web界面应该包含哪些基本要素及基本的设计规范,才能够进行高效的设计输出,当然,还要知道当下的web主流的设计方式有哪些。 设计...

    Web界面又最基本的构成单元组成,然后根据的既定的需求进行设计。所以,要明确的知道Web界面应该包含哪些基本要素及基本的设计规范,才能够进行高效的设计输出,当然,还要知道当下的web主流的设计方式有哪些。在这里插入图片描述

    设计规范存在的目的

    1
    在多人的团队里,通常不同的人员负责不同的流程,如果没有设计规范,不同的设计师就会对相同的组件做出不同的方案,以避免同一项目出现设计控件混乱问题
    在这里插入图片描述

    2
    规范导航:UI设计规范具体尺寸可以到搜优(SooUI)导航查找,各种UI设计常用的规范尺寸都有收纳。

    web设计尺寸

    具体设计尺寸在这里插入图片描述

    分辨率
    在这里插入图片描述

    首屏内容
    在这里插入图片描述

    展开全文
  • web界面设计笔记

    2016-10-29 13:50:47
    web界面设计的笔记,xmind格式,需要xmind打开
  • web界面设计(一)

    千次阅读 2016-12-01 19:43:36
    Web界面设计 一 指引客户 1.令人心动的第一映像 发现页面布局 不是你选择页面布局,而是它选择你 引导客户的视线 利用对角线原则 使用色彩来吸引用户 重点使用反色或者深色表示 凸显个性 可以使用符号来...

    Web界面设计

    指引客户

    1.令人心动的第一映像

    发现页面布局 不是你选择页面布局,而是它选择你

    引导客户的视线

    利用对角线原则

    使用色彩来吸引用户  重点使用反色或者深色表示

    凸显个性 可以使用符号来统一设计风格 logo

    2.导航之道

    告诉软件应该做什么 设计菜单不应该基于对象,还是基于任务(动宾词)

    链接生来不平等

    标签抬起头来看路

    学习

    1 开门见山 为扫描设计

    欢迎词没有用,扫码出关键词

    2.为界面做标记

    假设用户完全不了解我们的软件,给他们足够多的指引去完成操作

    3.生动的视频

    搜索

    1.提出搜索词建议

    运用错误避免机制,使用自动完成框(搜索) 搜索词避免干扰用户

    2.依赖那些有效的标准

    3.高级搜索也应该简明

    递进显示

    深入

    1.视频播放标准化

    2.巩固你的表单布局 

    推荐使用标签左上布局

    让你的确认和取消更完美

    首先方式和第二选择

    3.驾驭wizard向导

    Wizard是一种多步骤的交互,引导用户一步步去顺序处理

    4. 纠错也要表扬

    5. 简化长表格 尝试让交互看起来更容易

    6. 让他们登录(密码错误 和用户名错误)

    7. 计算字符串 字符到达限制

    8. 用虚拟视觉效果,提前将效果展示给用户,来满足用户的预期,减少等待感

    9. 提供引导邀请

    参与

    1.创建个人资料

    递进的增加 设计一种可以自动变化的个人信息,以便用户交流

    分层式值注册只需要填写基本信息,对特色用户可以增加一写特定信息

    将信息变成仪表盘(图片)

    提供空白页资料

    2.编辑

    正确的时间显示正确的工具

    把高级的东西隐藏起来

    3.开展社交活动

    4.显而易见的博客

    博客应该有利于阅读

    博客应该鼓励去交流

    引导人们去阅读更多的日志(自己的和别人的) Trackback

    5要求讨论

    让客户发表意见, 和用户之间建立良好的信任, 启用自己的otaku

    ,标记恶意 评论者

    6 得到一个好评的分数

    清晰胜于效率

    信息管理

    RSS(Really Simple Syndication)

    推广某项新技术时应该它通俗易懂

    自定义标签

    让系统通知来管理中断(改版 更新)

    退出

    化繁为简 不要试图阻止用户退出 可以设置退回到当初登录的界面

    抹去那些尘封的用户

    可以提供一些产品的新特性提醒用户再次登录

    方便的转移用户的信息 联系人

    总结

    了解用户希望做些什么,界面希望用户做些什么,不断思考怎么样去鼓励人们输入,编辑,分享,搜索... 激励用户完成他们所想完成的事 我们也应该努力提高用具的使用效率

    http://wenku.baidu.com/view/1b42af4cf01dc281e53af0bd.html?re=view

    http://wenku.baidu.com/view/ddd96c072b160b4e767fcfd4.html?re=view

    常识

    Web界面是人机交互的一个延续 web界面的外观直接关系到web站的是否能吸引到用户的重要因素  人性化是web界面设计的核心。

    以用户中心设计原则

    既需要考虑用户的共性,还要考虑不同的人群的差异

    考虑目标的不同行为方式(年龄 性别 地区 种族 生活习惯 受教育程度)

     一致性  

    内容包括 网站显示的信息  数据 文字等内容

    形式包括 web板式设计 构图 色彩 风格等

    网页的形式为内容服务,不同的受众网页设计形式也不一样

    页面元素的间距 文本 标识 风格 色彩等上保持一致性

    简介与明确原则

    使用醒目的标题

    限制所用的字体颜色 字体种类

    界面所有元素都有明确的含义和用途

    界面上所有元素都应该有明确的含义和用途

    三次点击原则

    体现特色的原则

    特色鲜明

    了解用户的基本情况

    合理逻辑结构

    良好的导航设计

    应该从使用者角度出发。

     

     

    展开全文
  • 【人机交互技术】Web界面设计

    千次阅读 2019-07-15 22:35:38
    2)熟悉 Web 界面设计的基本思想和原则 3)掌握 Web 界面设计的工具和技术 二、实验内容与步骤 1)实验内容: 要求根据 Web 界面设计的原则(简洁、一致性、对比度),进行 Web 界面规划、 概要设计和设计要素的选择,...

    一、实验目的和要求

    1)熟悉 Web 站点的信息交互模型和结构
    2)熟悉 Web 界面设计的基本思想和原则
    3)掌握 Web 界面设计的工具和技术

    二、实验内容与步骤

    1)实验内容:
    要求根据 Web 界面设计的原则(简洁、一致性、对比度),进行 Web 界面规划、
    概要设计和设计要素的选择,利用一种界面设计工具(Axure/HTML5/Dreamweaver
    / Frontpage)完成网页设计。
    2)实验步骤
    选择工具: AXURE8.0
    **实现内容:**电商网站界面设计,包括首页、商品查询页、商品详情页、购物车、订单支付页的设计。

    三、详细界面设计

    1.设计原则
    **以用户为中心:**在本电商网站页面中,界面元素设计符合用户的使用习惯,如二级菜单,点击商品图片跳转详情界面等;
    **一致性:**在本电商网站页面中,网站的颜色以蓝色、红色、黄色为主基调、辅助以灰色和绿色;网站字体为黑体,根据标题、信息、按键等功能不同分为20、18、16、13号,界面中的矩形框均采用10像素的半径;
    **简洁明确:**在本电商网站页面中,网站层次简介明确,实现一种功能点击次数少;
    **体现特色:**在本电商网站页面中,商品信息为本网站的主要内容,可以使使用者清楚的了解网站的用途;
    **兼顾不同的浏览器:**使用AXURE进行网站设计,暂时没有兼顾到这一点;
    **明确的导航设计:**在主页、商品详情、查询、购物车、结算页面都涉及了导航菜单栏。 2.整体布局
    采用“三”字形布局。
    3.整体界面:
    首页:
    在这里插入图片描述操作入口明确,搜索框只有一个:
    在这里插入图片描述登陆、退出只有一个入口:
    在这里插入图片描述用户可以根据自身情况选择合适的语言,设有顶部导航栏,悬浮显示子菜单:
    在这里插入图片描述
    多语言界面:
    在这里插入图片描述
    当页面运行时,点击轮播图可进行切换:
    在这里插入图片描述
    鼠标悬浮时出现切换按钮:
    在这里插入图片描述
    鼠标悬浮时显示分类信息:
    在这里插入图片描述
    分类信息悬浮时可以显示下划线、变色:
    在这里插入图片描述
    商品信息悬浮变色:
    在这里插入图片描述
    查询页:
    在这里插入图片描述
    满足可及原则:
    视力障碍人士也可以使用:

    在这里插入图片描述
    在这里插入图片描述
    用户输入信息不正确时可以进行提示:
    在这里插入图片描述
    突出重点,大图显示图片,字体较小:
    在这里插入图片描述
    鼠标悬停变色:
    在这里插入图片描述
    鼠标按下时按钮变色:
    在这里插入图片描述
    商品详情页:
    在这里插入图片描述
    导航标签明晰有效,用户可根据导航条定位自己所在位置:
    在这里插入图片描述
    可以进行店内搜索:
    在这里插入图片描述
    购物车页,简洁清晰,通俗易懂:
    在这里插入图片描述
    当商品数量较多时,可对购物车内物品进行查询:
    在这里插入图片描述
    购物车中有商品的详细信息,并可以加购商品:
    在这里插入图片描述
    支付页:
    在这里插入图片描述
    可以显示当前购物进度:
    在这里插入图片描述
    可以挑选配送地址和支付方式:
    在这里插入图片描述
    可以计算商品总额并且还可以进行加购:
    在这里插入图片描述
    最后生成一个简明的订单信息:
    在这里插入图片描述

    展开全文
  • Web界面设计是由Bill Scott编著、电子工业出版社出版的一部图书,在Web已经进入崭新的时代的今天,界面的设计显得非常重要,本书就是基于独一无二的Web环境下、在创建丰富体验的过程中设计Web界面的最佳实践、模式...
  • web界面设计(1-2)

    2012-06-26 10:20:16
    这个是第一部分,供2个部分才可以一起解压。 当前的Web已经进入崭新的时代!... 本书既是一本Web界面设计指南,又是一本Web界面实例参考,适合Web界面设计、开发、研究人员、爱好者,以及Web项目管理人员阅读。
  • web界面设计的原则和总结

    千次阅读 2017-02-22 15:56:09
    web设计原则和推理:意符(Signifiers) :一种额外的提示,告诉用户可以采取什么行为,以及应该怎么操作;必须是可感知(eg:视觉、听觉、触觉等)。——摘自《设计心理学 1 》 可供性(Affordance) :也被翻译成...
  • Web界面设计是由Bill Scott编著、电子工业出版社出版的一部图书,在Web已经进入崭新的时代的今天,界面的设计显得非常重要,本书就是基于独一无二的Web环境下、在创建丰富体验的过程中设计Web界面的最佳实践、模式和...
  • 自己做的,在课堂上展示的web界面设计ppt
  • 第七章 Web界面设计 1.Web相关概念(第二版 P164)  Web是一个由许多相互链接的超文本(Hyper Text)文档组成的系统,用户通过Internet对其访问,进行交流与共享信息。资源通过超文本传输协议(HTTP)传送给用户...
  • Web网页登录页面设计

    2020-03-09 23:40:56
    利用web网页设计技术(html+css)进行静态登录页面设计开发,包含源代码 ,以及网页所用的图片
  • WEB界面设计(2-2)

    2012-06-26 10:21:08
    第二部分 当前的Web已经进入崭新的时代!本书涵盖了在基于独一无二的Web环境下、在... 本书既是一本Web界面设计指南,又是一本Web界面实例参考,适合Web界面设计、开发、研究人员、爱好者,以及Web项目管理人员阅读。
  • 《瞬间之美:Web界面设计如何让用户心动》是界面设计领域的畅销书中文版。书中通过30 多个故事,阐明了如何将好的设计原则运用到实际的Web 应用程序界面中,使界面引人入胜,如何创造完美的瞬间,给用户以美好的体验...
  • C# web 漂亮的界面及组件;C# web 漂亮的界面及组件;C# web 漂亮的界面及组件
  • Web界面设计》样章

    2009-07-30 19:24:01
    UI专家Bill Scott和Theresa Neil在他们多年实践经验和不懈探索的基础上,总结提炼出了Web界面设计的六大原理——直截了当、简化交互、足不出户、提供邀请、使用变换和即时反应,并以这六大原理为依托,以当今Web上...
  • Web界面设计规范(Web Form的UI设计)

    热门讨论 2009-04-11 12:48:25
    为了使最终设计出来的Web界面风格一致化,开发者之间相互协作更轻松,特制定此Web界面设计规范!1. 此规范适合所有Web Form的UI设计

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 325,542
精华内容 130,216
关键字:

web界面设计

友情链接: turbo编译码.rar