`
wx1569225609
  • 浏览: 14390 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

初学者谈谈网站交互设计

 
阅读更多
由于所在团队的项目原因,开始接触实战的交互设计,第一次使用 Axure 来为一个网站设计一份交互。加入团队的时候,整体站点的功能和需求基本有了一个大框架,所以只提出了一些修改和增减的意见,主要针对网站在功能上的侧重以及交互上的缺失,而主体板块上面则没有做过多的变动。 在『自以为』完成了交互稿之后,看到视觉同学给出的效果图,似乎有点『心满意足』的感觉。很巧地,在人人上遇到了以前的老舍友,目前正在某大型网站做产品经理,于是就冒昧地提出把我做的网站原型拿给他看看,请求提一些建议。 结果是,出乎我的意料,但是又让我非常满意地,提出了很多至关重要的建议(正规公司的培训和自己摸索是完全不同的)。尤其是在学生团队中无论如何摸索也不容易自我觉醒的建议。所以趁热打铁,权当自己是一个初学者的典范,说说初学者对网站交互设计的一些误解。 误解一:交互设计,就是用软件做控件布局和跳转链接 从我和朋友的原型图就能高下立判,一个原型图逼近成品,而我的,则可能好一点的手稿也要比我的原型图清晰和美观。错误地把交互理解为设计主体布局和页面之间的跳转关系,并且简单呈现给视觉,是我做交互设计犯下的第一个错误。 单调的页面也仅仅体现了布局,丝毫没有体现出交互,更没有表达出不同的切换效果、换页动画以及呈现方式,这会对视觉以及前端同学的工作造成很多的不便。 误解二:交互设计,只是体现一个大概的设计概念 此条与误解一有些许重叠的地方,总而言之就是设计太潦草和太简单。在我的设计稿中,已知的网站944像素宽度也没有体现出来,是根据目测随意设置的边距,并且每一个页面的边距都不同(因为都是目测随便摆的)。同样地, 在高度方面更是没有细致的规划,没有考虑到每一屏所显示的内容,没有考虑到哪些控件可能出现屏幕上『青黄不接』的状态。实际交互和原型设计,应该是像素级的工作,应该让视觉和前端的同学明确知道每一个控件的精确位置,而不是让他们来替你做这件工作。工具方面,可以使用网格和屏幕分割线来划分区域,便于设计。 误解三:交互不对内容的排布做充分的考虑 首页过大的 banner 会导致分割了首页导航栏和主体内容,过度注重美观则使得内容打了折扣。同时,在活动列表等界面中,尽量保证每一屏中的几个活动所在的位置和体现效果『公平』,否则排序靠后的内容就非常容易被忽略掉(点击量落差巨大)。因此, 在交互设计中,除了要确定某一个大区域中放置的内容,对于其中细节内容的排布也应当有所考虑和安排。否则,你的设计就会影响运营同学的工作。 总的来说,交互设计和视觉设计、前端实现构成了网站设计不可或缺的整体,我再次对前期工作的不严谨和不专业对前端以及视觉同学表示深刻的歉意。交互设计,绝不仅仅是使用 Axure 把控件拖来拖去的体力活,也不是拍脑袋决定某一个布局好看或者某一个区域的内容。所有的位置、信息和像素,都是产品的体现、都是需求的满足、都是功能,都是产品经理需要 care 的东西。 最后,大公司对于重要的页面的设计都会有高级负责人亲自过目和确认,保证最终的效果。而在我们团队中,则可能需要产品经理、设觉设计和 Leader 一起来把关。

转载于:https://my.oschina.net/wangchenyu/blog/1530758

分享到:
评论

相关推荐

    初学者网站设计者:网站入门

    网站设计是数字时代的一种基本技能,对于初学者来说,它是一个充满挑战且有趣的学习领域。本文将深入探讨网站设计的基础,特别关注ASP编程语言、网页设计原则以及使用Dreamweaver等工具进行网站构建。 首先,让我们...

    网页素材(适合初学者)

    "网页素材(适合初学者)"这个压缩包文件显然是为那些想要学习和探索网页设计的人准备的,它包含了各种经典网站模板,可以帮助初学者在欣赏和学习中激发自己的创作灵感。 首先,我们来谈谈“网页制作”。网页制作...

    初识前端后端UI交互,初学者必看

    综上所述,理解前端与后端的区别、UI交互的重要性,以及它们在实际开发中的应用,对于任何想要踏入Web开发领域的初学者都是基础且必要的。通过深入学习这些知识,并结合"Web开发之1234"这样的学习资源,你可以逐步...

    易语言网页交互设计

    易语言是一种专为中国人设计的编程语言,它以简明直观的语法特性,使得初学者能够更容易地进行程序开发。在“易语言网页交互设计”这个主题中,我们主要探讨的是如何利用易语言来实现与网页的交互功能,包括GET和...

    android一款很温馨好用的记事本适合初学者

    标题中的“android一款很温馨好用的记事本适合初学者”表明这是一款面向Android平台、设计友好且适合初学者使用的记事本应用。这款应用可能具有吸引人的用户界面(UI)设计,以及一些交互性的点击效果,为用户提供...

    express项目(可用于前端登录交互)

    在本项目中,"express项目(可用于前端登录交互)"是一个专门为前端初学者设计的实践教程,目的是让他们了解和掌握如何实现前后台交互。这个项目的核心是使用Node.js的Express框架,一个轻量级且强大的服务器端...

    Android应用源码安卓初学者必敲基础项目.zip

    对于初学者来说,通过敲击基础项目的源码,能够深入理解Android应用程序的工作原理,掌握基本的编程技巧和设计模式。本压缩包"Android应用源码安卓初学者必敲基础项目.zip"提供了丰富的学习资源,帮助初学者在实践中...

    SSH2+DWR的小图书管理系统(初学者专用)

    SSH2+DWR小图书管理系统是一个适合初学者的实践项目,它结合了Spring、Struts2和Hibernate这三个框架,以及Direct Web Remoting (DWR) 技术,为用户提供了一个简单但功能完整的图书管理解决方案。下面将详细讲解SSH2...

    adt-bundle JNI NDK 初学者实例

    `adt-bundle`则是一个包含了Android开发工具集的下载包,包括Eclipse IDE和ADT(Android Developer Tools),它是初学者入门Android开发的重要资源。 首先,我们来详细解释一下`adt-bundle`。`adt-bundle`是Google...

    对初学.net者绝对有用

    总的来说,.NET为初学者提供了广阔的探索空间,从基础的窗体设计到复杂的系统集成,每一步都有丰富的资源和文档支持。持续学习和实践,你将逐渐成为一名熟练的.NET开发者。而“好的.NET资料”这个压缩包文件,很可能...

    web网页设计

    在web网页设计的世界里,初学者常常面临许多挑战,但一旦掌握了基础知识,就能轻松地创造出引人入胜的在线体验。这份"web网页设计"的资料正是为了帮助这些新手而准备的,它涵盖了从基本概念到实践技巧的全方位指导。...

    网站设计与管理精品课件

    网站设计与管理精品课件是一门综合性的课程,主要涵盖了创建和管理网站的各个方面。这门课程一共分为十章,内容深入且全面,适合对网页设计、网站开发以及服务器管理感兴趣的初学者或进阶者学习。课程的核心目标是让...

    C#做的小闹钟 C#初学者关注

    总的来说,"C#做的小闹钟"项目是一个极好的起点,让初学者可以了解C#编程的基本概念,包括Windows Forms应用的构建、图形绘制、定时器的使用以及简单的用户交互。虽然这个小闹钟的功能相对简单,但它为更复杂的桌面...

    含泪托出 :非常网页设计

    在网页设计领域,无论是初学者还是经验丰富的设计师,持续学习和探索新的设计理念和技术都是至关重要的。"含泪托出:非常网页设计"这个教程恰好提供了这样的机会,它旨在帮助那些渴望提升网页设计技能的人们。这个...

    4202简洁扁平化网站设计公司CSS3网站模板5169_企业网站模板PHP整站源码.zip.7z

    对于初学者来说,这是一个很好的实践项目,而对于有经验的开发者,这则是一个高效的工作基础,能够节约大量的时间和精力。 总的来说,这个压缩包提供了完整的网站构建解决方案,涵盖了现代网页设计与开发的各个方面...

    网页设计(三)

    在“网页设计(三)”这个教程中,我们将深入探讨更高级的网页设计概念和技术,旨在帮助初学者和有经验的设计师提升他们的技能。教程内容可能包括但不限于布局设计、交互性、响应式设计、色彩理论以及前端开发工具的...

    安卓简单的登录和对多个表的增删改查适合初学者学习。

    对于初学者来说,理解和掌握这些概念有助于构建实际的应用。以下是对标题和描述中提及的安卓登录和多表数据库操作的详细解释: 首先,我们来谈谈安卓登录功能。在移动应用中,登录模块通常用于验证用户的身份,确保...

    大图渐变橙色设计行业模板免费下载_橙色 设计 梦幻 摄影 博客 导航 图片 企业 精品 大气.zip

    在IT行业中,设计模板是一种非常重要的资源,尤其对于网页设计师和图形艺术家来说。"大图渐变橙色设计行业模板免费下载"是一个针对设计领域的压缩包...对于设计初学者或忙碌的专业人士来说,这是一个非常实用的工具。

    信息在线(InfoOnLines)

    这个项目旨在帮助初学者掌握Web开发的基础知识,包括网页设计、服务器端编程以及网站的部署与管理。尽管存在少量的Bug,这些小问题为学习者提供了实战修复错误的机会,从而增强他们的解决问题能力。 在VS2005中,...

    20套经典网站模板

    总的来说,这个压缩包是一份宝贵的资源,它集成了多种类型的网站模板,可以帮助初学者理解网页设计的基本原理,也可以为经验丰富的开发者提供快速构建网站的起点。无论是学习、实验还是实际项目应用,这些模板都能为...

Global site tag (gtag.js) - Google Analytics