设计每日一贴---北京兰亭妙微/UI设计公司

012020-3

看懂设计（一）：菲兹定律在UI设计中的实际应用

菲兹定律在交互设计中的应用是很普遍和广泛的，有时候在我们设计界面之时，不知不觉就应用了菲兹定律，但是我们却未察觉。

关于菲兹定律的具体内容，可以说是大家耳熟能详，甚至在学生时代就有所了解：从一个起始位置移动到最终目标点所需的时间由两个参数来决定，到目标的距离（D）和目标的大小（W），可以用数学公式表达为：

在当今互联网背景下简单来解释说，就是大而近的目标区域意味着用户用需要耗费太大的精力即可轻易点击或者关注到目标，反之，小而远的目标区域则意味着用户将耗费一些时间和动作才能触及到目标。在一般情况下，让用户耗费时间和动作的操作，会使人产生负面的用户体验。

以上说的，其实是对菲兹定律表象的解释，每个人在网上也会搜到很多类似的解释。当你搜索时会发现，关于对菲兹定律的应用，网上绝大多数的资料都是在以PC端界面作为定律的解释，但移动界面却少之又少，这里面的一部分原因是菲兹定律提出的时间，一部分也是因为在移动端的设计中，菲兹定律会变得很零散和琐碎，很难真正用几句话来总结，这篇文章也是我第一次试着在移动端的交互设计的范畴内对菲兹定律的应用进行简单的总结。

1. 让按钮更大一些

我在这一部分分了几种情况，分别进行讨论，其一呢，就是fab button。在现有的fab button中，大家会发现，虽然按照正常iOS的设计规范，一般按钮的大小都会被设计为88px，但是在设计fab button时，我们一般都会选择大一些的尺寸，例如100px、110px、120px。

其二就是页面内功能按钮的大小，我们在做界面设计的时候，都知道做到统一性，但很少去深入地想，界面统一的背后是在像用户传达一个什么意思。

举个例子，这是【洋葱数学】和【360家庭防火墙】的登录界面，市面上的登录界面大多大同小异，基本组成就是账号+密码+按钮（或手机号+按钮等）的组合。

那我们来思考一个问题：为什么在手机号只有11位已经确定的情况下，输入框和【下一步】按钮还要做这么长，接近通栏的一个样式。

我试着来找到这个问题的答案，第一个，是对于品牌设计规范的执行，对边距是有一定要求的，也就是我们常说的保持页面元素的统一性；第二个，即是对菲兹定律的应用，在这个页面中，最核心的两个功能【输入】和【下一步】给予他们一个足够的大小，会让用户的注意力更加集中，避免被分散精力。

2. 让相关联的信息内容距离更近

这也和设计原则中的亲密性相一致。依旧可以用我们常见的信息输入界面来加以印证。这两个界面是我随手做的，对比一下即可看出优劣。

在相关性比较强的功能中，拉近彼此距离，既能够给信息一个清晰的层级，更能够减少用户的操作成本。

3. 界面的边界会让用户操作更加精准和容易

在研究交互界面的时候，我们总听到一个说法，“界面的边界是无限的”，它当然不是在说界面是无限大的，对于一块屏幕来说，在进行操作的时候，无论是PC的鼠标光标，还是移动屏幕的手指，在操作到界面边缘时，因为无法延伸，所以最精准。

这也是我们看绝大多数fab button弹出的菜单是在界面边缘，而不是在界面中央的原因。

除此之外，还有在很多安卓手机中，卸载app时会让用户把要卸载的app拖拽到屏幕上边缘的区域进行卸载，这样相比给一个【X】按钮，会更加精准，而且拖拽的操作也会给用户更多思考的空间和时间，减少误操作的概率。

但是，这个但是很重要，不要把所有既定的法则都奉为圭臬，所有事物都要辩证着看，在没有限定条件的情况下，菲兹定律的应用不会有任何问题，但是如果加以条件的限定，就不是这么简单了。

简单举个例子：在进行删除等负向操作时，很多app会把确认删除等操作做得离你的上一步操作区域更远，或者让确认按钮更加不明显，这是在帮助用户，或者说希望用户在做负向操作时，有更多的思考空间和时间，规避误操作的影响。

在《看懂设计》这个系列里，我会选择性地对在交互设计中常常被应用的设计心理学、方法论等进行简洁有案例的解析，例如大家耳熟能详的交互设计7大定律、斯金纳箱理论、边际效应、锚定效应、格式塔理论等等让大家尽可能地在实际案例中找到它们的应用，而不是让这些方法论成为我们脑海中的空中楼阁，知道、听说过，但是不会应用。

转自：站酷-鹿爷不是咸鱼

评论(0) 浏览(3809)

012020-3

纯JS对页面表格进行EXCEL导出（完整导出，包含页面样式）

seo达人

纯JS对页面表格进行EXCEL导出

1.中间部分在style标签那种可以使用css样式对表格进行任意样式的修改

2.在tableid.innerHTML中可以对表格中的内容进行修改替换（其中放的内容就是导出后的表格内容）

3.需要引入xlsx.full.min.js文件

4.tableid为为表格的id

5.sheetName为下载后的文件名称

base64(excelFile) {

return window.btoa(unescape(encodeURIComponent(excelFile)))

},

tableToExcel(tableid, sheetName) {

var uri = 'data:application/vnd.ms-excel;base64,';

var template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +

'xmlns="http://www.w3.org/TR/REC-html40"><head>' +

' <style type="text/css">' +

' .ivu-table td{\n' +

' /background-color: #FFFFFF;/\n' +

' /color: #fff;/\n' +

' /border:1px solid #FFFFFF;/\n' +

' }\n' +

' /每行的基本样式/\n' +

' .ivu-table-row td {\n' +

' color: #000000;\n' +

' min-width:50px;\n' +

' }\n' +

' /头部th/\n' +

' .ivu-table-header th{\n' +

' color:\t#FFFFFF;\n' +

' font-weight: bold;\n' +

' background-color: rgb(98,167,249);\n' +

' min-width:50px;' +

' border:1px solid #FFFFFF;' +

' position: relative; \n' +

' top: expression(this.offsetParent.scrollTop); \n' +

' z-index: 300; \n' +

' }\n' +

' /偶数行/\n' +

' .ivu-table-stripe-even td{\n' +

' background-color: #ffffff!important;\n' +

' }\n' +

' /奇数行/\n' +

' .ivu-table-stripe-odd td{\n' +

' background-color:#F0FFFF!important;\n' +

' }\n' +

' /选中某一行高亮/\n' +

' .ivu-table-row-highlight td {\n' +

' background-color: #d63333!important;\n' +

' }' +

'</style>' +

'</head><body ><table class="excelTable">{table}</table></body></html>';

if (!tableid.nodeType) tableid = document.getElementById(tableid);

tableid.innerHTML = tableid.innerHTML.replace('暂无筛选结果','')

var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};

var a = document.createElement("a");

a.download = sheetName + ".xls";

a.href = uri + this.base64(this.format(template, ctx));;

a.click();

},

format (s, c) {

return s.replace(/{(\w+)}/g,

function (m, p) {

return c[p];

});

}

评论(0) 浏览(4047)

012020-3

浅谈数据可视化及经验分享（上）

鹤鹤

结合学习的可视化知识以及自身的经验写下了这篇关于数据可视化的分享

转自：站酷-四喜sixi

评论(0) 浏览(2988)

012020-3

10天，5个百度Doodle，成千上万的抗“疫”英雄

鹤鹤

他们是“最美逆行者”

前几天，当大家打开百度首页时，可能发现了一些小变化：搜索框上方不再是熟悉的红蓝标志，而是展现出了一系列人物形象。

这些人物都是一直奋战在抗击新冠肺炎疫情一线的“最美逆行者”——我们想用这样的方式，向他们致敬。

2月9日-2月10日，致敬抗疫医护人员

2月11日-2月12日，致敬抗疫志愿者

2月13日-2月14日，致敬抗疫建设者

2月15日-2月16日，致敬抗疫专家组

2月17日-2月18日，致敬抗疫解放军

当大家点击这些 Doodle 图片时，会进入相关的战“疫”专题内容页，在这里可以实时了解抗疫英雄的资讯动态。

医护人员、志愿者、建设者、专家组、解放军，他们用坚定的信念和坚毅的身躯，为这场战斗筑起了最坚固的防线，守护着无数人的生命安全。我们向这些英雄致敬！

此前，我们向广大网友发起了“抗疫英雄系列 Doodle”征集活动，希望各界设计师用手中的画笔为抗疫英雄们创作特别的百度 Doodle，让更多人看见疫情中的勇气与希望。

最终，五组致敬 Doodle 在百度首页上线。除此之外，我们还收到了26幅来自百度网友投稿的设计作品。谢谢大家的用心创作！

一起来欣赏吧!

蔡依彤

林文煌

刘昱

轻抚淡抹素人妆

相超

蔡依彤

林文煌

麦芽

董一孛

林文煌

刘昱

姚思思

赵会娟

不将就

李小兰

李钰

林文煌

孙红花

陶泽崧

严安琪

张晶

冯胜方

高旭

林文煌

杨晓婧

张晶

在这场疫情狙击战中，不论是什么角色、什么岗位，都能贡献自己独特的力量。而这些精美的 Doodle 设计作品，正向人们传达了必胜的信心和能量。我们衷心感谢所有设计师的用心创作.

除了通过百度 Doodle 为抗疫工作鼓劲，我们还运用技术的力量，专为疫情防控研发了各种产品和服务，希望为大家带来实用有效的帮助，为战“疫”贡献一份力量。

我们成立了3亿元的疫情及公共卫生安全攻坚专项基金，用于支持新型冠状病毒等新疾病的治愈药物筛选、研发等一系列抗击疫情工作。

我们上线了“拒绝野味”的搜索提示，在百度 APP 搜索“蝙蝠”、“果子狸”、“穿山甲”、“豪猪”、“狍子”、“蛇”、“野猪”等关键词时，大家都能看到“不可食用”的警告。

从百度“问医生”免费在线咨询，到新冠肺炎智能自测工具；从“疫情小区”地图，到患者同乘查询；从免费开放智能外呼平台，到 AI 体温检测落地北京清河火车站……百度一直在行动。

当所有的决心、爱心和信心汇聚在一起，我们知道，阴霾和灰暗一定会被驱散，春暖花开的日子一定会到来。众志成城，我们共渡难关！

转自：站酷-百度BMD

评论(0) 浏览(2829)

012020-3

10部好片，评分9+，给你脑洞一个解释

鹤鹤

探索全球顶尖设计好物

大部分人今年过年基本的生活状态如下

如大家所知疫情紧急，

我们虽心系前线却无力支援，

尽量避开人群不出门也算为国家做了些许贡献。

但是宅家除了刷短视频玩游戏，

作为设计师的童鞋们，

咋能不趁此长假好好充实自己呢

（学技能估计太难了），

在此推荐几部经典的设计片，

娱乐的同时，也丰富下自己的设计知识。

01

《Abstract: The Art of Design》

《抽象：设计的艺术》

这是由Netflix公司出品的一部文化创意纪录片，

豆瓣评分高达9.4，纪录片总共8集，

每一集都探访一位全球顶尖的设计师，

涉及插画、建筑、汽车、摄影、平面、室内、场景、球鞋等领域，

用独特的拍摄叙述手法展示设计师的创作过程，

揭开世界设计师非凡创意的艺术理念。

此片由《连线》杂志的主编Scott Dadich 创作并担纲制片，并由奥斯卡最佳纪录片导演Morgan Neville和Elizabeth Chai Vasarhelyi执导，

每一集都可以欣赏到电影画面般的浸入感。

02

《The Genius of Design》

《设计天赋》

此片是BBC英国广播公司

播出的一系列关于产品设计纪录片，

一共包括五集，每集60分钟，

通过采访各知名设计师及相关的设计评论者，

讲述产品设计的历史和未来。

不管你喜欢Dieter Rams的隐忍

还是Phillipe Stark的奔放，

每个从事产品设计工作的朋友都能从这部纪录片得到一些启发。

03

《Modern Masters》

《现代艺术大师》

此片由BBC英国广播公司

推出的一档电视系列节目，

总共4集，分别介绍了20世纪四位重要的艺术大师：

安迪·沃霍尔（Andy Warhol）、马蒂斯（Henri Matisse）、毕加索（Pablo Picasso）和达利（Salvador Dali）的工作与生活。

通过走访四位艺术家们生前的居所、

艺廊及博物馆等地，

向观众展示了他们伟大的艺术贡献以及惊人的后世影响力。

你会发现，麦当娜的专辑封面、米菲兔的文具、

甚至是你家的沙发和电话，也许就来源于这四位大师的创作……

04

《Simon Schama's Power of Art》

《艺术的力量》

此片是由BBC英国广播公司推出年度纪录片，

总共8集。

讲述卡拉瓦乔、贝尼尼、伦勃朗、雅克、透纳、梵高、毕加索以及罗斯科八位艺术家的生平。

该系列结合了戏剧化的重塑、壮观的摄影技术，

以及Simon Schama独特而富有个性化的叙事，

全面剖析艺术大师们孕育和诞生艺术品时扣人心弦的故事。

这部纪录片荣获国际艾美奖最佳艺术节目、

2007年第60届英国电影电视艺术学院奖最佳摄影纪实类等多项国际大奖。

05

《Design for Life》

《创意生活》

这是一档BBC真人秀设计师比赛节目，共6集。

国际知名设计师Phillipe Starck

寻找英国最有前途的新人设计师。

通过全国选拔，

12名怀抱热情与梦想的设计师来到到巴黎史塔克设计学院学习，

他们的目标是把自己的设计思路变成真实的产品。

Phillipe Starck设计了一系列任务，

挑战设计师们的才华创意，但最后的赢家只有一个，

走到最后的人将获得和世界顶尖设计师一起工作的机会，

准备面试的设计师们更要好好看一看喔。

06

《Objectified》

《设计面面观》

这是一部以工业设计为主题的长篇独立纪录片。

展示了创造工业产品流程的实录片断，

并记录了与世界顶尖设计师们的交谈与讨论。

采访到的设计师们包括：

纽约现代艺术馆馆长Paola Antonelli，

慕尼黑BMW首席设计师Chris Bangle，

巴黎兄弟设计组合Ronan & Erwan Bouroullec，

美国明尼阿波利斯市Walker艺术中心平面设计师Andrew Blauvelt等世界最具影响力的设计师。

导演Gary Hustwit用洞察深切的镜头

记录了这些在我们身边随处可见的工业设计产品，

看似稀松平常的设计背后，

却是设计师们倾尽全力的良苦用心。

作为从事工业设计的童鞋来说，

自己的专业领域能被拍成纪录片也是一件感到自豪的事。

07

《Urbanized》

《城市化》

Gary Hustwit 纪录片设计三部曲的最后一部，

着重记录一座城市的规划与设计，

突出了致力于解决城市问题和提出对策的世界顶尖建筑师、规划师、决策者等人。

世界上一半以上的人口生活在城市地区，

到2050年这个比例将变为75%以上。

虽然一些城市正在经历爆炸式的增长，

但其他一些城市却处在正在压缩的过程中。

在住房、流动性、公共空间、民众参与、经济发展和环境政策之间取得平衡的挑战正迅速成为一个普遍关注的问题。

中国的城市化进程也是如此，

因此观看该片，会有更深刻的体会。

08

《我在故宫修文物》

由中国中央电视台出品的一部三集文物修复类纪录片，纪录故宫里稀世珍奇文物的修复过程和修复者的生活故事，

把工匠精神这件严肃的事讲得细腻、

温软且富有人情味。

该片是一部内蕴优裕的纪录片，

在一个个对于文物修复师而言的稀松日常里，

我们能够看到比修复钟表、青铜器、木器、古琴更多的东西。

片中提到一句“修复文物是穿越古今与千百年前进行对话的特殊职业和生命体验”，

在故宫神秘的身影下，这似乎更令人感到惊艳。

作为中国设计师，更应好好观看，

正所谓，民族的，才是世界的。

09

《デザインあ》

《啊！设计》

《啊！设计》是NHK一档经典设计节目，

每一集邀请重量级设计师讲述设计的秘诀，

深泽直人、仲条正义、祖父江慎、伊东丰雄，柴田文江……

虽是面向儿童，但视角独特、充满对思维的启发，

赞叹日本设计教育的同时也让我们反思。

这部片放到大学设计系的课程都不为过，

因为很多一些基本的设计常识，

即使已经就业的童鞋可能都不了解，

值得设计师好好观看。

10

《夢と狂気の王国》

《梦与狂想的王国》

该片为日本的一部纪录片，

由砂田麻美执导，探秘吉卜力手绘动画创作过程，

展现了宫崎骏、高畑勋、铃木敏夫，

三位老人以及新时代年轻人对动画的执着与热爱。

关于宫崎骏、吉卜力的纪录片已经很多了。

《梦与狂想的王国》则是选取了宫崎骏创作封笔之作《起风了》和高畑勋创作《辉夜姬物语》的这段时间为记录对象，

着力表现了两人的友谊历史和之后的创作分歧。

宫崎骏乘坐火车去看自己的试片会。

看完后，他走上台只说了一句话，

“对不起，生平第一次看自己的电影哭了。”

相信看完后，大家都会想再刷一遍宫崎骏的电影。

这10部纪录片，都是设计片中的经典，

可以收藏起来反复的观看，

每个设计阶段都会有不一样的感悟。

片子通过搜索都可以找到片源，

找不到的可以在后台回复（纪录片），

会推送片源链接。

最后希望大家身体健健康康的，

祝福祖国早日抗疫胜利，加油！

转自：站酷-Hang5174

评论(0) 浏览(2994)

292020-2

CSS初学：如何修改Zblog中的CSS

前端达人

在学习应用css之前我们要先了解一下什么是css。CSS是Cascading Style Sheets(层叠样式表)的简称.

CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
在标准网页设计中CSS负责网页内容(XHTML)的表现.
CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
CSS是由W3C的CSS工作组产生和维护的.

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

了解了什么是css后我们就可以方便对其应用了，我们可以用以下两种方式加入你的博客当中去，由于css的应用方式有就近原则。也就是说最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。

链入外部样式表文件 (Linking to a Style Sheet)

你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下：

<head>

<title>文档标题</title>

<link rel=stylesheet href="http://www.123-seo,cn/dhtmlet.css" type="text/css">

</head>

而在XML中，你应该如下例所示在声明区中加入：

<? xml-stylesheet type="text/css" href="http://www.123-seo.cn/dhtmlet.css" ?>

定义内部样式块对象 (Embedding a Style Block)

你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。定义方式请参阅样式表语法。示例如下：

<html>

<head>

<title>文档标题</title>

<style type="text/css">



</style>

</head>

<body>

请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。

————————————————

版权声明：本文为CSDN博主「html基础教程」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/html168/article/details/104565043

评论(0) 浏览(3264)

292020-2

CSS样式表使用技巧充分利用样式表的强大性

前端达人

为了提高网页的维护更新效率，我们可以使用样式表，来仅仅改变一个文件，就能达到同时改变几百个网页的外观。为了能充分用好样式表的强大性和灵活性，笔者就怎样有效使用样式表，来谈谈自己的一些心得体会

随着互联网经济的不断发展，互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长，各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量，我们对网页中每一个栏目的增删，都会是一个很复杂的过程。为了提高网页的维护更新效率，我们可以使用样式表，来仅仅改变一个文件，就能达到同时改变几百个网页的外观，而其个性化的表现未受任何损失。为了能充分用好样式表的强大性和灵活性，笔者就怎样有效使用样式表，来谈谈自己的一些心得体会。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

1、在一个网页中同时调用CSS的多种引入方式

在 HTML中引入CSS的方式很多，例如直接插入式，使用链接外部样式表，使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问，这些引入方式能不能同时在一个网页中被调用，它们之间会不会产生混乱？其实，我们大可不必这么担心，这就是它为什么称之为“层叠样式表”的原因，浏览器在处理网页中的样式表是按照一定的顺序来处理的，首先检查页面中是否有直接插入式CSS，如果存在就先执行它，针对本句的其它CSS就不去管它了；接着检查网页源代码中的"STYLE"标记，有就执行了；接下来再依次检查执行"@import"导入的内部样式表和链接的外部样式表。因此，我们完全可以在一个网页中同时调用CSS的多种引入方式。

2、快速创建CSS外连式文件

对于一个初接触CSS的网页设计人员来讲，要用写字板之类的编辑器，去创建一个CSS外连式文件是相当困难的。由于Dreamweaver对CSS支持的很好，用它来帮助就轻松多了。具体可以这样操作：首先在纸上写好在网站的网页中可能要用到的格名称，然后在Dreamweaver的编辑窗中调出CSS面板，一个一个地定义，并在一个空白页上适当地写一点相关内容，边定义边试用，效果不满意，立即修改；全部定义好后，再用记事本创建一个空的CSS外连式文件，把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去，就大功告成了。

3、让背景图案静止不动

当网页不能在一屏全部显示时，我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容，移动滚动条时一般图象和文字是一起移动的，那么我们有没有办法使背景图象不随文字一起“滚动”呢？利用CSS就可以实现这样的目的，我们只要把下面这段源代码直接放在网页的与标签之间就可以了，其中bg.jpg就是网页中的背景图象，大家可以把它换成自己需要的背景图象：

复制代码

代码如下:

〈style type="text/css"〉

〈!--

BODY { background: purple url(bg.jpg);

background-repeat:repeat-y;

background-attachment:fixed

}

--〉

〈/style〉

4、让网页自动进行“首行缩进”

用 DreamWeaver来设计网页的用户知道，在DreamWeaver中输入空格不是那么的方便，我们可以利用css来设计“首行缩进”功能来弥补这个缺憾。打开DreamWeaver的设计界面，在该界面中找到CSS的属性定义对话框（Style Definition for .style1)，在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能，在这里要注意的是，所谓“首行”是指每段内容的第一行，也就是直接按回车键就形成了一个新的段落。缩进最好以“em”（字符）为单位，比如：汉字编排要求每段开始缩进两个汉字，设置好的CSS如下所示：

复制代码

代码如下:

〈style type="text/css"〉

〈!--

.style1 { text-indent: 2em}

--〉

〈/style〉

5、巧用css来设定文字的背景

在 DreamWeaver中，如果我们需要给文字加上不同的背景颜色时，操作上很简单，只要用鼠标单击属性面板上的文字颜色按钮，从弹出的颜色设置栏中选择需要的颜色就可以了。但如果我们要给部分文字加不同的背景色，该怎么操作呢？由于DreamWeaver3中没有这方面的功能，但我们可以巧妙利用css 来实现这样的目的。具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个css命名为bjstyle，接着在网页中选中需要设置颜色的文字，然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码：

复制代码

代码如下:

〈style type="text/css"〉

〈!--

.bjstyle { background: #cc00bb}

--〉

〈/style〉

6、给指定内容加边框

在 DreamWeaver中，我们可以利用CSS强大的定义功能来给某部分内容加边框，定义时首先打开DreamWeaver的设计界面，在该界面中找到 CSS的属性定义对话框（Style Definition for .style1)，该对话框的“Border”设置项就是用来定义指定内容边框线的，其中“top”、“bottom”、“left”、“right”设置栏是分别用来定义指定内容四周边框线的粗细和颜色的，这些设置项设置好后还需要在下面的“Style”中定义线型，否则我们将看不到定义的边框线，因为 css默认的线型是“none”。下面是一个定义了上边框为：蓝色细线；左边框为：绿色中粗线的CSS源代码：

复制代码

代码如下:

〈style type="text/css"〉

〈!--

.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}

--〉

〈/style〉

7、用样式表来控制超级链接的颜色

如果你仔细研究一下超级链接，你就会发现，浏览器处理超级链接的默认方式是，对于目前还没有访问过的超级链接是用蓝色且带有下划线的文字来显示的，对于已经访问过的超级链接则是用深紫色且带有深紫色的下划线的文字来显示的。这些默认的设置颜色看得时间，可能就产生厌倦之感，并且很有可能与自己网页的背景颜色不协调。因此我们完全可以按照自己的视觉要求，来自由更改超级链接的显示颜色，让它更能体现自己的风格。下面笔者就来介绍一段修改超级链接显示颜色的源代码，代码如下：

我们可以把这段源代码添加在HTML文件的……之间，它可以对对本网页中的任何一个超级链接都起作用，其中这段代码中的：

A:link {text－decoration: none; color:blue}是说明了超级链接还没有被访问，它没有下划线，颜色为蓝色。

A:visited { color:red; text－decoration:line－through }说明了超级链接被访问后，它的颜色变成了红色，有了一根删除线。

A:active { color:white; text－decoration:underline }说明超级链接处于活动状态的时候，它的颜色变成了白色，有了下划线。

A:hover {text－decoration:none;color:＃FF0000;background－color:black}说明鼠标移动到超级链接后，它没有下划线，文字颜色变成了黄色，背景颜色是黑色。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

根据上面的解释，我们可以把超级链接在各种状态下的显示颜色修改成自己喜欢的那种，以便能更好地展示自己的个性。

8、给选中文字加背景图像

在 DreamWeaver中，我们同样可以给指定文字加上背景图象，其操作过程与给指定文字加背景色操作类似，只不过是把选择背景颜色换成选择加载的背景图象就是了。其具体操作过程是，首先我们可以先做一个定义背景色的CSS，例如给这个css命名为txstyle，接着在网页中选中需要设置颜色的文字，然后在工具栏中单击一下“txstyle”就行了。下面就是一个定义背景图象的CSS的源代码（其中test.gif就是所加载的背景图象）：

复制代码

代码如下:

〈style type="text/css"〉

〈!--

.txbgstyle { background-image: url(test.gif)}

--〉

〈/style〉

————————————————

版权声明：本文为CSDN博主「html基础教程」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/html168/article/details/104525011

评论(0) 浏览(3716)

282020-2

数字工业导购场景设计 —— 工业品牌PC 3.0升级

涛涛

2019下半年，阿里巴巴旗下B2B业务平台1688官宣了全新的战略升级目标：针对工业领域进行全面升级支撑，坚持“品牌正品、品质服务”，聚焦在内容、服务和用户上，致力于打造需求驱动的C2M新模式。重塑市场格局，加速制造业流通数字化升级。

伴随着业务的整体升级，工业品牌PC首页作为买卖家感知业务价值的门面和流量承接的关键场景，需要同步升级才能更好的满足买家需求，提升买家体验。

三大升级目标

1、提升内容与买家匹配精准度：从旧版的数据分析来看，搜索和导航栏UV占比超过70%，其他区块尤其二屏及以下点击率很低，说明市场大部分的内容对用户没有吸引力，需要为用户推荐更丰富、更精准的内容才能把用户留下。

2、提升内容框架合理性：旧版场景框架结构较为混乱，内容组合自由度过高，采购链路不清晰导致用户体验不佳。且随着内容的更新，旧的框架和新的内容也无法匹配，需要升级框架使采购链路清晰化，提升用户体验。

3、提升工业品牌业务认知：随着业务打法的升级，工业品牌的核心理念也进行了升级，新版的工业品牌市场需要提升用户对平台价值的认知，树立品牌正品的心智。

升级策略

一、围绕买家分层升级内容，提升内容与买家匹配精准度

定义用户感兴趣的内容，从买家分层做起。我们沿着围绕买家身份进行个性化导购场景推荐的思路，以用研提供的买家核身数据资料为基础，再结合运营提供的经验，提炼出不同身份的用户画像，抽象出他们的采购特性。

然后新增了一个专门的个性化身份场景模块，进行有针对性的商品、商家、工具推荐，实现人、货、场的个性化匹配。

除了新增的个性化身份场景外，首屏新增了三个固定营销位，聚焦在典型买家的普遍诉求上：新人活动、金融活动和服务(物流/发票)专场，打造以贸易商/电商为核心，门店/企业自用为辅助客群的营销+工具一体化流量圈。同时新增了低价场景，以日为单位，折扣幅度更大的“每日特惠”，用低价的硬通货提升用户粘性促进转化，强化用户对工业品牌的认知。

二、打造营销+工具扁平阵地，从内容框架升级提升体验

1、采购链路清晰化

定义每一屏用户的核心诉求，提供有效的、符合用户预期的对应内容

2、简化容器形式：突出内容降低阅读成本

以首屏设计为例，以不同底色分隔区块，省略所有不必要的间距分隔，使首屏的整体性更强，形式更紧凑聚焦。

三、营造「数字工业」氛围，提升用户对市场感知，塑造品牌正品心智

导购场景里的品牌打造，核心价值在于强化市场形象，让用户感知到平台价值，认知平台特性。工业品的电商网站那么多，除了内容层，表现层我们也需要和其他网站有显著区分，具有自己的“个性”，给用户不一样的体感。

所谓“个性”即是品牌定位。我们从工业品牌的平台定位出发，聚焦业务本质的核心理念和价值优势上，再结合用户视角的感知倾向，最后推导出数字化、工业感两个核心关键词。然后顺着关键词进行具像化发散，再从具象元素中筛选出典型的，抽象的融入到页面中落地，从而打造「数字工业」的品牌形象。

标准色&ICON

工业品牌从1.0版本开始就一直采用的是黑黄配色，黑灰色取自金属，黄色则是机械设备、工业产品(如安全帽)上的常用漆色，这两种颜色是工业场景中最具代表性、通用性的常见色，容易让用户感到熟悉而引起情感共鸣。为了品牌的延续性，3.0仍然保持了黑黄的主配色，并在此基础上新增了四种从工业品行业场景中提取的重色调冷色，增加配色上的丰富度和拓展性。ICON设计上运用粗重的线条，硬朗的方角，塑造沉稳、严谨的体感。