网站建设联系电话 010-52406013

全部新闻

新闻资讯

网站建设

网站制作

SEO优化

常见问题

签约动态

建站技术

惊呆了!响应式设计竟然这么难!

时间:2019-07-26 17:37:01 作者:北京网站建设公司 访问量:

  由于PC端开发能够充分暴露业务复杂度,项目团队的设计、开发、测试在PC环境下拥有成熟的工具和流程,从PC开始闪开发过程更顺畅。这是复杂产品实现响应式设计的枢纽步骤,它是让众多页面有条理地响应起来的基础。以把10多个页面分成三类:列表类页面、详情类页面、操纵类页面。移动优先是移动互联网浪潮下应运而生的理念,由Luke Wroblewski最早提出。由于手机屏幕小,每屏呈现的内容少;触屏手机使用手指操纵而非鼠标这样的精密设备来操纵,对操纵有更高要求;手机使用场景更加丰硕,良多场景用户是缺乏耐心的,好比当你排队看片子正在找手机上的电子票,马上排到你了翻半天却迟迟找不到那张票这是多么令人崩溃的事情。手机即将超越PC,成为最主流的上网方式,这个趋势是不可逆的。

  1、手机很多特性让设计更强盛。

  

blob.png


  信息架构,确定内容策略。从玩客框架结构看出,全局导航是所有页面公共的,局部导航只有列表类页面才有,详情类页面都有一个“页面主人”信息,而联系关系导航不是每个页面都有。第一件事情是确定响应式模式,即从手机到平板到PC,导航怎么变化,页面布局用哪种响应方式,根据内容优先级如何调整模块顺序,等等。但这种改变必需去适应,由于用户习惯在改变。

  回正题,上一步已经把页面归类并确定每个页面内容优先级,现在接着分析每种类型页面的导航、主体内容等框架结构,终极得出一份框架结构表。这个过程与传统流程没太大区别,只是心里要不断提醒自己,这个模块不是只为这个设备设计。

  响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计、前端和开发团队之间的协作模式带来新的挑战。它是指优先设计手机真个体验,有三个原因:

  2、手机让设计专注,强迫你想清晰什么信息是最重要的。

  响应式设计之所以叫响应式“设计”而不叫响应式“技术”,是由于它是一项设计先行的工作。玩客在PC端以三栏布局为主,左边栏作为局部导航或者主人信息区,中间栏始终是页面主体信息,当页面需要联系关系导航时同一放在右边栏。

  根据产品定位和用户分析,交互设计师确定站点信息架构。所以整个流程最初从交互阶段开始,分成6个主要步骤,视觉、前端、开发等角色根据情况尽早参与。在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时参与?哪些事情让后端开发来做更公道?我们得到了一些谜底。

      想要了解更多关于网站建设常识或是北京网站建设公司的相关信息,可以常常关注中企云达的官方网站http://www.zhongqiyunda.com/

  模块设计

  按照移动优先的原则应该提高前辈行移动真个模块细节设计,不外我们选择了从PC端开始设计细节。需要设计先明确好响应方式再实现出来,不能出一套设计稿后等着前端看情况把它变成响应式网页。从手机开始设计,让你更早地思索如何施展这些特性。手机上的语音输入、地舆位置定位、丰硕的手势操纵、越来越多传感器,手机交互比PC拥有更多可能性。

  这时候可以明确这个产品有多少页面,每个页面包含多少内容,内容优先级是什么。

  

blob.png


  3、移动框架

  先说下为什么第二步要先设计移动框架。移动优先并不是指移动更重要,响应式设计理念里设备是平等重要的。良多产品包含N多页面,每个页面逐一考虑响应式设计轻易造成混乱且

  本钱巨大。

  4、响应式框架

  根据手机真个框架拓展出平板和PC端框架。从移动开始做设计对习惯了PC环境的设计师可能是一种挑战,思索方式工作习惯都被迫做出改变。响应式框架确定了页面结构和响应模式,模块设计这个过程开始完善所有信息排版和交互形式,这是交互设计师最纯熟也是最耗时的工作。

  5、手机正在迅猛增长。所以个人以为移动优先是确定内容策略时应该遵循的理念,细节设计和开发过程是否要移动优先,取决于产品定位和项目团队情况。所以下一步重要工作是分析页面类型把页面归类。