可以通过以下这些方法去学：

1、学习软件知识

包括掌握Photoshop、Axure、Illustrator、sketch、蓝湖等常用软件。另外，制作原型，界面，图标制作，素材制作，切图等等相关步骤的软件都需学会。

软件是是设计师的基础，新手刚入门可以先从这点入手。娴熟的技法，是完美展现设计作品的必备条件，要熟练掌握好。

2、临摹作品

对于刚入门的UI设计师来说只要去图库网站找一些素材，借助工具进行修饰即可，其实这只能锻炼你的借鉴能力，当你的技法娴熟到一定程度，就可以尝试临摹。通过临摹，一则用来强化技法层面的能力，二来也能提升初学者的创新能力。

临摹的内容，可以有两方面选择：一种是系统自带的图标，另一种则是行业牛人的设计作品，捉摸他们的设计风格、思想和细节，都能加深对设计的认识

3、掌握平面设计理论知识

包括要掌握构图、排版、色彩和图形的基础理论知识。学习的途径毋庸置疑我们首选从书本获得！

4、锻炼手绘能力。

成为一个优秀的UI设计师需要一定的手绘能力，为什么？首先，在纸上的动手能力比在软件上完成较快速，效率有一定提升。

另一方面，通过手绘，能突出自己创作的与众不同，甚至能够从“乱涂乱画”中得到灵感。没有美术基础的小伙伴也不要太担心，这些后天可以勤加练习弥补的。

5、学会寻找灵感

找灵感其实也就是培养审美的能力，这点建议大家可以多逛一下设计网站。当你能知道什么好看，什么不好看，会排斥那些不好看的设计的时候，这时候你的品味就自然上升了。

另外，看到不错的设计要记得采集下来，但一定要学会整理分好自己的素材文件夹。这对于一个设计来说是非常重要的。

1、力争各层面特别是学校领导的支持。

学校网站不应只是为了装点门面，它需要相当多实质性的东西来填充，这就要求我们这些网站建设实施者向学校领导积极反应学校网站建设的重要性和必要性，还要告诉他们，我们现在需要什么？当然，作为学校网站建设初期最需要的肯定是资金，各个学校可以根据自身情况决定采用何种方式建设学校网站：对于资金比较充足的学校可以考虑购买专门WEB服务器、租用专线上网的方式，这样以后在网站建设方面就可以更好的大展拳脚；如果学校资金比较紧张，那可考虑租用网站空间的形式建设学校网站。无论采用那一种方式，我们都应当事先要有充分的资金预算，不然，今天向领导“要”两万，明天再“讨”一万，那可能将是一件非常不愉快的事，甚至让领导怀疑你的办事能力。如果说学校网站在建设初期，采用的是租用空间，但是后来租用空间的方式就无法满足学校网站建设的需要，那么便要“搜集”种种理由向领导要求以建立专用WEB服务器的方式建设学校网站。

2、学生是宣传网站最好的“工具”。

现在的学生很喜欢上网，他们交际广泛，而且他们毕业后将走向全国东西南北，所以动员学生参与到学校网站建设中来，会对学校网站建设起到相当大的宣传作用。比如说为吸引学生参与网站建设，学校在建站初期便搞了一次全校学生参与的校园网络文学赛，要求学生作品直接在网站指定页面发表，结果在近两月的时间里先后收到数百篇包含诗歌、散文、小学等形式的文学作品，学校从中评出了不少优秀作品并通过网站进行了奖励，更有其中一些学生的作品被国内一些学生刊物选登，这对学生和网站建设都是一种很好的支持；

另外，学校网站还开设学校论坛，邀请学生做适合自己兴趣爱好栏目的版主；不定期举办电脑作品比赛，为学生提供网站域名空间，也从中发现了有不少好的作品。通过这一系列的活动，确实可以让更多的学生了解学校网站并参与其中，达到不错的宣传作用。

3、通过与知名网站合作等形式，加强网络资源库建设，以获得社会各界的支持。

学校网站要得到社会的认可，资源建设是一个永恒的主题。首先做好学校自身资源(试题资源、课件资源、课件素材、论文等)的收集整理，将这些资源上网并不断更新，其次，努力做好与国内优秀网站的合作工作，并努力争取与更多优秀教育网站的合作，以交换资源等形式获取他们的各类教学资源供网站使用(标明来源)。不仅提高了学校的知名度，合作网站也因此获得更多利益，一举多得。

4、加强校友录建设：校友是学校发展不可缺少的力量

一个优秀的学校网站离不开广大校友的参与和支持，一所学校，特别是有几十年甚至近百年历史的学校，在国内外有无数的校友，很明显，在信息飞速发展的今天，校友与学校之间以及校友与校友之间仍然主要通过普通信件或电话进行联系的方式已经落后，作为母校，有义务也有责任加强校友录的建设工作，以进一步加强校友与学校以及校友自身之间的联系。校友，在很多情况下一提到这个问题便让人想起仅仅是在学校搞校庆时拉赞助的对象，其实，广大的校友带给母校的往往是一些更可贵的看不见的无形资产，他们经常会为母校的发展献计献策，他们的成功也会推动母校的发展，对在校学生起到一个良好的示范作用，所以我们没有理由不加强这一块工作。学校网站还可以设立校友录这一栏目，也可以将每年校友的今后的毕业照全部上网，同时发给学生的毕业照都印上学校网址，以加强校友与母校的联系。

5、校园快讯与校园风采图库建设让师生、校友和社会各界及时了解校园动态

在学校网站建设过程中，校园快讯以及校园风采图库的建设非常的重要，它们在一定程度上可以反映学校的办学思想、教学观念以及师生在校园的学习生活情况，经常查看这些栏目的除了在校师生外我想主要还有以下一些群体：一是已经毕业校友，他们关心学校的发展，所以会经常“回来”看看，试想，如果一位已经工作几十年的老校友再“回到”母校能看到自己当初的照片依然还放在学校网站上，那种心情是何等的激动，毕竟母校还没有忘记他们；二是，各级教育部门和学生家长，他们需要及时了解一些学校的教育教学工作情况，并及时的向学校有关部门反馈他们的意见或建议。基于以上原因，可以这么说吧，现在学校各类活动，只要不是拍得太差的图片我都会分类的把它们放在网站的校园风采图库内，因为我相信一点，“今天的新闻或图片”将是明天的“历史”，为此我也很自豪，因为我在记录着学校的历史！

6、加强部门网站和教师个人网站建设，促进教师积极参与。

学校网站同时为各教研组或教师个人提供了展示自己的舞台，通常情况下在校教师向外界展示自己的机会只有下面这几种方式：上公开课、撰写教学论文、发表课件、学校评优等，这几种方式的展示范围一般是有限的，仅局限于本校或本地教育部门，而通过网站形式，教师或教研组便可把自己推向全国乃至全世界。在鼓励教师或教研组建立网站建设方面，校领导对于建立教师个人或教研组网站的应该给予相当的物质和精神奖励，这样便使更多的教师参与到网站建设中来，能提升学校网站的“综合势力”。

7、多作宣传是提升网站知名度的必要手段

“酒香也怕巷子深”，没有必要的宣传手段，再优秀的网站如果没有必要的宣传也只能“埋没”。作为一个学校网站，除了上面提到的一些宣传手段外，还可以做以下几点宣传工作：

（1）.注册搜索引擎，让别人能“搜”到你。一些著名的搜索引擎或网站如雅虎、google、搜狐、网易、百度、新浪等都有网站登录功能，可以将自己的网站在他们的网站登录网页进行注册，将自己网站信息登记进去，这样网络用户在查找相关资源时便可轻易的进入到自己的网站；

（2）.到一些优秀教育网站“做广告”，这里的广告是指免费广告，比如说我校网站就曾登录K12网站、中国基础教育网等的论坛栏目，通过“灌水”等形式发贴，通过为这些网站的用户提供本校网站的会员帐号等形式吸引用户，必要时还可做做“假”，假装自己是一个与学校网站毫不相干的用户，然后对这些教育网站用户说“我发现一个优秀教学网站”，鼓吹一通，既不损人也可利人利己，何乐而不为呢？

（3）.注册网络实名，这也是一个让别人找到自己的方法：以我校为例，不少学生或校友不知道学校网站域名，结果我们注册了一个“舟山中学”的实名，只要在浏览器地址栏输入“舟山中学”便可进入学校网站，便于记忆。

8、加强监督管理，杜绝网站不良信息

学校网站除了在技术上对服务器进行安全配置防止黑客或病毒外，在网站内容方面特别是动态栏目内容方面一定要加强监督管理，学校网站面对的主要对象仍然还是学生，所以对信息的监督和过滤工作还是必要的，过滤是通过网络技术防止某些内容出现在网站上，这相对还是比较容易实现的，而监督却是一个长期坚决的任务。学校网站不同于商业网站，商业网站动态内容要求24小时有人值班，而学校网站建设一般只有一个人左右，不可能有这么多时间来随时检查网站内容，这就要求我们采取必要的措施。

9、学校网站的建设者要有十二分的奉献精神

建设学校网站应当说是一种“后台工作”，编写一个程序或发现并修补一个程序漏洞，可能让你没日没夜连续工作数十小时；收集一批资料，然后再上传到资源库，更可能用掉你连续几天甚至几十天的时间；寒冬或酷暑、白天或深夜，网络服务器随时可能出现问题，那都得跑到机房，轻则重启电脑，重则可能需要重新安装系统；另外每天可能还得处理来自网站用户或校友的十多封甚至数十封电子邮件，关键的关键是这些工作都是“后台”工作，这种工作实际上已经没有了上班下班和假期的区别，可以说极少有人能理解其中的苦，有的同事不理解甚至还以为你一天到晚坐在电脑前“挺舒服的”，没有一颗十二分的奉献精神是很难做到的。当然，做了工作向领导适当的反应一下也是可以的，当今的社会，拿点适当的报酬已经不能说是没有“奉献精神”了。

10、学校网站建设内涵是第一位的，不必过多的追求技术含量。

许多人一谈到学校网站建设，便想到“专业”二字，难！网站的竞赛评比也不例外，评委首先看的便是“外表”，如果网页做得漂亮，即使没有真正的内涵，那这网站的评分也绝不会低，如果再稍有点内容，便极有可能得到“高分”；相比较而言，那些内容丰富而且相当实用的网站，如果缺少漂亮的外表，甚至无缘“入围”，像国外的联合早报，国内的新浪、网易、搜狐等网站，他们的界面几乎没有怎么变化和刻意的美工，但这些网站却依然得到了大家的认可，在世界网站排名中名列前茅，这些网站的成功，我想最根本的一点还是其丰富的内涵与实用性。所以学校网站建设不要太多的考虑技术问题，而应该更多的考虑不断增加网站内涵，让人能从学校网站获取丰富的知识与信息，这才是学校网站建设成功的关键所在，“最漂亮的网站不一定是优秀的网站，有内涵的网站才更具有生命力！”

11、牢牢掌握邮件这个秘密武器。

学校网站建设过程中，不断有校友、资源用户、论坛用户等注册，就拿学校网站来说，邮件可能联系着数千个与学校网站有关联的数千用户，如果利用得好，对宣传学校能起到事半功倍的效果，利用邮件群发软件可以在瞬间把信息发送到这数千个用户的邮箱中，宣传效率之高确实是传统媒体无法比拟的。

响应式设计无疑是当前网页设计领域当中，不可忽略的必要组成部分。而响应式网页中的图片显示又是老生常谈的问题，许多争论集中在响应式网站的图片应当怎么展示。继续延伸开来，那么响应式网站中的图片库应当如何设计呢？

相比于单个图片，图库的展示无疑更加复杂，牵涉到的变量更多，所以实现起来也更加麻烦费神。接下来，我们来看看如果要设计响应式的图片库，有哪些值得注意的基本规则和技巧。

在桌面端上导航的存在可能没什么，但是在移动端上查看的时候，导航还是尽量隐藏起来，需要的时候再显现。而诸如左右切换的按钮和标明浏览位置的圆点，最好是在光标移动上去之后再显示，这样的设计不仅可以避免用户分心，而且能避免内容和导航元素之间的冲突，降低整体设计的混乱感。

如果你设计的图片库是类似网格布局的话，你可能会尽量挑选和横向的图片，或者方形的图像。这样的设计在兼容桌面端设计的同时，还可以让用户在小屏幕上更好地查看。人像类的图片在手机上适合纵向屏幕上浏览，如果横过来的话，图片会显得特别小，浏览会相当不方便。横向是最佳的，如果不行的话，使用方形的图片会是很好的兼容性方案。一个响应式的图片库的设计需要考虑多种因素，请务必牢记用户的不同浏览场景。

触摸屏上使用手势操作几乎是用户的本能了。所以，在设计响应式图片库的时候，滑动操作等手势操作赋予用户更多的权力，让体验更加逼真。在移动设备上使用箭头导航太过于乏味、老旧，手势交互更加自然也更符合真实的交互体验。

Lightbox效果大概是桌面端网页上最常见的图片浏览模式，图片以弹出框的形式呈现出来，能随着屏幕尺寸和鼠标操作来缩放。在产品展示的页面当中，这种图片浏览模式的使用尤其广泛和频繁，但是在移动端上的时候，它可能会引起大量的用户体验上的问题：盖住其他的交互控件、无法退出、尺寸不合适等等。

如果你使用幻灯片的形式来展现大量图片组成的图片库的时候，导航就显得尤为重要了。用户肯定不想在等待加载中耗费太多的时间，他们依然会按照自己的速度点击，翻页，进入，退出，保持，等等。所以，当你要使用导航元素的时候，一定要设计在让他们觉得不碍事的地方。不要让导航的小圆点盖在文本或者链接上，并且避免复杂的控制方式，这样会分散用户注意力，并让整个页面的设计都趋于复杂。可点击跳转的导航小圆点能让用户快速跳转到他们想要去的地方，提升效率，降低无谓的消耗。当然，不要弄的太复杂！平衡最重要！

通常情况下，不同类型的媒体混到一起没啥问题，但是用户肯定不想翻看图片的时候，突然发现下一张图片变成了视频，突如其来的声音和额外的流量消耗绝对是他们不愿意碰到的事情！将视频和图片分割开来，让他们知道接下来的会是什么东西，不要让意外发生。

这一点很重要，尽管很基础，但是依然需要强调一下。图片尽量不要去填充超过本身尺寸的空间，这样会让图片表现出象素化的失真效果。值得注意的是，很多情况下图片在移动端完全填满某个区块没问题，但是在桌面端的时候，最大也不能超过本身宽度。这似乎并不难？但是依然有许多响应式页面，当你拉宽浏览器界面的时候，会有图片超出本身尺寸来显示。

如果你的图库中的图片要牵涉到图片缩放，那么尽量让图片去缩小，而不是放大。甚至最好是为图片设定精确的尺寸。通常，图片缩放会使用百分比来控制它的大小变化，如果你个属性被设定为按照百分比来缩放，那么其他的相关属性最好设置为自动。比如将图片宽度设定为50%，那么高度缩放应当设定为自动。

使用图片标题或者其他的附加文字会为你自己和用户增加大量的问题。第一个问题是，它在移动端界面上会强制显现出来。在移动端有限的界面空间上，它可能会和图片挤压到一起，带来混乱的用户体验。另外一个问题是，它可能会限制你的文字使用。你得想明白它怎么断句，占据多大空间，在桌面端显示和在移动端显示分别是什么样，怎么才正常，太多的变量控制起来会相当麻烦。图片各不相同，而文字总会莫名其妙地覆盖到某些不该覆盖到的地方。图片和文字的对比度总会随着不同的图片而变化，这也是麻烦的地方之一。

小心无大错，今天说的规则并不复杂，但是当你开始为图片库进行响应式设计的时候，这些鸡零狗碎的问题开始显现，在意想不到的地方影响整个设计和体验。以用户为重心，小心绕过这些坑，会让你的响应式网页更优秀，也更快搞定。

webdesignerdepot

译文地址：优设

原文作者：JAMES GEORGE

优设译文：@陈子木

转载请注明：片头模版 » 网页设计图库阅览(响应式网页图片库设计的九个注意事项)