UI应遵循的三大网站设计原则
发表于 11:12|
来源Smashing Magazine|
作者Rob Flaherty
摘要：触摸优先设计、响应式设计、移动优先设计是UI设计师设计网站应遵循的三大原则，以使网站最大范围地适应各种设备。
触摸优先设计、响应式设计、移动优先设计是UI设计师设计网站应遵循的三大原则，以使网站最大范围地适应各种设备。外文《》中详细阐述了这三大原则。CSDN对该文进行了编译，内容如下：
随着技术的进化，Web设计的艺术和技巧也在不断进化。新的技术创造了新的挑战，而新的挑战要求新的解决方案。我们通常工作在未知领域，需要给出全新的解决方案。
考虑到有限的Web设计历史，我们必须超越当前的领域去回答更有挑战性的问题。为此，我们可以通过借鉴其他不相关领域的发展历史，如音乐，从中寻求可以帮助我们解决问题的方案。下面将列举一个18世纪早期关于巴赫的一个小故事。
巴赫和《The Well-Tempered Clavier》
1972年，巴赫完成了一部著作《The Well-Tempered Clavier》（《十二平均律钢琴曲集》），分上下两卷，每卷各有24首前奏曲与赋格曲。现在它已被誉为西方音乐历史中最重要作品之一。
在当时，为12个主要的琴键分别谱曲是完全不可能的。而巴赫却从整体上为全部的12个音作曲。正是他的这套《十二平均律钢琴曲集》，最终向人们证明了&十二平均律&是可以用来作曲的，而且其效果之美妙，以前的人们从未曾领略过。
在这个过程，所采用的解决方案是重新定义了&合调&的概念。通过修改一定的间隔，使每个琴键稍稍偏离完美的音调，从而产生一种调音系统，允许人们在所有的琴键上演奏出合调的琴乐。牺牲少量的个体品质以达到更完美的整体效果，被称为&平均律&。
该案例虽与网站设计不相关，但目的是一样的：使每个琴键都稍有缺陷，以便键盘整体表现完美。
UI设计师需要做什么？
最近几年，针对多设备进行设计已成为Web设计领域最令人兴奋的开发工作。以前主要关注网站是否可以在两个不同浏览器上运行正常，现在则转移到它是否可以在具有完全不同特性的多种设备上正常运行，这些设备具有不同的屏幕尺寸、不同的性能、不同的使用环境及不同的界面。
虽然响应式设计和针对设备定制网站可以帮助我们制作出针对不同体验的设计，但仍有很多时候我们必须做出统一的决策。这时，&平均律&的概念或许有些帮助。
该概念在UI设计中的应用一个简单的过程：为了针对一系列不同设备设计出好的体验，我们必须允许某些界面出现偶尔的不完美。我们必须做出小小的妥协，以保证我们的设计可以很好地适应其他的环境。
触摸优先设计
具有&平均律&特性的网站已经将触摸式界面应有到了最近的桌面网站设计中。
在占用面积上，手指要大于鼠标指针，所以手指需要更大的触控区域。为了确保可用性，交互元素需要更大。当交互元素的面积增大后，其他元素也需要相应的增大以保持平衡。这就需要通过margin和padding两个属性来设定。
设计有大量的空白区域，对按钮设定了额外的Padding。虽然它只是针对桌面的设计，但也可以很好地兼容触摸设备。
iPad在触摸界面和不同大小桌面屏幕之间搭建了桥梁。而iPad的流行加速了触摸屏在桌面界面设计中的影响。如果你观察一些刚经过重新设计的著名产品，如Gmail，Twitter，你就会发现Web设计已有明显的不同。他们看上去更&丰满&。有更多的空白区域，按钮有更多的Padding，上面的元素整体看来增大了不少。当然，其他的因素也在发挥作用，比如桌面屏幕尺寸的稳定增长。
当为鼠标提供了&过多&的空间，而对于手指来说，空间刚刚好时，我们的设计就算完成了。我们允许与某体验的标准有稍稍的偏差，以获得对所有可能体验的更好支持。
有一点值得提出，对触摸友好的UI对于使用桌面鼠标的用户来说，更易用。容易触摸操控的按钮，更容易被点击。
微软风格的设计受到了触摸优先思想的影响
响应式设计，达到统一设计的目的
虽然关于响应式设计的很多讨论都是关于响应式设计技术的，但响应能力本身并不是最终目标。它是达到目的的一种手段。设计具有响应能力，是为了达到其他的一些目的。可能为了支持不同的内容，服务于低宽带中传输的图片，在更小的屏幕中更好地展示布局。也可能为了在大范围不同的设备上提供统一的体验。
搭载响应式设计的火车，可以到达统一的用户体验设计的目的地。 Boston Globe网站在这方面做得很棒。
出色地将响应式设计应用到了大型网站中
响应式设计策略可以使一个简单的设计适应用户阅读Boston Globe所使用的任何设备（即便是Apple Newton）。这不仅仅是前端工程师的功劳。配合使用Media Queries和JavaScript两种技术，也可以达成这种效果。
移动优先设计
之前的案例主要针对图片设计，但&平均律&的概念应该应用于产品设计、用户体验、信息架构中&&几乎设计的其他任何领域。让我们看看产品设计及移动优先的设计思想。
从移动设备角度出发开始设计过程，构建可以满足移动环境中各种限制的产品，你需要专注于产品的最重要元素上。正如：&
&当团队进行移动优先设计时，最终是要打造一种体验，该体验主要专注于用户希望完成的最主要任务，没有任何的绕弯子与界面碎片。这对于用户体验和商务都是有利的。&
Twitter最近的一次改版验证了这些原则。
采用了简约化设计，在各种设备上具有一致的体验。
Twitter改版的目标之一是为了向用户提供一致体验，无论在电脑上还是在各种移动设备上。获得一致的视觉和感受体验对于UI来说是一个挑战，但整个产品在不同设备上获得一致的体验则是更大的挑战。针对这两方面的挑战，移动优先设计可以帮我们实现。
在Twitter的改版中，我发现了一件很有趣的事，即移动体验对整个产品设计的影响。例如，除了&Tweet&按钮外，所有的动作按钮均布置在&Home&、&Connect&、&Discover&、&Me&四个标签下面。该简单化的设计在小屏幕设备中运行完美，四个项目也能在标签栏中融洽&相处&。
在桌面网站中，虽然新增了一些其他特性，但建立在移动版本基础上的简洁仍需存在。虽然桌面版本上有大量的空间来完成更多的复杂设计，但设计仍要有所约束、有更好的适应性，以确保达到一致的多设备体验。
小心有&狼&
在巴赫之前的调音系统中，被同时演奏出的不和谐间隔的音符会产生侧耳、咆哮般的声音。音乐家把这种声音称为&狼嚎&。
在界面设计中，当针对某一种体验设计的视觉或交互元素转移到另一种体验环境中就会失效，那么我们称这种元素为&狼&。回想一下，你曾经费力地用手指点击一个很小的针对鼠标设计的链接，还有痛苦地在移动设备、触摸设备上阅读着字体很小的文本，而这些设备上的界面元素只依靠鼠标点击。这些都是UI上的&狼&。
这些文章的链接只依靠鼠标完成交互。当在触摸式的移动设备中浏览时，它们的可能性就会减低。
提供了一个好用、美观的下拉式导航菜单，但你只能使用鼠标来点击它。
响应式设计，提供针对设备的特定体验，确实可以解决很多此类问题。如果我们能调整一个按钮的大小以适应某一特定的环境，那么我们就不必接受这种笨重、顾及全局的方法。但是我们需要支持的设备数量只会增加，定制所有可能的方案即将变得不合理。
即便我们可以在执行层面定制完美的设计，但仍有必要在概念层面考虑一下可调节的、可统一访问的设计。
下面列出了几个注意事项
● 响应式地思考
即便你并不正在实现一个完全响应式设计，简单地用响应式的方式去思考将会对实现可用的、统一的设计大有帮助。
● 触摸优先式思考
针对手指点触设计的按钮，同样可以用鼠标来点击。但针对鼠标设计的按钮，用手指触控时就会显得太小了。触控优先式设计，可以确保你的网站和应用很好的迁移到其他环境中。
● 统一式思考
正如&早测试，经常测试&一样。在设计过程中，应该尽早并经常思考你的设计如何成功运行在不同的设备之上。
● 移动优先式思考
移动优先设计，可以让你专注于那些关乎你成功的事情上。保持对最重要特性的关注，在不同设备上实现统一的体验就变得更加容易了。
交互行为不会在各种界面中得到统一支持。通过鼠标来完成的功能在触摸设备上可能会有问题。通过触摸来完成的操作可能用鼠标就无法执行。但这并不意味者我们不能使用它们，只是我们应该清楚它们的使用限制。
希望用户可以在不同的设备上使用我们的网站和应用时获得完美的体验。也希望我们的劳动成果可以在尽可能多的环境中可用。（编译：陈秋歌）
原文链接：
本文为CSDN编译整理，未经允许不得转载。如需转载请联系。
推荐阅读相关主题：
网友评论有（0）
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章UI设计应当遵循这43个原则
Good UI给我们分享了他们在UI设计中的经验总结，可以说是相当的实用，值得我们在策划产品时思考的工具。 Good UI是一家研究用户体验的设计机构。我们知道成功的页面设计不仅有很高的转化率，更便于用户使用，既能满足商业目标更能为用户带来良好的体验。以下是Good UI在一些项目中获取的设计以及运营策略等方面的经验。
1. 用通栏布局代替多栏布局
2. 给用户些好处，别急着做生意
3. 整合相似的功能，去掉零碎的UI元素
4.利用社会认同效应，别总是自吹自擂
5.主要功能需要多次强化显示
6.区分选中和可点击的状态，不要使用户困惑
7.布局有层次有重点，而非简单罗列
8. 允许用户撤销操作而不是使用弹窗需要用户确认
9. 明确的告知用户适用人群而不是简单的面向所用用户
10.简洁明了，直接了当
11.页面上多使用对比的方法
12.直接标出产地，别总单纯的讲历史
13.使用简洁的表单
14.把选项列出来而不是藏起来
15.使用连续性的提示符，别让用户误以为页面到了终点
16.功能专一而不是使用太多的链接
17.提示体统状态
18. 在动作按钮上增加些吸引人的诱惑
19.用直接操作来代替无数个菜单
20.直接显示输入框可以省略一个页面
21. 用一些动效过度而不用立即显示变化
22. 循序渐进的引导用户而非生硬的要求用户注册
23.试着减少线框，减少不必要的注意
24.向用户展示功能上的便捷之处而不是泛泛的展示特性
25. 用户没有使用记录的时候要善于引导
26. 给出默认的选项而不需要用户选择
27.保持一致性降低用户的学习成本
28. 自动补全一些数据，降低用户的操作负担
29. 尊重用户的使用习惯而不是创造新的规则
30. 提示用户如何规避风险，而不是总想着如何获利
31. 善于引导用户的视觉浏览线，而非单一布局
32. 将相关的条目分组，不要杂乱无章的排列
33.采用及时校验而不是到最后才提示错误
34.需要用户输入的格式宽松严格限定格式
35.让用户有一些紧急的意识，别让用户拖得太久
36. 适当尝试饥饿营销
37. 帮助用户识别
38. 使用更大的点击区域
39. 增加加载的速度，别让用户等太久
40. 可以给用户提供一些快捷操作
41. 使用一些对比
42. 初始化的时候给用户一些激励
43.循序渐进地引导用户，不要简单粗暴地直接呈现给用户
UI设计免费学习QQ/微信
转载请注明!
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
今日搜狐热点UI设计的四个基础原则
师想要减少改稿次数，拒绝产品经理&加一道光&的需求，首先要学会不靠感觉做设计。今天这篇文章从设计原则的重要性谈起，总结了四个UI的基本设计原则，让你每一个元素界面都有理有据，适合刚入门的设计师，一起来学习。图形设计大师Paul Rand(保罗&兰德)曾经说过：&设计绝不是简单的排列组合与简单地再编辑，它应当充满着价值和意义，去说明道理，去删繁就简，去阐明演绎，去修饰美化，去赞美褒扬，使其有戏剧意味，让人们信服你所言&&&上面这段话现在看来有点啰嗦，毕竟是老外写的嘛，但其实说得非常有道理。试想下如果一个设计师只是凭感觉(而不是理性)的去排列组合你的设计元素，或许你永远无法变成一个NB的设计师，更多的是别人眼里的&美工&。事实上很多时候这样状态做出的设计，是很容易被推翻的。(特别是UI界面设计)或许当你很满意的做完某个设计给别人看的时候，经常有PM(产品经理)或者其它搅屎棍这样问：&你为什么用这个颜色?这个按钮为什么那么小?这个配图好像并没有表达我们想要的意思&&&设计师：&&&&其实很多设计师的内心的回答是这样的：因为这个颜色好看啊，竞品也用这个颜色啊。按钮做太大好难看，太土鳖啊，不够高大上，不懂别BB。卧槽，怎么没有想要的意思啊，你行你上啊。很多时候这些搅屎棍其实并不是觉得你设计得不好看，而是你的设计并不适用于当下这个产品。这就暴露出很多设计师并不是理性在做设计，而是相当的感性。So，为了能够更好的阐述如何正确的进行设计。思前想后，发现其实在做一个设计之前，需要你对将要进行的设计有一个清晰的认识。然后为了不至于犯一些低级的错误，了解和遵守设计原则显得尤为重要。脑袋里带着这些原则去进行思考和设计，那样至少确保你是走在一个正确的道路上的。严格来说，遵守这些设计原则只是做出棒棒的设计的第一步而已。什么是设计原则?都有哪些?哪个更加重要呢?简单点说就是设计时要遵守的必要准则。而这些基本设计原则其实你我心里都知道，也在很多网页上或者同事口中说起到。然后很多时候，就是做着做着就忘了，(￣工￣lll)按照过往的经验，笔者将主要有以下四条基本设计原则，并按照优先级来给她们做了排序：1、清晰明了的设计首先我们必须明白的一点，设计是服务于产品的。或者说是为了解决产品上碰到的问题而发挥作用的。因此，你所要设计的产品需要在某个界面或者节点上完成某个目标。这个时候用户在足够清晰的界面环境中轻易完成任务显得重中之重啊。如果你打开一个页面或者App，无从下手，不知点哪里。或者找个想要的功能按钮找个半天，卧槽，那恭喜你，你的产品可以去屎了。这个时候你的设计再漂亮也是白搭，(其实这类设计还真的蛮多的，其实你会发现那些牛逼的产品经理不会整天和设计师过不去，只要设计的图形或流程是能够满足产品需要的，他们都会通过，他们喜欢把主要精力放在产品逻辑和用户体验上，而不是设计得好看不好看的细节&当然那些矮穷矬的产品经理没事就喜欢和设计抬杠，不吐槽下设计，他们一般都浑身上下都不舒服，我只想说滚& 原谅我又没忍住)so，消灭歧义，帮助人们更准确的理解和使用产品应该是排在首位的。2，高效的操作其实单就高效而言，似乎与清晰明了差不多。但试想下，高效是不是就意味着清晰正确的处理目标任务呢?答案是不一定的。高效无障碍不代表不会出错。很顺畅的出错才叫惨，这个成本相当的大的。另外一个极端就是交互层级太复杂，本来两步就可以完成的东西，硬是饶了一圈，搞个4-5步才完成。这尼玛就是作孽，一般这类产品不是被吐槽的很惨就是直接弃之，能一步完成的东西不要设计成两步。知道为什么iPhone为什么那么火吗?除开品牌和乔布斯的个人魅力，iPhone的手机用起来是真的爽，，因为用起来真的很简单，笔者没玩过任何智能设备的老爸一拿上手就知道怎么点，，所以说苹果的设计叫什么?叫做功力!所以优化功能逻辑，减少层级，同时预判结果，让流程更顺畅。让人们使用的更加轻松快捷的完成设计目标，才是王道。3，设计的一致性人是个很敏锐的动物，你会发现，你特别容易发现一堆同类物品中的异类。例如Windows的关闭窗口按钮是在右上角，而Mac的关闭窗口按钮是在左上角，无论是你之前是在用这两个中间的哪个系统，突然跳到另一个系统你肯定会特别特别不习惯，因为你已经熟悉了那个操作方式，直觉告诉你那样才是关闭按钮的正确姿势，，所以对于相同的问题，提供相同的解决方案，减轻用户的认知及记忆负荷，一旦确定一个设计模式，打造更符合直觉的产品体验显得相当重要。当然在某些时候，为了能够突出某个功能，或者让人加深印象，故意设计成不一致的情况也不是没有，，所以说到底还是为了产品的目标，灵活运用此原则就对了。4，美观大方的设计很遗憾，尽管笔者也是GUI出身，但当仔细分析过之后，你会发现，一个产品漂不漂亮确确实实是排在前三个原则之后的，，因为它并不是用户体验的核心所在，
╮(╯_╰)╭举个最最简单的栗子。我想大家对微信都了解得不能再了解。但其实作为设计师的你真的觉得微信设计得漂亮么?笔者的答案是，微信设计得中规中矩，与很多&漂亮的App&比，他显得普通。但是，微信设计得让你挑不出太多的毛病，甚至有些细节让人觉得很棒，对于一个过亿级的产品，不出错，且用户能够很清晰快速的完成他的目标，那它就妥妥的成功啦&，有句话说的好，&最好的设计就是没有设计&。换句话说就是，好的设计让你感觉不出来它是经过设计的。一切都是那么的自然和顺理成章，所以，漂亮和美观只是提升体验和激发共鸣或者说愉悦的一个重要手段。对于一个产品而言，特别是那种大的产品，完成目标任务永远是第一位。设计师所要做的是细节耐心的打磨界面，让别人更加愿意花费时间和精力去使用你的产品。总结看到结尾，其实你会发现其实本文并不是针对视觉设计师而写的。笔者的个人想法在于，要想成为一名优秀的设计师，需要从多个角度去给自己施肥。技能只是成为一名优秀设计师的其中一个必备条件。如果你在开展设计时，考虑的不仅仅是作为一个视觉设计师的那块内容，或许你的高度已经不一样了。当你足够的清楚这些原则，足够了解你的产品的时候，或许你与产品经理已经在同一高度去考虑问题。那样你设计的东西也就不再那么经不起推敲了。首发地址: UI设计的四个基础原则_UI设计_丝路教程网资源地址: (分享请保留)
打开微信“扫一扫”，将本文章分享到朋友圈
快给朋友分享吧！
Ctrl+Enter
你的打赏就是我的动力！
悄悄说，听说打赏的人收入都比我高，不信你试试。
注: 打赏金额随意，完成后，请手动关闭本窗口。
Ctrl+Enter
您将要删除您的大作
UI设计的四个基础原则
在她入驻到UI中国的日子里
总共吸引了1390位设计师的驻足流连
总共收获了12位设计师的由衷赞赏
总共获得了7位设计师的悉心珍藏
总共引起了2位设计师的深入讨论
依然要删除吗？网站建设中UI设计应该要遵循哪些原则啊_百度知道
网站建设中UI设计应该要遵循哪些原则啊
能不能专业人士具体讲讲？
我有更好的答案
清楚的是第一个元素，是指大家都非常熟悉的操作你不能刻意的去改变://www。“简单”是提高审美的秘密武器。加入“纹理”UI设计，奉承是UI设计应该考虑的一种方式。三、给用户以熟悉的感觉所谓的给用户熟悉的气息，但绝非一个清晰的接口是一个很好的产品。UI设计。模糊，不清楚的主题界面不是用户喜欢的原因。模糊的web界面？四，比如：有下划线的指的是超链接，你总不能颠倒过来吧？差号就是倒退或者删除按钮，才不会让用户在访问页面时产生错愕的感觉:整个的要点有统一的风格，所以最好列和内容页面将会发展成一个夷为平地，这不仅包含统一，这完全是站在用户的角度来思考问题的，比如主页是平的，希望能给你帮助，避免用户在繁杂的内容不断探索。现在许多网站都知道这个问题，许多网站进行修改，如果遵循着几条原则，顾名思义，是整个UI设计美丽的学位。因此，UI第一件事要做的就是建立接口的清晰的思维，从而将这一思想应用到实际的发展。它将在很大程度上改善用户体验。总之一句话、舒适、自由、增加美观度。之所以在UI设计中要保持一致的风格。六，但也使现场操作简单，相应的页面还在开发过程中必须考虑的一个重要点。五、整体风格要保持一致性，这无论你怎么创新，至少在目前来说，这不能改变吧，它将使你的网站更不同，更加完美;简而言之，整体风格必须统一、和用户交互，就是让产品成为美好事物的必备条件。清晰的框架，简洁的网页设计，美观的界面，友好的互动体验，这些都是一个成功的UI设计所必须的。我们在进行网站建设时、等。二：只有保持统一的风格.net/）里找到的资料、界面的整体设计很漂亮。好的UI设计不仅让网站有个性。UI指的是设计软件的人机交互、操作逻辑，颜色的搭配也统一字体、布局，提升页面响应速度UI的最终目标是改善用户体验，必须注意两个相应的加快页面的用户体验，给用户以愉悦之感美丽的程度，主要是指在UI设计的过程中要遵守一定的原则，就现状而言，有品位，这是一个比较广泛的概念.thcec，所以很容易导致疲劳，不仅有一个清晰的接口，而且给用户以简洁的感觉。用户的第一印象是非常重要的。和简单的用户界面设计原则会让用户在最短的时间内找到他们想要的内容，这是每个UI设计人员必须从指导方针、遵从“简洁但不简单”的设计原则UI设计。所以，UI设计人员，另外加入自己的创意在里面一定会成为一位好的UI设计师。我是从无锡网站建设（
采纳率：72%
为您推荐：
其他类似问题
您可能关注的内容
美甲培训的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。50被浏览3,699分享邀请回答2添加评论分享收藏感谢收起2添加评论分享收藏感谢收起