`
guoshuang
  • 浏览: 793 次
  • 性别: Icon_minigender_1
  • 来自: xian
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Web UI 设计

阅读更多
[img]http://simplewordpresstheme.com/wp-content/screenshots/handcoding.jpg" alt="[/img]




要找到一个审美观优秀的程序员,跟找到一个会写程序的美工一样难?

有种职业叫做 PSD2HTML…

这个世界上除了ie6,还有 chome,firefox,safari,opera,ie8…

有一种人,他需要考虑:客户需求、本地化需求、界面风格统一、交互设计等问题…

一个会编程、玩得转linux的美工…



web 技能



**熟练掌握一个美工应该会的一切软件,并且有10年经验。ps fw dw flash 3dmax

**熟悉 xhtml xml css jquery(javascript) 等web 2.0标准化设计,熟悉 firefox chrome safari opera 等浏览器之间的差异

**熟悉 Semantic + Accessibility,对 Section 508,WCAG 1.0 以及 W3C XHTML validation,css validation,FAE,WAVE,W3C mobile validation 验证方法及调试过程

**熟悉 fireworks(photoshop) editplus(gedit)网页手写代码,熟悉 flash 及 as 编写

**熟练搭建、配置 ubuntu linux server + apache(lighttpd,nginx) + mysql + wordpress(drupal)+ proftpd(vsftpd) + openssh + vnc 服务器环境



其它说明



**psd 2 xhtml(也就是国内俗称的 div+css 页面编码) 不在话下,因为这本来就是 xhtml 的一小部分

**我更喜欢 jquery framework,更象 ruby 的风格。extjs yui dojojs prototype 这些夸奖等则是懒惰的后台程序们的最爱,可以很快调用现成的 ui 组件,但没办法自己修改。



工作流程



1.贵公司提供 psd 或者 png 源文件(也可以由我们直接进行图形化UI设计),提供交互设计的详细要求。



2.修改 UI 组件 psd 或 png



3.editplus(gedit) 手写 xhtml 代码



4.firefox + firebug 调试,然后测试 ie 6-7-8



5.W3C Accessibility 等验证



样板工程可参见 鹏讯科技网站

分享到:
评论

相关推荐

    Web UI 设计命名规范讲解

    Web UI 设计命名规范讲解 Web UI 设计命名规范是指在网页设计过程中,对于网页设计元素的命名规则和规范。本规范不仅涉及到 CSS、HTML、JavaScript 等编码语言的命名规范,也涉及到使用 PhotoShop 等设计工具进行...

    webUI设计作业4

    在“WebUI设计作业4”这个主题中,我们聚焦于网页用户界面的设计,这是一个至关重要的领域,直接影响到网站的用户体验和交互效率。WebUI设计涵盖了多个方面,包括色彩搭配、布局设计、字体选择、图标应用、导航结构...

    WebUI设计作业

    WebUI设计作业主要涵盖网页用户界面的设计原则、技巧与实践,是将视觉艺术、交互设计、用户体验和前端技术融合的综合性工作。在这个作业中,2011060414和201108024可能是两个不同阶段的设计稿或案例,代表着学习过程...

    webUI设计作业3

    在“WebUI设计作业3”中,我们主要探讨的是如何创建高效、美观且用户体验良好的网页用户界面。WebUI,即Web用户界面,是网站与用户交互的桥梁,它包括网页的布局、色彩、图形、文字、按钮等元素,以及它们如何协同...

    WebUI设计优化

    WebUI设计优化是网页设计领域中的重要环节,它关乎到用户体验、交互效率以及网站的整体视觉效果。优秀的WebUI设计能够提升用户对网站的第一印象,增强用户黏性,从而提高转化率。以下是一些关于WebUI设计优化的关键...

    web UI 设计样式,无版权限制

    一个优秀的Web UI设计不仅能够提升用户体验,使用户在使用过程中感到舒适和便捷,还能够体现品牌特色,增强企业的形象。"web UI 设计样式,无版权限制" 提供了一种资源集合,供设计师们参考和借鉴,以创建出吸引眼球...

    Web UI 设计 培训

    Web UI 设计 培训 主要讲了 导航栏的设计注意事项

    实验一 Web UI 设计1

    总的来说,Vue.js的简洁性、轻量级、模块化和组件化特性使其在Web UI设计中具有很高的实用价值。结合Element UI这样的UI库,开发者可以快速构建出高效、美观的用户界面。随着Vue.js社区的不断壮大和框架的持续优化,...

    用XML和XSLT进行高级的 Web UI设计

    在本主题“用XML和XSLT进行高级的Web UI设计”中,我们将深入探讨如何利用这两种技术来实现目录树的上下文菜单功能,包括节点元素的添加、修改、改名和删除操作。 1. **XML数据结构**:首先,我们需要建立一个XML...

    基于Vue+Element UI的病虫害识别Web UI设计源码

    本项目是一款基于Vue框架和Element UI组件库的病虫害识别Web UI设计源码,共包含307个文件,涵盖131个Vue组件文件、90个JavaScript脚本文件、46个SVG图形文件、9个SCSS样式文件、7个Markdown文档、3个YAML配置文件、...

    宽屏WEBUI设计师响应式bootstrap模板5104.zip

    【宽屏WEBUI设计师响应式bootstrap模板5104】是一个专为网页界面设计者打造的资源包,其中包含了响应式布局的Bootstrap框架模板。Bootstrap是目前非常流行的一款开源前端开发框架,它提供了丰富的组件、预设样式和...

    商业编程-源码-用XML和XSLT进行高级的 Web UI设计(三).zip

    在本压缩包“商业编程-源码-用XML和XSLT进行高级的 Web UI设计(三).zip”中,包含的是关于如何利用XML(Extensible Markup Language)和XSLT(XSL Transformations)进行复杂Web用户界面(UI)设计的源代码和相关...

    商业编程-源码-用XML和XSLT进行高级的Web UI设计(七).zip

    在本资源包“商业编程-源码-用XML和XSLT进行高级的Web UI设计(七).zip”中,我们聚焦于如何利用XML(Extensible Markup Language)和XSLT(Extensible Stylesheet Language Transformations)这两种强大的技术来...

    商业编程-源码-用XML和XSLT进行高级的 Web UI设计(二).zip

    在本压缩包中,我们关注的是“商业编程-源码-用XML和XSLT进行高级的Web UI设计(二)”的相关知识。这个主题主要围绕XML(可扩展标记语言)和XSLT(XSL转换)在创建复杂的Web用户界面(UI)中的应用。XML是一种用于...

    webui图标素材

    标题"webui图标素材"表明这是一批专门用于WebUI设计的图标集合,涵盖了各种类型和风格的图标,旨在满足Web系统中的常见需求。这些图标通常包括但不限于:导航图标、操作状态图标、功能图标、社交网络图标等。 描述...

    商业编程-源码-用XML和XSLT进行高级的Web UI设计(六).zip

    4. **Web UI设计**:探索如何利用XSLT实现动态和交互式的Web界面,比如使用XSLT处理用户输入、响应事件和更新UI。 5. **分离数据和表现**:理解XML和XSLT如何实现数据和界面显示的解耦,这对于创建可复用、可扩展的...

    校企合作创新人才培养教学改革——以应用型本科Web UI设计(HTML5)课程为例.pdf

    本文探讨的是在应用型本科教育中,如何通过校企合作的方式改革Web UI设计(HTML5)课程的教学模式,以培养符合行业需求的创新人才。随着HTML5技术成为Web前端开发的主流,尽管市场需求大,但高校在提升学生开发技能...

    易语言网站后台管理UI界面源码 CEFUI WEBUI 自适应

    WEBUI设计是指使用Web技术来构建用户界面,这种方式的优点在于可以充分利用Web开发者已有的技能和工具,同时也可以使界面在不同设备和屏幕尺寸上具有良好的自适应性。在本源码中,WEBUI设计的实现可能包括响应式布局...

    个人收集的二十多个管理系统的webui效果图

    WebUI设计在管理系统中至关重要,因为它直接影响到用户的操作体验,好的WebUI设计能提升工作效率,降低用户学习成本。 【文件名称列表】 虽然没有具体的文件名提供,但我们可以推断压缩包"WebUI"中可能包含了一系列...

Global site tag (gtag.js) - Google Analytics