精华内容
下载资源
问答
  • PAGE1 / NUMPAGES68 公司地址北京市首体南路6号新世纪饭店写字楼6层 (100044) 总 机(010)68492345 传 真(010)68492726 WEB版交互设计规范 文档说明修订记录 文档类型产品规范 适用范围 WEB 版交互设计 适用人员 ...
  • 网站Web产品系统交互设计视觉规范   •本文档对网站系统页面视觉设计进行规范,本文档旨在通过统一规范,简历页面框架和元素设计、布局与交互的通用规则,在保证页面美观、易用、一致的前提下,提高页面批量生产...

    网站Web产品系统交互设计视觉规范

     

    •本文档对网站系统页面视觉设计进行规范,本文档旨在通过统一规范,简历页面框架和元素设计、布局与交互的通用规则,在保证页面美观、易用、一致的前提下,提高页面批量生产和统一布局效率。

    1.0阅读对象
    •本规范以系统开发及后期维护人员为阅读对象

    2.0UI色系
    •本系统UI主色系依据Web设计专业要求由白色与暗红色构成。

    •色彩的色域构成简洁、大方、国际化


    3.0UI色系构成
    主色       辅色
    需设计图标          色彩 与 色彩编号

    3.1色系构成与色值
    传统的VI手册,色值通常是以平面印刷为优先定义的(比如CMYK色或专色),网页上的某些色彩,也可以考虑采用纯度更高的近似色。
    LOGO
    Login regis
    导航
    辅助导航
    Tab
    Links
    Text
    Chart
    Button
    Table
    Dialog
    Slider
    Lcons
    Highlight/Error
    DatePicker
    FLinks
    C&P
    3.2讲解框架与元素的概念
    这张布局图,包含和传递了很多信息:整体效果、功能划分、色彩与造型、布局参数⋯⋯
    登录典型页面:
    4.0页面总规则
    •页面最佳适应1024 x 768 及其上分辨率
    •区块与区块之间的间隔为10像素
    •元素与元素的最小间隔为10像素
    •有明确的区域或元素宽度,高度最好为10的倍数,至少为5的倍数(如导航高度为30,按钮高度为20,树的当前菜单背景色高度为20)
    5.0页面框架类型
    5.1首页型视图
    5.2列表页视图
    5.3表单页视图
    5.4最终页视图
    5.5数据页视图

    6.0工作视图详解
    A页面导航区 目录区   主题信息区   状态版权区
    6.1简洁视图详解
    6.2分析视图详解
    由区域到元素,由整体到细节。接下来开始对各个功能区内部的元素进行规范。
    对各个功能区的元素布局进行拆分详解
    涉及:颜色,字体类型与大小
    6.3目录树区元素规范详解
    涉及:颜色,字体类型与大小及选中状态

    6.4版权状态区元素规范详解
    颜色,字体类型与大小


    7.0其它规范:
    7.1按钮和链接各种典型状态
    按钮:背景色与字体色 字体大小 与框体间隔
    7.2属性页:字体颜色与大小 前景色与背景色
    7.3小部件:
    日历、进度条、ICON、对话框等其他元素规范
    涉及:颜色,ICO图标不同状态,对话框的符号及框体布局等
    8.0结束语
    • 本视觉规范为页面视觉设计的一般性规则,因前台技术限制与浏览器兼容性差异、平面效果与最终代码实现效果可能存在微小差异。
    • 超出本规则规范的特殊页面建议单独绘制特征页
    9.0视觉规范的局限和扩展方式
    视觉规范要真正可用,还需要前端工程师切图、编写HTML/CSS/JS代码来实现网页的拼装、交互和与后台程序的衔接。

    展开全文
  • 注重规范视觉识别性。样式通常简洁易用,绚丽元素少,视觉上并不强调冲击力。专题页面时效性有限(大多专题是有推广活动时间限制的,过了这个时间,就很少会有人再访问该页面。),多为活动推广和吸引用户等内容...
  • 交互设计师

    2012-04-23 11:07:27
    1、负责淘宝网站、开放平台客户端的交互设计工作,并制定相关交互规范; 2、配合用户体验研究员进行用户访谈、可用性测试等用户研究工作; 3、通过用户研究和数据分析,制定产品信息架构、界面布局、功能引导、...

    交互设计师

    工作年限 5年以上
    学历要求 本科


    岗位描述 

    1、负责淘宝网站、开放平台及客户端的交互设计工作,并制定相关交互规范;

    2、配合用户体验研究员进行用户访谈、可用性测试等用户研究工作;
    3、通过用户研究和数据分析,制定产品信息架构、界面布局、功能引导、操作流程等优化方案,提升产品的易用性;
    4、协助视觉设计师和开发人员完成产品的最终实现,并负责产品的持续优化。
     

    岗位要求 

    1、有多年网页设计、软件界面设计经验,对交互设计有较深的理解和大量的实践,可以独立完成整个设计过程(对流程图、线框图等等交互设计方法能熟练应用);

    2、对用户体验方面的理论有较深的了解和认识,并具备一定视觉设计和XHTML/CSS等相关岗位的技术和技能;
    3、个性乐观开朗,善于和各种背景的人合作,充满好奇心,在每一个有趣的网站都拥有注册帐号;
    4、工业设计、计算机、心理学、平面设计、广告设计等相关专业本科以上学历;有良好的英语阅读能力;
    5、简历请附作品(必须有网页或软件界面设计作品,有平面设计、2D/3D设计作品或Design Spec类的文档更好)。

    展开全文
  • 很多著名的软件企业都有GUI设计规范,如 Apple 和 Google,得益于这些设计规范(或者叫指南),设计者才可以开发出符合平台视觉及交互要求的UI。其实除了这些大公司,软件公司都最好有自己的GUI设计规范,即使这个...
    原文:[设计]GUI设计规范的规范

    1. 前言

    很多著名的软件企业都有GUI设计规范,如 AppleGoogle,得益于这些设计规范(或者叫指南),设计者才可以开发出符合平台视觉及交互要求的UI。其实除了这些大公司,软件公司都最好有自己的GUI设计规范,即使这个规范简略一些,也可以帮助团队改善工作、提高工作效率及传递品牌价值。

    2. 什么是GUI设计规范

    各个公司的GUI设计规范各不相同,有的十分详尽,有的比较简略;有的只有设计口号,有的严格到每个元素的像素都有规定;有的注重设计,有的提供了完整的代码示例;有的提供了一整个网站,有的只是几页PDF。

    总的来说,GUI设计规范是指导设计人员完成GUI设计的规则和范例。

    3. 为什么要做

    • 共享智慧,使好的设计可以复用;
    • 无标准则无改善,设计规范可使同样场景的设计不管谁来设计都能达到标准,并以此为基础不断地完善;
    • 统一的成果,避免混乱,无论哪个产品哪个页面都能有一致的体验;
    • 提升能力,团队不必思考重复性的设计,有更多时间进行更深层次的设计,上司也可以直接使用设计规范对部下进行更有效的教育;

    4. 为谁做

    设计规范应该是为公司全体做的。

    公司用设计规范体现公司的设计品味和企业价值;设计人员和开发人员通过设计规范协助自己的工作,测试人员以设计规范作为UI验收的标准;对营销部门设计规范也是重要的参考资料。

    5. 由谁做

    设计规范应该由使用到这些设计的人制作。

    • 设计人员主导设计规范的制作;
    • 开发人员告诉设计人员有哪些功能可以实现,哪些不可以,以及最新的技术潮流;
    • 营销人员的意见至关紧要,因为只有他们直接面对用户,而且他们清楚各种奇怪的行业规则;

    6. 包含什么内容

    虽然设计规范各种各样,有的很简单,有的简直可以作为前端教学,不过大部分都包含以下各部分:

    6.1 设计理念/设计语言

    各个设计规范都有不同的设计理念(或不同的设计语言),这是最能体验公司品味的地方。这方面通常通过颜色、字体、布局、公司Logo的使用等展示。

    38937-20180315145237515-1058103059.png

    6.2 原则

    设计原则有很多种,如格式塔原则、亲密性原则等,设计规范应该将这些不同的原则提炼、整合成适合自己团队的设计指导原则。

    38937-20180315145244058-49818860.png

    6.3 模式

    模式是指从经验中提炼出来的解决某一类问题的方法论。如业务中多次遇到数据展示的场合,设计人员会从过去的经验总结出最适合数据展示的一种或多种做法,并成为数据展示模式。

    38937-20180315145249790-999857960.png

    对营销/产品/需求人员来说模式也是它们最好的武器。假如客户要求UI进行某些改进以符合他的要求,比起这些:

    “我不清楚怎么做,我回去问问研发团队能怎么做吧。”
    “我不清楚能不能做到,这还需要研发团队配合。”

    客户更满意下面这种回复:

    “关于这个需求,我们有这几种解决方案,它们各有…的优点,您可以参考一下。”

    6.4 组件

    组件是平台提供的,或公司购买/研发的控件、字体、图标、主题等资源库。很多设计规范还提供了组件的使用代码示例。

    统一的控件可以使各个软件有统一的体验,也减少开发人员选择和学习控件使用方式的时间。

    38937-20180315145301088-1034730205.png

    6.5 其它

    很多设计规范还把动效和交互单独说明,可能由于这是比较深入的内容或者难于在PDF上展示,所以也有不少设计规范没有这些内容。设计自己团队的设计规范时可以把这些内容留到最后。

    7. 什么时候做

    设计规范的工作应该随时都在进行。
    设计其实是有生命的“生物”,它每天都在变化,不断发展。尤其在软件行业,需求、技术、设计潮流、竞争对手不断频繁变化,甚至休假回来连自己公司的母公司都变了。另外,由于设计规范中每一条内容都是经过精心制作的,很容易产生“不想破坏以前的心血”这样的思想,导致过时的规范迟迟不能更新。

    设计规范一旦落伍就容易不被认同,渐渐地就没人看,没人执行,最后设计规范将变得毫无意义。所以设计规范应该持续改进,以使得基于设计规范的工作不断得到改善。

    8. 怎么才能做好

    8.1 简单明确

    不要太信任设计人员和开发人员的阅读能力,何况夹杂着各种术语或英文单词,大段大段的说明很可能变成天书。要做到简单明确,可以这样做:

    • 精简语言,使用明确的语句,删除艰涩的术语和长语句;
    • 使用列表代替大段的文字;
    • 使用图片或视频;

    38937-20180315145306668-1742754969.png

    8.2 范例

    既然是规范,范例是必须的。

    38937-20180315145314390-2143865589.png

    8.3 统一

    统一并不是指某个控件只能有一种样式,某个功能只能有一种模式。而是指相同或相似的场景下,使用的样式或模式应该统一。

    坏的设计规范有可能参考控件库的指南把控件的所有样式都展示出来而没有说明应该在什么情况下使用,而好的设计规范会给出元素需要统一的部分,如间距、边框、字体、颜色,然后给出各种情况下的做法:
    38937-20180315145319130-1683565465.png

    如果设计规范自己都不统一,不能自圆其说,使用者将无所适从。

    8.4 代码示例

    有些设计贵伐会将代码也展示出来,以方便开发人员。

    38937-20180315145324135-606475348.png

    8.5 案例

    设计规范最好有已成功的案例,这才是对设计规范最好的展示。

    9. 设计规范网站分享

    以Button为例,比较一下各大公司的GUI设计规范

    Apple

    38937-20180315145329088-1644975310.png

    Google

    38937-20180315145334258-2012303575.png

    Microsoft

    38937-20180315145339703-794149485.png

    Ant Design

    38937-20180315145345266-520146502.png

    SAP

    38937-20180315145351048-1303144522.png

    salesforce

    38937-20180315145357302-1212583411.png

    yelp

    38937-20180315145401706-180947650.png

    Atlassian

    38937-20180315145407365-287800375.png

    Buzzfeed

    38937-20180315145412553-904631061.png

    10. 结语

    希望这篇文章可以帮组读者建立自己团队的GUI设计规范。尤其是对桌面开发的团队,由于缺乏GUI设计规范导致很多桌面软件的设计都马马虎虎,真的希望将来这点可以得到改善。

    最后再推荐一些设计规范聚合网站:
    styleguides.io
    findguidelin.es
    Brand Style Guide Examples

    posted on 2019-01-11 16:13 NET未来之路 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/lonelyxmas/p/10255728.html

    展开全文
  • 1. 负责公司Web端的交互设计和开发工作,建立交互框架和规范; 2. 与产品经理、市场和技术部门合作,不断提高用户体验,保证用户价值的最大化实现; 3. 按照项目需求进行定性的用户研究,定义用户角色创建使用...

    一,具备基本知识与技能储备

    1. 负责公司Web端的交互设计和开发工作,建立交互框架和规范;
    2. 与产品经理、市场和技术部门合作,不断提高用户体验,保证用户价值的最大化实现;
    3. 按照项目需求进行定性的用户研究,定义用户角色及创建使用场景;
    4. 协调UED相关资源,完成负责项目的各种设计任务(可用性测试、用户研究、视觉设计、原型制作等);
    5. 跟踪和分析已有产品的用户体验;

    二,实战要求

    1. 熟悉最少一种的流行JavaScript框架,精通jQuery者优先考虑;
    2. 3年以上的行业经验;
    3. 【重要】能提供商业作品,请投简历同时附上近期JS交互应用的作品,面试中需简要介绍情况;
    4. 精通常用的Web前端技术,HTML/HTML5,CSS,JavsScript等; 熟悉ajax等技术的使用; 能够熟练运用Firebug等开发调试工具,对页面的CSS和JavaScript进行调试;能独立完成各版本浏览器的兼容性处理工作;
    5. 对用户研究 (User Research) 及可用性研究(Usability Study)有深入了解;
    6. 追求卓越,不甘平庸。逻辑能力强,有坚强的意志力;
    7. 有在创业公司工作过的经验者优先考虑;
    8. 了解后台PHP编程语言者优先考虑;
    9. 有移动APP交互设计经验者优先考虑;

    展开全文
  • 在这个过程中参与讨论的有产品、设计开发,三方并行参与最后落地一个可实施优于用户体验及视觉的方案。通过每一些细微的点的重复思考、探索慢慢的形成了一些可适用的大多数场景的可寻规律。 设计规范存在的目的:1...
  • 一说到组件,大部分初级设计师和中级设计师的脑海里只会蹦出弹窗、Toast操作列表等具体的概念,没有一套属于自己的组件分类体系,这样对于视觉设计、交互设计或产品设计的系统学习来说都是不利的。iOS14概念设计...
  • 一说到组件,大部分初级设计师和中级设计师的脑海里只会蹦出弹窗、Toast操作列表等具体的概念,没有一套属于自己的组件分类体系,这样对于视觉设计、交互设计或产品设计的系统学习来说都是不利的。iOS14概念设计...
  • 一说到组件,大部分初级设计师和中级设计师的脑海里只会蹦出弹窗、Toast操作列表等具体的概念,没有一套属于自己的组件分类体系,这样对于视觉设计、交互设计或产品设计的系统学习来说都是不利的。iOS14概念设计...
  • QML是一种声明性语言,允许根据用户界面的视觉组件以及它们之间的交互方式和相互关系来描述用户界面。它是一种高度可读的语言,旨在使组件能够以动态方式互连,并且允许在用户界面内轻松地重用和自定义组件。使用该...
  • 在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和...它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,.
  • 常用CSS选择器说明...最终为用户呈现不同交互视觉风格的前端页面。本文主要对常用CSS选择器基本概念与常用属性选择器进行说明与实例展示。CSS Selector类型划分按照W3C技术规范划分目前CSS Selector主要类型可以...
  • 常用CSS选择器说明...最终为用户呈现不同交互视觉风格的前端页面。本文主要对常用CSS选择器基本概念与常用属性选择器进行说明与实例展示。CSS Selector类型划分按照W3C技术规范划分目前CSS Selector主要类型可以...
  •  Material Design大家并不陌生,Google为了保证Android平台上交互及视觉规范化提出了Material Design这个设计理念,它包括视觉交互等多个方面。本文,在初步介绍Material Design的基础上,以一个开发者的视角来带...
  •  UI设计师岗位的主要职责描述1 职责: 1、负责公司项目的整体设计工作,主要包括小程序及Web网页视觉及交互设计:根据产品定位,研究目标用户的审美倾向与需求,构思UI创意,制定风格选型,建立完善的设计规范,...
  • 产品经理常用组件库,内容丰富,包含视觉规范/布局/内容控件/常用模板/项目管理表格/标注模板/界面首页内容页模板/交互效果等各方面元素,一套在手,原型设计不用愁
  • AntDesignrplib.zip

    2020-07-26 21:04:13
    Ant Design源自蚂蚁金服体验技术部的后台产品开发,经过大量的项目实践和总结,希望能抽象出一套企业级的交互视觉规范,统一后台项目的前端 UI 设计,屏蔽各种不必要的设计差异和前端实现成本,解放设计和前端开发...
  • 软件UI工程师工作的岗位职责 软件UI工程师需要与产品开发团队合作,配合项目负责人,制订UI设计规范及流程,并对项目进行UI设计。以下是小编整理的软件UI工程师工作的岗位职责。 软件UI工程师工作的岗位职责1 职责:...
  • UI设计简介

    2020-12-23 17:36:26
    UI设计:(web网页设计,从网页的构成、视觉规范、详情页、专题、推广页设计、web端类型、原型图的设计、原型出效果图、前端代码,移动端icon图标设计、产品及交互设计、视觉设计、动效设计、h5面试) UI设计:手机...
  • 什么是bfc

    2020-03-01 22:58:18
    BFC的含义 很多同学学到BFC的时候会比较难以理解,首先我们要知道BFC是什么东西, ...它是块盒子的布局发生浮动体彼此交互的区域。我们先来认识另一个东西,视觉格式化模型 视觉格式化模型 什么是视觉格...
  • 本次人工智能大会将为你...应用,工具,架构,安全与人工智能交互:设计,指标,产品管理,机器人模型方法:增强机器学习,TensorFlow,深度学习,GAN,自然语言处理理解,语音识别,计算机视觉这么多内容,我
  • UI设计师的工作职责精选 UI设计师负责按照平台建设和网络推广要求制作各种不同类型的美工作品,完成平台界面的UI... 3、负责制定和维护产品的UI设计标准和规范标准和规范的实施和应用; 4、掌握人机交互设计理...
  •  2、 负责重点项目的原型设计和产品流程设计、视觉设计,优化网站和移动端的设计流程和规范,制定产品 UI/UE规范及文档编写; 3、负责使用PS、AI、illustrator、MarkMan、Sketch、AE、Flash、Visio/Axure/Pencil等...
  • fe-speed 1. 开发语言 ...antDesign 规范的后台交互视觉风格 3.支持环境 chrome 49以上 node 建议最新稳定版本 3. 业务简介 极速干线是一个后台管理系统,在供应链(TS)生态中承担运输管理系统(T...
  • 软件UI工程师工作的岗位职责 软件UI工程师需要与产品开发团队合作,配合项目负责人,制订UI设计规范及流程,并对项目进行UI设计。以下是小编整理的软件UI工程师工作的岗位职责。 软件UI工程师工作的岗位职责1 职责:...
  •  2、负责APP整体风格、视觉效果、用户操作体验策划设计; 3、把握设计趋势并提出创新性的设计思路; 4、熟悉用户习惯,注重用户体验并且具有交互和平衡能力; 5、参与设计体验、设计流程和视觉规范的制定; 6、...
  • 应用系统的设计和网页设计的感觉不一样,不只是美观,更多应该在操作体验及视觉舒适度上下足功夫。 如果颜色太鲜艳或者太暗沉,都会让使用者遭受眼球上的磨难。 一些按钮和操作焦点没有做好区分和规范,也是致命的...

空空如也

空空如也

1 2 3
收藏数 57
精华内容 22
关键字:

视觉及交互规范