技术改变世界 阅读塑造人生! - shaogx.com

This string was altered by TechBlog\Plugins\Example.; This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.

5个Web设计的草稿和成品对比

纸和笔大多数的设计师都习惯在纸上开始自己的工作,假如你也是设计师,想必手上也有一两本笔记本,上面随手记了一些漂亮的草稿吧。不管你的草稿有多草(糙),都是值得自豪的,为什么不亮出来给别人看看呢?别的设计师的草稿都是什么样子的呢?Buzz Usborne, Campaign Monitor (活动监测)... 全文

Web设计 Web Web界面

一定要知道的Web设计八个流行趋势(1)

人靠衣装,公司靠包装,Web必须得大大方方。要是公司网页代表不了自身形象,千万不能怪客户的肤浅和先入为主,怪就得怪自家网站的设计太落伍和守旧。想知道那些人见人爱、舒心夺目的Web设计是怎样的吗?为此,我们从过去几年目睹的网站中总结分析出了一些当下网页流行的设计元素。当然,这个并非是什么终极榜单;但是,我们预测,在往后的日子,里面提及到的Web设计流行趋势依然会“大行其道”。... 全文

Web 设计 Web设计

Web开发设计:分页还是加载,这是一个问题(1)

无论是在web页面还是手机应用,信息往往无法在一个页面全部展示,这就需要用到一些可以扩展页面信息的交互模式:分页(Pagination)和加载(Continuous Scrolling)。分页和加载都是非常常见的交互模式,我们每天都会遇到,也正是因为太常见,我们甚至感觉不到它们的存在,浏览到页面的底部时,看到分页就顺手点一下,自动加载了就继续阅读。但正是这小小的一点,也会带给用户很不同的微妙感受。下面就来聊聊这些小差异带来的大不同。分页... 全文

Web设计 Web分页 架构设计

WEB应用安全设计思想

一、前言我一直在思考的一个问题,就是安全问题的本质到底是什么。我们见到过各种各样的攻击,也做过各种各样的防御方案。有的方案好,有的方案却有缺陷。那么好的方案好在哪里,为什么就能够抵抗攻击,到底什么特性使得攻击者的成本升高了,使得风险降低了。这中间是否有什么共同的东西呢?经过一段时间的思考和观察,我初步得出了一个结论:安全问题的本质是信任问题。二、信任关系的划分是安全设计的基础安全问题的本质是信任问题。... 全文

安全 Web 设计思想

关注Web响应式设计的局限和误区

多设备测试响应网站当前响应式设计受到了很大关注,知名web网站.net在首页有60%的文章在讨论这个主题。然而,有时关注一下web响应设计中的禁忌也是大有裨益的。最近,响应设计大师BradFrost在.Net杂志上发表了响应设计人员最常犯的五种错误(WebAppTrend正在翻译中)。其中提到了这样的错误:利用特定尺寸的屏幕来触发布局变化和避免将单一的尺寸应用于所有的屏幕。关于后者,Frost写到:... 全文

Web 响应式设计

web响应设计中应避开的五种误区

使响应设计具有良好的用户体验所需要的东西远远不止媒体查询这么简单。如果你认为响应设计只是创建柔美的布局,那只能说明你不得要领全文

web 响应设计

移动Web设计 我拿什么来拯救你?

各式或华丽,或炫目,或让人迷惑,或让人叹服的Web设计已经愉悦我们很长很长的日子了。 可是,当有一天我们发现了一个新事物——用手机上网,在手机上看网页,我们看到了一种不一样Web,这种网页大家通常叫他们Wap页面,这种页面形式用简洁的视觉效果,清晰的页面架构和小分量的页面体积第一次满足了我们手机上网的需求。... 全文

设计 移动Web

18 个详细的响应式 Web 设计教程

  创建移动优先的响应式设计使用 Sass 和 Compass 组合构建一个响应式的、单页的应用... 全文

Web设计 响应式

移动web开发设计45大实用指南

不幸的是,并非虽有的浏览器都提供了官方文档,这本书所做的更多的工作是研究并测试每个功能。请记住:所有的这些指南都是不完全的,有些甚至不一定是正确的!但不管怎么说,这些资料的确可以帮你了解移动web世界。 ... 全文

移动Web 设计 开发

必胜宅急送Web App产品背后的设计思路

O2O模式是餐饮业在移动消费趋势下主动拥抱互联网的方向,迎合餐饮消费者从以往经验判断为主转变为依靠移动设备、LBS、社交网络进行立体决策的过程。App成为联系消费者和餐饮业的重要纽带,承载着在O2O双向流程的闭环中加深消费者对品牌的认同和感情认知的作用。... 全文

Web App 必胜客 产品设计思路

2012年Web设计和开发的15个趋势

CraigGrannell访问了行业的精英们关于2012年Web设计和开发的趋势。2012看来注定是有趣的一年。经济的下滑继续广泛地打击行业,看不到结束的尽头。政府极力审查网络,否认公民的基本权利,支撑摇摇欲坠的媒体公司。对网页设计和开发,2012还是比较混乱的一年。我们处于很多小矛盾当中:移动贪婪地占领市场份额;原生App威胁开放的互联网;收费墙阻碍曾经免费的信息;合作与分裂的冲突;复古(Skeuomorphism)的交互模式挑战创新的设计模式。... 全文

Web 设计 开发 15个趋势

来自雅虎性能团队的web架构设计经验分享

作为一位web工程师,着眼最多之处莫过于性能与架构,本次幸得参与sd2.0大会,得以与同行广泛交流,于此二方面,有些心得,不敢独享,与众博友分享,本文是这次参会与众同撩交流的心得,有兴趣者可以查看视频  架构设计的几个心得:  一,不要过设计:never over design  这是一个常常被提及的话题,但是只要想想你的架构里有多少功能是根本没有用到,或者最后废弃的,就能明白其重要性了,初涉架构设计,往往倾向于设计大而化一的架构,希望设计出具有无比扩展性,能适应一切需求的增加架构,web开发领是个非常动态的过程,我们很难预测下个星期的变化,而又需要对变化做出最快最有效的响应。。  ebay的工程师说过,他们的架构设计从来都不能满足系统的增长,所以他们的系统永远都在推翻重做。请注意,不是ebay架构师的能力有问题,他们设计的架构总是建立旧版本的瓶颈上,希望通过新的架构带来突破,然而新架构带来的突破总是在很短的时间内就被新增需求淹没,于是他们不得不又使用新的架构  web开发,是个非常敏捷的过程,变化随时都在产生,用户需求千变万化,许多方面偶然性非常高,较之软件开发,希望用一个架构规划以后的所有设计,是不现实的  二,web架构生命周期:web architecture‘s life cycle  既然要杜绝过设计,又要保证一定的前瞻性,那么怎么才能找到其中的平衡呢?希望下面的web架构生命周期能够帮到你。[img=734,242]http://images.cnblogs.com/cnblogs_com/yizhu2000/WindowsLiveWriter/web_8D00/architecture_life_cycle_thumb.gif[/img]  所设计的架构需要在1-10倍的增长下,通过简单的增加硬件容量就能够胜任,而在5-10倍的增长期间,请着手下一个版本的架构设计,使之能承受下一个10倍间的增长  google之所以能够称霸,不完全是因为搜索技术和排序技术有多先进,其实包括baidu和yahoo,所使用的技术现在也已经大同小异,然而,google能在一个月内通过增加上万台服务器来达到足够系统容量的能力确是很难被复制的  三,缓存:Cache  空间换取时间,缓存永远计算机设计的重中之重,从cpu到io,到处都可以看到缓存的身影,web架构设计重,缓存设计必不可少,关于怎样设计合理的缓存,jbosscache的创始人,淘宝的创始人是这样说的:其实设计web缓存和企业级缓存是非常不同的,企业级缓存偏重于逻辑,而web缓存,简单快速为好。。  缓存带来的问题是什么?是程序的复杂度上升,因为数据散布在多个进程,所以同步就是一个麻烦的问题,加上集群,复杂度会进一步提高,在实际运用中,采用怎样的同步策略常常需要和业务绑定  老钱为搜狐设计的帖子设计了链表缓存,这样既可以满足灵活插入的需要,又能够快速阅读,而其他一些大型社区也经常采用类此的结构来优化帖子列表,memcache也是一个常常用到的工具  钱宏武谈架构设计视频 [url]http://211.100.26.82/CSDN_Live/140/qhw.flv[/url]  Cache的常用的策略是:让数据在内存中,而不是在比较耗时的磁盘上。从这个角度讲,mysql提供的heap引擎(存储方式)也是一个值得思考的方法,这种存储方法可以把数据存储在内存中,并且保留sql强大的查询能力,是不是一举两得呢?  我们这里只说到了读缓存,其实还有一种写缓存,在以内容为主的社区里比较少用到,因为这样的社区最主要需要解决的问题是读问题,但是在处理能力低于请求能力时,或者单个希望请求先被缓存形成块,然后批量处理时,写缓存就出现了,在交互性很强的社区设计里我们很容易找到这样的缓存  四,核心模块一定要自己开发:DIY your core module  这点我们是深有体会,钱宏武和云风也都有谈到,我们经常倾向于使用一些开源模块,如果不涉及核心模块,确实是可以的,如果涉及,那么就要小心了,因为当访问量达到一定的程度,这些模块往往都有这样那样的问题,当然我们可以把问题归结为对开源的模块不熟悉,但是不管怎样,核心出现问题的时候,不能完全掌握其代码是非常可怕的  五,合理选择数据存储方式:reasonable data storage  我们一定要使用数据库吗,不一定,雷鸣告诉我们搜索不一定需要数据库,云风告诉我们,游戏不一定需要数据库,那么什么时候我们才需要数据库呢,为什么不干脆用文件来代替他呢?  首先我们需要先承认,数据库也是对文件进行操作。我们需要数据库,主要是使用下面这几个功能,一个是数据存储,一个是数据检索,在关系数据库中,我们其实非常在乎数据库的复杂搜索的能力,看看一个统计用的tsql就知道了(不用仔细读,扫一眼就可以了)  select c.Class_name,d.Class_name_2,a.Creativity_Title,b.User_name,(select count(Id) from review where Reviewid=a.Id) as countNum from Creativity as a,User_info as b,class as c,class2 as d where a.user_id=b.id and a.Creativity_Class=c.Id and a.Creativity_Class_2=d.Id  select a.Id,max(c.Class_name),(max(d.Class_name_2),max(a.Creativity_Title),max(b.User_name),count(e.Id) as countNum from Creativity as a,User_info as b,class as c,class2 as d,review as e where a.user_id=b.id and a.Creativity_Class=c.Id and a.Creativity_Class_2=d.Id and a.Id=e.Reviewid group by a.Id ..............................................  我们可以看出需要数据库关联,排序的能力,这个能力在某些情况下非常重要,但是如果你的网站的常规操作,全是这样复杂的逻辑,那效率一定是非常低的,所以我们常常在数据库里加入许多冗余字段,来减小简单查询时关联等操作带来的压力,我们看看下面这张图,可以看到数据库的设计重心,和网站(指内容型社区)需要面对的问题实际是有一些偏差的  同样其他一些软件产品也遇到同样的问题所以具我了解,有许多特殊的运用都有自己设计的特殊数据存储结构与方法,比如有的大型服务程序采取树形数据存储结构,lucene使用文件来存储索引和文件  从另外一个角度上看,使用数据库,意味着数据和表现是完全分离的(这当然是经典的设计思路),也就是说当需要展示数据时,不得不需要一个转换的过程,也可以说是绑定的过程,当网站具备一定规模的时候,数据库往往成为效率的瓶颈,所以许多网站也采用直接书写静态文件的方法来避免读取操作时的绑定  这并不是说我们从今天起就可以把我们亲爱的数据库打入冷宫,而是我们在设计数据的持久化时,需要根据实际情况来选择存储方式,而数据库不过是其中一个选项  六,搞清楚谁是最重要的人:who's the most important guy  在用例需求分析的时候常常讲到涉众,就是和你的设计息息相关的人,在web中我们一定以为最重要的涉众莫过于用户了。,在一个传统的互动社区开发中,最重要的东西是内容,用户产生内容,所以用户就是上帝,至于内容挑选工具,不就是给坐我后面三排的妹妹们用的吗?凑或行了,实在有问题我就在数据里手动帮你加得了。。这大概是眼下许多小型甚至中型网站技术人员的普遍想法。钱宏武在他的讲座里谈到了这个问题:实际上网站每天产生的内容非常的多,普通人是不可能看完的,而负责把精华的内容推荐到首页上,所以很多用户读到的内容其实都依赖于的推荐,所以设计让工作方便的工具也是非常重要,有时甚至是最重要的。  七,不要执着于文档:don't be crazy about document  web开发的文档重要吗?什么文档最重要?我的看法是web开发中交流>文档,  现在大的软件公司比较流行的做法是:  注重产品设计文档,在这种方法里,产品文档非常详尽,并且没有歧义,开发人员基于设计文档开发,测试人员基于设计文档制定测试方案,任何新人都可以通过阅读产品设计文档来了解项目的概况  而web项目从概念到实现的时间是非常短的,而且越短越好,并且由于变化迅速,要想写出完整的产品和需求文档是几乎不可能的,大多数情况是等你写出完备的文档,项目早就是另外一个样子,但是没有文档的问题是,如果团队发生变化,添加新成员怎样才能了解软件的结构和概念呢,一种是每个人都了解软件的整个结构,除非你的团队整体消失,否则任何一个人都能够担当培养新人的责任,这种face2face交流比文档有效率很多。  于是就有了前office开发者,现任yahoo中国某产品开发负责人的刘振飞所感觉到的落差,他说,我们的项目是吵出来的,我听完会心一笑  八,团队:team  不要专家团队,而要外科手术式的团队,你的团队里一定要有清道夫,需要有弓箭手,让他们和项目一起成长,才是项目负责人的最大成就  总结:  0)架构是一种权衡  1)web开发的特点是是:没有太复杂的技术难点,一切在于迅速的把握需求,其实这正式敏捷开发的要旨所在,一切都可以非常快速的建立,非常快速的重构,我们的开发工具,底层库和框架,包括搜索引擎和web文档提供的帮助,都提我们供给了敏捷的能力。  2)此外,相应的,最有效率的交流方式必须留给web开发,那就是face2face(面对面),不要太担心你的设计不能被完备的文档所保留下来,他们会以交流,代码和小卡片的方式保存下来  3)人的因素会更加重要,无论是对用户的需求,还是开发人员的素质。  另:有关web效率,有著名的14条规则,由yahoo性能效率小组所总结,并广为流传。业已出现相关插件(YSlow),针对具体网页按彼规则评分,这次该小组负责人Tenni Theurer也受邀来到此次大会,我把Tenni小姐(之前真的没有想到她是个女孩,并且如此年轻)和她的团队的14 rules列在下面  Make Fewer HTTP Requests  Use a Content Delivery Network  Add an Expires Header  Gzip Components  Put CSS at the Top  Move Scripts to the Bottom  Avoid CSS Expressions  Make JavaScript and CSS External  Reduce DNS Lookups  Minify JavaScript  Avoid Redirects  Remove Duplicate Scripts  Configure ETags  Make Ajax Cacheable  通过安装firebug和YSlow这两个firefox插件(请注意要先安装firebug再安装yslow,下载后拖动到firefox里即可)我们可以看到你的网页根据下面的规则的评分,这是我在博客园博客首页的评分截图,上面D表示总分,下面是单项评分,A最好F最差,不知道还有没有G :)... 全文

性能 web 设计 架构 雅虎

2015年7个重要的Web设计趋势

2015 年 7 个重要的 Web 设计趋势:Web 设计趋势每一年都会有所变化。但设计师的创意天赋是推动改变网页设计标准的法则。设计师负责将创意转化为趋势、趋势转变为标准。如果在 2015 年,网页缺少以下 7 个设计元素,必定被淘汰。1、排版更灵活这部分的主要焦点在于,字体展现会受到新兴排版原则影响。事实上,网页字体和打印字体还是有很大不同的,在 2015,我们会摆脱过去将文本挤在一起的老式思维。... 全文

Web开发 web

论Web App、Hybrid App、Native App设计差异

目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App。一、Web App、Hybrid App、Native App 纵向对比首先,我们来看看什么是 Web App、Hybrid App、 Native App。(1)Web APPWeb App 指采用Html5语言写出的App,不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用,基本上可以说是触屏版的网页应用。优点(1)开发成本低,(2)更新快,(3)更新无需通知用户,不需要手动升级,(4)能够跨多个平台和终端。缺点:(1)临时性的入口... 全文

Web App Hybrid App Native App 设计差异

对web设计师而言最有价值的20个移动app(1)

自从第一部iPad发布以来,该设备一直遭受PC忠实粉丝的抨击,他们声称它仅仅是消费品而已。任何使用了iPad(或类似的智能手机或平板)的人都知道这是毫无意义的废话。当然,很少有设计师会偏激到想要烧掉他们的PC或Mac而只使用移动设备,但是当你外出的时候,你依然可以使用这些现代的apps继续工作,并且即使你可以使用你的PC,这些apps仍然是有用的。在那些设计师和开发者的帮助下,我们总结了20个最好的apps。1. Adobe IdeasPrice: £6.99/$9.99 Platform: iPhone/iPad/Android... 全文

移动app web设计师

手机web——自适应网页设计(html/css控制)

一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。... 全文

网页设计 浏览器 web开发 手机

Web开发者和设计师必须要知道的 iOS 8 十个变化

喜大普奔,喜极而泣,喜当爹,随着iPhone 6和iPhone 6 plus的上市,ios 8终于在上周推送更新了。新的设备,新的分辨率。接下来这篇文章介绍下 iOS 8有哪些变化。概述... 全文

iOS 8变化 Web开发者 设计师

移动Web前端开发

前言这篇文章就当进入移动web开发的宣誓稿吧,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这潭水愈发的深了!不多言,进入主题。我将从下面几个方面探讨移动web前端开发:分辨率、屏幕、手机浏览器、设计理念、响应式web开发。分辨率手机分辨率比PC分辨率要庞杂得多,各种分辨率有木有?大小差距那么大有木有?这在一定程度上给页面制作带来了不小的麻烦。所以针对这样的因素,必须有充分的考虑。我从两个方面进行思考:... 全文

移动Web 前端开发 设计理念 响应式web开发

1 2 3 4