移动端的网页设计流程有哪些

精品公开课UI设计课程学习师资团队关于咱们

weiboQQ当即注册登陆

>>最新平面课：《PS速成：一节课搞定女装专题》>>最新平面课：《PS：广告公司经常使用抠图法》>>《网页设计师项目实战》公开课正式开课啦！>>《平面设计师实战》公开课正式开课啦！

 

>>最新平面课：《PS速成：一节课搞定女装专题》>>最新平面课：《PS：广告公司经常使用抠图法》>>《网页设计师项目实战》公开课正式开课啦！>>《平面设计师实战》公开课正式开课啦！

帖子    搜索    

趣达学院»论坛首页›学习交流区›UI交互设计›移动端的网页设计流程有哪些

返回列表

 

  

[UI设计] 移动端的网页设计流程有哪些 

[复制连接]    

 

 

 

电梯直达

楼主

 奋斗 发表于 5 天前 | 只看该做者 |只看大图 

 

       随着时代和技术的发展，网页设计的流程正悄无声息地发生着巨大的变化。精准具体的设计交付列表再也不是网页设计的惟一标准，静态页面设计在整个设计流程中所占的比重也逐步下降，正如同Stephen Hay所说，咱们所设计的再也不是单纯的页面，而是包含诸多组件的一整个系统。

 

       瞬息万变的不只仅是内容和信息，用户所用的设备和内容呈现的模式也在快速改变着，这些都与网页设计息息相关，也没有任何迹象代表这种改变会变缓。而咱们的设计做为载体和呈现的载体，理应走在它们的前面。

 

       以前的网页设计流程在今天看来已经没法应付这一切了，修整刻不容缓。敏捷开发、团队协做和适应性调整都已是设计过程的最前沿，设计和开发之间的界限愈来愈模糊了。

移动端优先

 

       移动端优先，这句口号已经喊了好几年了，真正有远见卓识的网页设计师应该很清楚这句话远不止于口号那么简单。移动端优先必然会牵涉到设计流程，咱们应当从小屏幕着手，先设计简单的布局，而后为其增长复杂度，以其为基础，为更大的屏幕来进行设计。

 

       随着移动端设备的用量超越PC，移动端的网页浏览无疑已经成为用户获取信息的主要渠道，移动端优先的设计天然应该成为常态。

 

       除非你的网站状况很是特殊，或者你拥有极具说服力和特殊的数据支撑你的想法，移动端优先的设计符合逻辑也有道理。

 

       相比于为小屏幕去下降整个设计的复杂性，为移动端先作好适配再提高其复杂度，是更容易的。回想一下按照以前的流程来设计网页吧，咱们老是疲于应对客户的要求，在后期还要来回调整设计和代码。未完成的页面和不够易用的移动端页面，填不完的坑。

 

       桌面端的页面老是先作完，而在此基础上修改出来的移动端页面，彷佛总有点粗制滥造的感受。

 

       那么咱们就不要将”移动端优先”看成一句简单的口号好了！从如今开始真正意义上为移动端的小屏幕开始作设计！

搭建而非拆卸

 

       设计是一个积累的过程，每个进步都是在前一步的完成和胜利的基础上，逐步创建起来的。

 

       基于小屏幕的设计规划是符合逻辑的。我更倾向于一砖一瓦地搭建，而非作好了再一点一滴地拆卸下来。

 

       我能想到最好的类比是“原子设计”，这种设计方法是经过逐步提高复杂度来构建事物。简而言之，借助这种思路是这样作设计的：

 

       1.肯定基本的排版组合、尺寸大小和色彩使用

       2.基于这些基本的设定，肯定诸如表单字段和标签等小元素的设计

       3.基于以上的设计，完善诸如完整的联系人表单的大的元素的设计

       4.将这些已经构建好的网页元素搭建成为页面（诸如联系咱们页面）

       5.重复以上过程

       就是这些不起眼的元素构建起了你的页面，也正是这样简单的方式，一样能够完成以前看起来复杂无比的页面设计。只要你用好这个设计流程，它所带来的可能性是无限的。

 

       比起一开始就操刀设计页面，完成 这些“砖瓦”的设计更容易上手也更便捷，整个设计流程从移动端过分到桌面端也更加完美流畅。想一想在这个过程当中，你和你的客户所须要专一的事情吧，无非是持续不断地添加细节就行了。

不要局限于断点

 

       在探讨响应式网页设计的设计过程之时，咱们花费了大量的时间在断点的媒体查询和为现有硬件设备作设计的平衡之上。形成这个局面的主要症结，就是网站的内容。

 

       若是可能的话，尽可能在设计后期的时候，同内容和营销团队密切合做，在内容的结构和划分上多花心思，防止最终在这个问题上影响网页的设计，出现意外。

 

       即使是如此，从设计之初到设计后期乃至整个页面上线，网页内容均可能是一直处于变更当中。标题愈来愈长，图片更换，区块被替换，等等等等。

 

       “若是可能的话，尽可能使用真实的内容来进行设计。”

 

       一个真正精心设计的系统应该是能够收放自如的。因此，若是真的将营销和内容团队提供的Word文档转化成为一个可靠的页面，这样的事情不该该令你头疼。

 

       虽然有些细节的处理上确实须要多加注意，可是个人经验告诉我，其实并不要想复杂了，也不要想多了。绝大多数时候，一个紧凑而聪明的设计风格指南（Style Guide）能让全部的事情水到渠成。

测试和实现

 

       进行原型设计确实很不错，可是原型设计的问题也在于，它仍是一种“闭门造车”的设计，并无在真正的用户那里获得验证。

 

       在真实的设备上同用户分享设计，借此能够得到最好的设计反馈。即便你仅仅只是画了线框图，也能在真实的设备上同用户进行测试沟通。

 

       测试响应式的设计，应该是一个宽泛而多样的过程。找台智能手机，把你的设计稿放进去，问问不作设计的同事和朋友，让他们看看这样的设计是否可行。接下来再换上iPad和桌面端设备，一步一步来。

全新的世界

 

       从一个全新的角度来看待复杂的问题，咱们所要面临的一切彷佛都是新的。提高团队成员的合做紧密度，模糊团队界限可让整个设计过程都快起来。咱们的设计应该不断适应新的需求和新的情况，由于咱们的内容、业务和这个世界的变化更快。

来自优设网