首页 > 众包知识 > 网站建设  > UI设计
web界面设计
web界面设计
界面设计是人与机器之间传递和交换信息的媒介,FaceUI称包括硬件界面和软件界面,是计算机科学与心理学、设计艺术学、认知科学和人机工程学的交叉研究领域。近年来,随着信息技术与计算机技术的迅速发展,网络技术的突飞猛进,人机...
1web界面设计教程
  主要介绍的是在现代Web应用程序中,对设计模式以及有效设计解决方案进行大量研究并得到结果的第一部分,您可以在下面找到10个收集到的实用界面设计技术以及在许多成功Web应用程序中得出的最佳做法。

  界面元素的需求在用户界面设计中,简单这个原则是很重要的。在任何时候,你在屏幕上显示越多的控制,您的用户将不得不花费更多的时间去搞清楚如何使用界面。当选择变少时,可用的功能变得更加明显更容易被发现。简化的界面虽然是不容易的,尤其是如果你不想限制应用程序的功能的时候。

  当你点击 Kontain 搜索框的搜索链接时,会出现一个类似于下拉菜单的层。所以,如果您需要来缩小搜索范围,您可以选择菜单中你所需要的类型。这些选项的聚合简化了搜索框。

  隐藏或者掩盖高级功能是使事情更加简单的一种方法。找出最常用的功能,并且把剩下的藏起来。你可以用弹出式菜单和操作来做这件事,这在桌面软件中很常见。例如,如果您的搜索栏拥有高级过滤器,把它们放在尾部的一个特别的下拉菜单中。如果用户需要使用这些过滤器,他们只需几下点击便可以开启这些功能。决定该保留什么隐藏什么不是一个简单的任务,也会取决于重要性和操作时的频繁程度。
  
  当你点击 CollabFinder 的搜索链接时你不需要打开不同的页面,相反,搜索框的控制菜单下拉下来,允许你能够直接开始搜索。

  专门操作根据情况选择合适的界面控件是很重要的。不同情况下可以用不同的方式处理,而且某些控件会比其他控件能够更好地完成他们的目标工作。

.......


查看全文 >>
2web界面设计软件
  最简单的网页制作软件:其实我们完全可以利用办公软件来设计网页,只要网页内容不太复杂或只涉及静态网页部分时,我们只需要利用办公软件即可快速生成网页。具体做法,首先设计好页面,然后另存为网页格式即可。

  Microsoft FrontPage,是一款轻量级静态网页制作软件,特别适合新手开发静态网站的需要,目前该应用很少用于制作网页。

  Dreamweaver网页制作软件,该软件已成为专业级网页制作程序,支持HTML、CSS、PHP、JSP以及ASP等众多脚本语言的语法着色显示,同时提供了模板套用功能,支持一键式生成网页框架功能。是初学者或专业级网站开发人员必备之选择工具。

  CSS Design:一款适合对CSS对进调试的专业级应用,能够对CSS语法进行着色,同时支持即时查看样式功能,特别方便程序的调试以及效果的比对。

  Flash动画制作软件:动画或动态图片是网页的重要组成部分,充分合理的使用Flash程序来设计网页元素,往往可达到意想不到的效果。

.......


查看全文 >>
3web界面设计思路
  实现效果图是最基本的工作 把视觉稿通过页面代码的方式表现出来包含了两个基本诉求:1.能够真实反映视觉稿;2.能够通过浏览器的兼容。这两个诉求的达成需要我们有追求细节的态度和一定的页面功底,能完成这两个内容就可以初步进入页面前端的从业者行列了,但这就代表着我们可以胜任页面开发的工作了?不,才刚刚开始! 

  与设计师的沟通和项目的参与沟通很重要。先抛出几个问题:我们有没有和设计师探讨过某些效果对低端浏览器渲染效率影响比较大?有没有探讨过部分效果可以用CSS3实现从而使得结构更加简洁清晰?有没有在代码和视觉中寻追求过平衡?页面前端的开发向基本用户,编写的代码也直接作用在浏览器上,我们有义务对页面的稳定性和渲染效率负责。我们也经常碰到项目在总体进度压力下导致的设计与页面前端开发同步进行,这时更有必要尽量多地获取项目信息,了解我们还要做些什么,这些可以帮助我们充分考虑重用和框架拓展。 

  良好的页面结构 页面结构的编写好比盖房的地基建设,其好坏会直接影响到CSS代码的质量、js开发、后台开发还会影响到以后的页面拓展、迭代和页面调整。拿到视觉稿后,不要忙着动手开始,多观察思考。先分析布局,划分框架,然后规划结构,编写代码。特别在大型项目中,合理使用模块化的开发不论从整体进行还是拓展维护都有相当大的好处。 

  关于hack 很多同学在页面开发时上网搜索最多的就是hack了,是否我们完全要依赖hack来实现页面兼容性,答案是否定的。大家经常比喻IE6向我们撒了一个谎,结果我们要再撒一百个谎来圆这个谎。不否认IE6经常让我们口吐鲜血,但不代表我们用更多的“谎言”来弥补就可以心安理得。大部分情况下可以通过变换思路调整HTML结构,或使用一些虽然无法解释但相对安全的css来干掉hack。谁都无法预计使用hack什么时候会让我们栽一个大跟头。比如触发layout或position:relative就可以帮助解决很多IE6的问题。 

.......


查看全文 >>
4web界面设计原则
  界面设计旨在让用户简单交互且高效。总之,以用户为中心的设计才是最好的界面设计。如果用户界面设计能够做到再不受任何干扰的情况下完成任务,才可被称之为良好的用户界面。 

  设计良好的用户界面并不容易,它要求具备伟大的设计技能、良好的设计领域知识以及了解用户需求。从项目初期到最终呈现出的项目,用户界面设计需要遵循各种各样的过程。作者Rajni Setia列出了在用户界面设计中最常见也是最重要的九大特性,我们一起来看下。 

  清晰是用户界面设计最重要的一大特性,它有助于防止用户出错,清楚地呈现出重要信息并提供完美的用户体验。清晰意味着能准确表达出信息内容。 

  清晰在用户界面中固然重要,但是这并不是说让你的设计信息过于泛滥。增添自定义信息和解释说明这并不难,但是过于繁杂的内容肯定是个Bug,因为这就需要用户花大量的时间去阅读它们。因此,强烈建议保持清晰和简洁原则,即言简意赅!这么做的好处是为了给用户节省宝贵时间,尽可能的简明扼要。 

  一致性是良好的用户界面设计另一大特性。它允许用户自主开发使用模式,帮助用户了解不同的按钮、标签、图表以及其他的界面元素,从而轻易地找到它们。一款独特的设计是能够整合用户的终端需求才称得上一个良好的用户界面设计。 

.......


查看全文 >>
5web界面设计技巧
  界面元素随需而变力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多,用户需要寻找和思考的时间也就越多。同样,界面中存在的选项越少,可用功能就越明显、越容易浏览。不过简化界面并非轻而易举,尤其是你不想减少应用程序功能的情况下。

  为模态窗口增加边缘阴影弹出式菜单和窗口周边的阴影不仅仅是为了视觉美观。阴影一方面增大了菜单或窗口的尺寸,有助于将菜单或窗口从背景中区别开来;另一方面通过灰度化的边缘阴影可以屏蔽背景内容的噪音干扰。

  这个技巧根植于传统桌面程序,帮助用户将注意力集中在弹出的窗口。由于很多模态窗口不容易从桌面程序内容页面中凸显出来,阴影可以使它们看起来具有立体效果、仿佛悬浮于其他内容之上,于是拉近了模态窗口与用户的距离。

  空白状态时告诉用户可以做什么当设计web app的时候,不仅需要关心一般情况下的信息展示,还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候,可以在空白区域放置一条帮助信息告诉用户如何开始。例如,一个项目管理的应用程序主页会列出用户的项目,假如还没有什么项目信息,可以为用户提供一个项目创建页面的链接。即使这个页面上已经存在了这样一个功能按钮,一个额外的帮助并不会有什么妨碍。

  Wufoo的表单页面有醒目的、友好的信息鼓励用户去创建新的表单。这个技巧可以有效地鼓励用户试用该服务,并在注册后立即进行使用。通过应用程序的单一操作步骤可以帮助用户理解这个应用的优势以及对他们是否有用。

.......


查看全文 >>

相关成功案例

UI设计方案
免费预约
相关知识
界面ui设计工具界面ui设计流程界面ui设计要点界面ui设计软件界面ui设计培训学校手机ui设计教程手机ui设计软件手机ui设计规范手机ui设计培训 手机ui设计是什么?