还是程序员 照应式设计是设计师做 (程序员对比)

本文目录导航：

• 照应式设计是设计师做 还是程序员
• 照应式网站树立流程是什么？
• 如何了解照应式设计

照应式设计是设计师做 还是程序员

照应式设计单纯的成果图设计 是由设计师来做的，他会设计出至少pc 和手机 的两种设计稿，而后给到做 网页前端的 共事做详细的照应式规划 。这个和程序员基本上并没有相关，

照应式网站树立流程是什么？

1、消息架构，确定内容战略

依据产品定位和用户剖析，交互设计师确定站点消息架构。

(消息架构出现方式有很多种，这不是本文重点，不详述)。

这时刻可以明白这个产品有多少页面，每个页面蕴含多少内容，内容优先级是什么。

很多产品蕴含N多页面，每个页面逐一思索照应式设计容易形成凌乱且老本渺小。

所以下一步关键上班是剖析页面类型把页面归类。

以玩客为例，可以把10多个页面分红三类：列表类页面、概略类页面、操作类页面。

2、移动框架

先说下为什么第二步要先设计移动框架。

移动优先是移动互联网浪潮下应运而生的理念，由LukeWroblewski最早提出。

移动优先并不是指移动更关键，照应式设计理念里设施是等同关键的。

它是指优先设计手机端的体验，有三个要素：

(1)手机让设计专一，强制你想分明什么消息是最关键的。

由于手机屏幕小，每屏出现的内容少;触屏手机经常使用手指操作而非鼠标这样的精细设施来操作，对操作有更高要求;手机经常使用场景愈加丰盛，很多场景用户是不足耐烦的，比如当你排队看电影正在找手机上的电子票，马上排到你了翻半天却迟迟找不到那张票这是如许令人解体的事件。

(3)手机正在迅猛增长。

手机行将逾越PC，成为最干流的上网方式，这个趋向是无法逆的。

从移动开局做设计对习气了PC环境的设计师或许是一种应战，思索方式上班习气都自愿做出扭转。

但这种扭转必定去顺应，由于用户习气在扭转。

上一步曾经把页面归类并确定每个页面内容优先级，如今接着剖析每种类型页面的导航、主体内容等框架结构，最终得出一份框架结构表。

从玩客框架结构看出，全局导航是一切页面公共的，部分导航只要列表类页面才有，概略类页面都有一个“页面客人”消息，而关联导航不是每个页面都有。

接着开局设计手机端“超修长页面”的框架(由于手机上普通是单列规划，所以页面又细又长)。

这一步开局把消息结构设计成最集约的框架，可以在白板或纸面上成功。

要成功的关键指标是：把这个页面最须要出现给用户的内容放在最关键的位置，要合乎手机上的阅读和操作习气，尽量应用手机设施的个性。

3、照应式框架

依据手机端的框架拓展出平板和PC端框架。

这是复杂产品成功照应式设计的关键步骤，它是让泛滥页面有条理地照应起来的基础。

第一件事件是确定照应式形式，即从手机到平板到PC，导航怎样变动，页面规划用哪种照应方式，依据内容优先级如何调整模块顺序，等等。

玩客在PC端以三栏规划为主，左边栏作为部分导航或许客人消息区，两边栏一直是页面主体消息，当页面须要关联导航时一致放在左边栏。

到如今这个阶段一切页面的照应式开局有规定可循，下一步上班就是继续细化规定，把框架准确到详细尺寸。

详细说来就是制订流体栅格系统。

照应式是一种设计理念与前端技术严密联合的新兴外形，激励尽早启动跨职能沟通单干。

交互确定照应式框架和栅格系统后，其余角色就可以同步展开上班了。

前端开局参加成功栅格和框架搭建，产出页面基础框架。

视觉同步开局探求和定义视觉格调探求，制订视觉框架，产出格调关键词、产品配色打算。

整个环节须要几个角色一直探讨确定。

4、模块设计

依照移动优先的准则应该先启动移动端的模块细节设计，不过咱们选用了从PC端开局设计细节。

由于PC端开发能够充沛泄露业务复杂度，名目团队的设计、开发、测试在PC环境下领有成熟的工具和流程，从PC开局让开发环节更顺畅。

所以团体以为移动优先是确定内容战略时应该遵照的理念，细节设计和开发环节能否要移动优先，取决于产品定位和名目团队状况。

照应式框架确定了页面结构和照应形式，模块设计这个环节开局完善一切消息排版和交互方式，这是交互设计师最熟练也是最耗时的上班。这个环节与传统流程没太大区别，只是心里要一直提示自己，这个模块不是只为这个设施设计，它在其它设施下会出疑问吗?

交互确定页面模块细节后可以抽取出产品用到的控件、组件和公共模块，如今视觉和前端开局做一件有别于传统流程的事件。

视觉依据前期定义的格调设计控组件和公共模块的视觉成果，把它们拼成一个模拟的页面，咱们称之为格调拼贴稿。

前端再把格调拼贴稿里的控组件和公共模块成功进去，一致保养一套组件规范代码。

传统的做法往往是页面视觉定稿后设计师开局整顿视觉规范标注给前端。

格调拼贴稿是将这个上班尽或许提早，并变成一个设计单干利器。

它的好处是：

(1)一个页面的视觉成果实践上是由一堆控组件和公共模块组成，用实在的控组件和公共模块拼贴的模拟页面曾经可以出现出产品的视觉格调。

把一个产品10多个页面的视觉稿所有成功定稿是十分费时费劲的事件，产出一份格调拼贴稿则轻松得多。

所以它是一个高效的设计工具。

(2)复杂产品总是触及多个设计师和前端并行上班，尽早地把控组件和公共模块抽取进去一致治理，是保障视觉格调分歧性的有效方法。

防止不同设计师同时设计同一个控组件或公共模块，增加重复开发形成的糜费。

也大大降落前期降级和保养页面的老本，比如当须要修正“关注”按钮时只要改一个就能全站失效。

5、照应式模块设计

pc模板细节微格调拼贴稿成功后，剩下上班是拓展出平板和手机端的完整设计稿，前端产出所有照应式页面代码。

启动照应式模块设计时最须要关注的依然是让操作合乎设施习气，充沛应用设施个性。

至此，一个全站照应式产品的页面就陆续进去了。

很多人以为照应式设计保养老本高的理由是一个页面要同时设计多套设计稿。

玩客这次阅历通知咱们，确定一套设计稿和栅格系统后再拓展出其它设施下的设计打算，上班量远比构想中的低。

6、测试/探讨/提升，提交开发

离功败垂成还差最后一步，在实在设施下测试页面成果，名目团队探讨并继续提升。

在提交开发之前须要尽早明白服务端照应(RESS)的战略。

服务端与客户端联合是目前处置照应式页面性能疑问的最正当打算。

哪些大图片在移动设施下只要输入小尺寸图片?哪些内容在什么设施下是不须要开发输入的?哪些可以增加输入的数据数量?与开发团队单干的照应式可以有效控制页面文件大小，防止页面成为移动设施上烧用户流量的罪魁祸首。

如何了解照应式设计

在设计中经常遇到这几个疑问：

1.想要网站兼容手机、平板电脑、pc，就得为不同的设施定制不同的版本。

2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。

3.很多人并不是在全屏的状况下阅读咱们的页面，假设让页面随着阅读器宽度扭转而相应的调整会不会比拟好？

有没有方法能有效处置这些疑问呢？

照应式Web设计(ResponsiveWebdesign)的理念是页面的设计与开发应当依据设施环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（扭转窗口大小等）启动相应的照应和调整。

详细的通常方式由多方面组成，包括弹性网格和规划、图片、CSSmediaquery的经常使用等。

无论用户正在经常使用pc、平板电脑，或许手机，无论是全屏显示还是非全屏的状况，无论屏幕是横向还是竖向，页面都应该能够智能切换分辨率、图片尺寸及相关脚本配置等，以顺应不同设施。

照应式web设计对交互设计和前端成功提出了更高的要求，须要思索分明不同分辨率下页面的规划变动、内容的缩放等。

照应式Web设计的长处：

1、开发、保养、经营老本长处：页面只要一个，只是针对不同的分辨率、不同的设施环境启动了一些不同的设计，所以在开发、保养和经营上，相对多个版本，能浪费老本。

2、兼容性长处：移动设施新的尺寸层出不穷，定制的版本通常只实用于某些规格的设施，假设新的设施分辨率变动较大，则往往不能兼容，而开发新的版本须要期间，这段期间内的访问就是个疑问，然而照应式Web设计可以提早预防这个疑问。

3、操作灵敏：照应式设计是针对页面的，可以只对必要的页面启动改动，其余页面不受影响。

当阅读器宽度变小时，左右两栏的宽度都有增加，左边的banner图片和视频也相应增加，左边的头像列表由一排4个变为一排两个。

当阅读器宽度进一步变小后，页面由两栏结构变为一栏结构，部分外容的尺寸进一步增加，搜查区域也从导航里挪到了导航外。

照应式页面的设计流程：

第一步：确定须要兼容的设施类型、屏幕尺寸

经过用户钻研，了解用户经常使用的设施散布状况，确定须要兼容的设施类型、屏幕尺寸。

设施类型：包括移动设施（手机、平板）和pc。

关于移动设施，设计和成功的时刻留意加入手势的配置。

屏幕尺寸：包括各种手机屏幕的尺寸（包括横向和竖向）、各种平板的尺寸（包括横向和竖向）、普通电脑屏幕和宽屏。