人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】,BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營。
產(chǎn)品設(shè)計(jì)時(shí)細(xì)節(jié)是產(chǎn)品經(jīng)理最頭疼的問題,一個(gè)button,一個(gè)鏈接都要考慮太多的細(xì)節(jié)問題。作者整理了常見的一些功能設(shè)計(jì)問題,一篇文章看懂這些功能設(shè)計(jì)。來學(xué)習(xí)吧。
鏈接也稱為超鏈接,所謂的超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是一個(gè)圖片,一個(gè)電子郵件地址,一個(gè)文件,甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁中用來超鏈接的對象,可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上,并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。
鏈接可以是一個(gè)字或是一段字這樣的文本,也可以是一個(gè)按鈕,一張圖片,當(dāng)你點(diǎn)擊后跳轉(zhuǎn)到另一個(gè)目標(biāo),當(dāng)你把鼠標(biāo)指針移到某個(gè)鏈接時(shí)會(huì)變成一個(gè)小手,當(dāng)然在手機(jī)上沒有這一特點(diǎn)。
文本樣式的鏈接一般在搜索引擎的網(wǎng)站呈現(xiàn)藍(lán)色字樣,大多會(huì)在下面加上下劃線以便識(shí)別,不過現(xiàn)如今考慮到不影響文本的可讀性與用戶體驗(yàn),逐漸取消了下劃線。而在一些別的網(wǎng)站考慮到界面設(shè)計(jì)風(fēng)格各方面的因素而不用藍(lán)色。
谷歌的文本鏈接是藍(lán)色,沒有下劃線
百度的文本鏈接也是藍(lán)色,關(guān)鍵詞是紅色,有下劃線
而京東的文本鏈接有灰色,有白色,有黑色
按鈕樣式的鏈接比文本樣式的更容易識(shí)別,每一個(gè)按鈕都是一樣鏈接。
按鈕樣式鏈接
圖片樣式的鏈接可以是單獨(dú)的一張圖片,也可以是文字與按鈕一起組成一張圖片,只是鼠標(biāo)指針掃過圖片的任何一個(gè)部位都會(huì)變成小手。
如桌面彈出這種游戲小窗口的圖片式鏈接
由文字/圖/按鈕樣式一起構(gòu)成的一張圖片式按鈕,鼠標(biāo)可以點(diǎn)擊圖中任何一部位
鏈接打開的方式有三種:第一種是在當(dāng)前頁面刷新跳轉(zhuǎn),國外的網(wǎng)站大多是這樣的打開式;第二種是在新標(biāo)簽頁面打開鏈接,國內(nèi)大多采用這種;第三種是提示用APP打開。當(dāng)然現(xiàn)在出現(xiàn)了一種新的打開方式,那就是二維碼掃描。
提示用美拍APP打開
按照連接路徑的不同,網(wǎng)頁中超鏈接一般分為以下3種類型:內(nèi)部鏈接,錨點(diǎn)鏈接和外部鏈接。
鏈接還可以分為動(dòng)態(tài)鏈接和靜態(tài)鏈接。動(dòng)態(tài)超鏈接指的是可以通過改變HTML代碼來實(shí)現(xiàn)動(dòng)態(tài)變化的鏈接,例如我們可以實(shí)現(xiàn)將鼠標(biāo)移動(dòng)到某個(gè)文字鏈接上,文字就會(huì)象動(dòng)畫一樣動(dòng)起來或改變顏色的效果,也可以實(shí)現(xiàn)鼠標(biāo)移到圖片上圖片就產(chǎn)生反色或朦朧等等的效果。而靜態(tài)鏈接,顧名思義,就是沒有動(dòng)態(tài)效果的鏈接。
與外部鏈接(即反向鏈接)相反,內(nèi)部鏈接是指同一網(wǎng)站域名下的內(nèi)容頁面之間互相鏈接。如頻道、欄目、終極內(nèi)容頁之間的鏈接,乃至站內(nèi)關(guān)鍵詞之間的Tag鏈接都可以歸類為內(nèi)部鏈接,因此內(nèi)部鏈接我們也可以稱之為站內(nèi)鏈接,對內(nèi)部鏈接的優(yōu)化其實(shí)就是對網(wǎng)站的站內(nèi)鏈接的優(yōu)化。
HTML中的鏈接,正確的說法應(yīng)該稱作"錨點(diǎn)",它命名錨點(diǎn)鏈接(也叫書簽鏈接)常常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁,通過點(diǎn)擊命名錨點(diǎn),不僅讓我們能指向文檔,還能指向頁面里的特定段落,更能當(dāng)作"精準(zhǔn)鏈接"的便利工具,讓鏈接對象接近焦點(diǎn)。便于瀏覽者查看網(wǎng)頁內(nèi)容。類似于我們閱讀書籍時(shí)的目錄頁碼或章回提示。在需要指定到頁面的特定部分時(shí),標(biāo)記錨點(diǎn)是最佳的方法。
外部鏈接,又常被稱為:“反向鏈接”或“導(dǎo)入鏈接”,是指通過其他網(wǎng)站鏈接到你的網(wǎng)站的鏈接。
外部鏈接指的是針對搜索引擎,與其它站點(diǎn)所做的友情鏈接。高質(zhì)量的外部鏈接指:和你的網(wǎng)站建立鏈接的網(wǎng)站知名度高,訪問量大,同時(shí)相對的外部鏈接較少,有助于快速提升你的網(wǎng)站知名度和排名的其他網(wǎng)站的友情鏈接。
如果按照使用對象的不同,網(wǎng)頁中的鏈接又可以分為:文本超鏈接,圖像超鏈接,E-mail鏈接,錨點(diǎn)鏈接,多媒體文件鏈接,空鏈接等。
鏈接是一種對象,它以特殊編碼的文本或圖形的形式來實(shí)現(xiàn)鏈接,如果單擊該鏈接,則相當(dāng)于指示瀏覽器移至同一網(wǎng)頁內(nèi)的某個(gè)位置,或打開一個(gè)新的網(wǎng)頁,或打開某一個(gè)新的WWW網(wǎng)站中的網(wǎng)頁。
鏈接在交互上一般會(huì)呈現(xiàn)4種狀態(tài),即默認(rèn)狀態(tài)/懸停時(shí)狀態(tài)/點(diǎn)擊時(shí)狀態(tài)/點(diǎn)擊后狀態(tài)。比如谷哥網(wǎng)站的交互體驗(yàn)。如下圖:
點(diǎn)擊前
懸停時(shí),下面浮現(xiàn)半透明線條
點(diǎn)擊時(shí),有波紋暈開的動(dòng)態(tài)效果
點(diǎn)擊后,下面線條粗
有時(shí)候是3種狀態(tài),比如百度網(wǎng)和知乎應(yīng)用:
默認(rèn)狀態(tài)
點(diǎn)擊時(shí)鏈接變紅
點(diǎn)擊后鏈接變成紫色
IOS系統(tǒng)知乎應(yīng)用的3種狀態(tài),而在Android系統(tǒng)沒有用力點(diǎn)擊這一狀態(tài)。
默認(rèn)狀態(tài)
點(diǎn)擊狀態(tài)
用力點(diǎn)擊會(huì)彈出預(yù)覽小窗口
有些時(shí)候只有2種狀態(tài),如下圖谷歌網(wǎng):
默認(rèn)和點(diǎn)擊后狀態(tài)一樣
鼠標(biāo)懸停時(shí)出現(xiàn)下劃線
默認(rèn)狀態(tài)
點(diǎn)擊時(shí)
而有時(shí)候比如在APP里有時(shí)候就一直只有一種狀態(tài),也可以稱靜態(tài)鏈接,之前的可以稱之為動(dòng)態(tài)鏈接。在不同的使用場景會(huì)因?yàn)楫?dāng)時(shí)的情況選擇最合適的交互體驗(yàn)設(shè)計(jì)。有的情況下還會(huì)加上點(diǎn)擊的音效,使用戶體驗(yàn)更暢快,這在移動(dòng)端用的使用情況多一些。
總之鏈接是網(wǎng)頁不可缺少的構(gòu)成部分,每一個(gè)鏈接的呈現(xiàn)都是經(jīng)過深思熟慮的。
作者:潘瑤瓊(簡書作者)
本文由 @潘瑤瓊 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
昨天我們在《使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作》(目錄在結(jié)尾)中學(xué)習(xí)了設(shè)置單元格以及其中內(nèi)容的空間間距和背景顏色。
其中添加列向單元格背景顏色只需要修改對應(yīng)的<tr>標(biāo)簽中的style屬性,而修改行向標(biāo)簽需要修改不同<tr></tr>標(biāo)簽中的<td>標(biāo)簽的style屬性,這樣操作起來就非常的麻煩,那有沒有簡便的修改行向單元格背景顏色的方法呢?
當(dāng)然有!
開發(fā)團(tuán)隊(duì)給出了<colgroup><col></col></colgroup>這樣的組合來解決這個(gè)問題,下面讓我們詳細(xì)學(xué)習(xí)。
<colgroup></colgroup>標(biāo)簽是一個(gè)給行向單元格打組的標(biāo)簽,在頁面中不會(huì)顯示。
<col></col>標(biāo)簽是來具體設(shè)置行向單元格數(shù)量和顏色的標(biāo)簽。
示例代碼如下:
<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>
這段代碼添加到"第一個(gè)頁面.html"當(dāng)中就可以,具體代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個(gè)網(wǎng)頁</title>
</head>
<body>
<h1>第一個(gè)網(wǎng)頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標(biāo)題</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
頁面效果如圖:
因?yàn)榈谝涣泻妥詈笠涣兄挥幸恍兴裕捕甲兗t了。
其中span的數(shù)量代表行數(shù)。
如果把span等號后面的數(shù)改成2,因?yàn)楸砀裰挥袃尚校哉麄€(gè)表格都紅了。
表格嵌套
我們可以通過向表格中添加表格實(shí)現(xiàn)表格嵌套。表格嵌套可以把一個(gè)單元格分成行向或列向分割單元格。
代碼示例如下:我們把"一列一行"分割成列向兩個(gè)單元格。
<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>
使用
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
這段代碼替換文字"一列一行"即可。
頁面效果如圖所示:
留個(gè)思考題,大家可以思考一下行向分割單元格怎么寫。
今天的內(nèi)容結(jié)束了。
全部示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個(gè)網(wǎng)頁</title>
</head>
<body>
<h1>第一個(gè)網(wǎng)頁</h1><hr>
<h2>表格元素</h2><hr>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的腳部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格標(biāo)題</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
</html>
喜歡的小伙伴請關(guān)注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯(cuò)誤歡迎大家斧正,不勝感激!
學(xué)到這里,相信大家已經(jīng)有獨(dú)立讀懂HTML代碼說明的能力了,明天我會(huì)為大家講解16進(jìn)制顏色表示方法。之后會(huì)給大家推薦html代碼參考手冊的鏈接。如果您是零基礎(chǔ)的話,學(xué)完16進(jìn)制顏色表示方法后,基本上就可以無障礙的閱讀html代碼參考手冊了,如果閱讀起來還是有困難,請繼續(xù)看后面我為大家講解一些常用元素及屬性的文章,已及html中特殊符號的輸入方法,全部做完后再結(jié)束這套教程。
如果您有任何疑問或不解歡迎關(guān)注并私信我。
HTML序章(學(xué)習(xí)目的、對象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
第一個(gè)HTML頁面如何寫?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML頁面中head標(biāo)簽有啥用?——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML元素中的屬性2(路徑詳解)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格1(基本元素)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格3(間距與顏色)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
封閉在家學(xué)網(wǎng)頁制作!為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML表單4(form的action、method屬性)——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
先要安裝css的loader
npm install css-loader style-loader --save-dev
然后在webpack.config.js中配置如下代碼
意思是先用css-loader加載css文件,再用style-loader添加在頁面中
在app目錄下創(chuàng)建component.css文件
body{ background-color: red; }
在app/index.js中引入css文件
運(yùn)行npm run start命令。
可以看到我們?yōu)g覽器整個(gè)背景都變成了紅色。
webpack做了什么呢?
看到build/app.js中有如下代碼。
再看下我們生產(chǎn)的index.html文件
奇怪了,并沒有內(nèi)斂樣式也沒有引入的css文件,那瀏覽器是為什么變紅的呢?
我們在瀏覽器中打開調(diào)試工具。
原來樣式在這!
webpack動(dòng)態(tài)的添加了內(nèi)斂樣式在代碼中。
如果多人協(xié)作開發(fā)的情況下,會(huì)有很大可能出現(xiàn)代碼命名重復(fù)的情況,如果出現(xiàn)這種情況怎么辦呢?
來讓我們試驗(yàn)一下。
在app目錄下添加兩個(gè)css文件,style1.css
body{ background-color: red; }.class1{ color: green; }
和style2.css
body{ background-color: black; }.class1{ color: blue; }
在index.js中引入這兩個(gè)文件
修改component.js文件,使其給元素添加傳入的類名
在webpack.config.js中添加如下配置
我們執(zhí)行npm run start 命令若看到
即為打包成功。
打開瀏覽器http://localhost:8080/
可以看到同樣的類名都正常顯示出來了,看下右邊的文檔結(jié)構(gòu),發(fā)現(xiàn)我們的類名不是class1了。
原來CSS Modules對我們的類名做了哈希處理,我們再也不用擔(dān)心同事跟我們有相同的命名了。
是不是很方便呢?
讓我們再來面對另一個(gè)問題,現(xiàn)在這種情況下css是js動(dòng)態(tài)添加上去的,如果當(dāng)js文件有一個(gè)長時(shí)間的阻塞事件,頁面將會(huì)處于長時(shí)間的無樣式的狀態(tài)。
這是我們不希望看到的,怎么把css文件和js文件分離呢?
首先我們需要安裝一個(gè)插件
npm install extract-text-webpack-plugin --save-dev
安裝成功之后在webpack.config.js中添加如下配置
完成之后運(yùn)行一下npm run start
打開瀏覽器http://localhost:8080/
可以看到我們兩個(gè)css文件合并為一個(gè)app.css文件并以外部樣式表的形式加載。
而且css文件比js文件要先請求,這樣就避免頁面會(huì)出現(xiàn)FOUC-Flas Of Unstyle Content無樣式內(nèi)容閃爍。
webpack關(guān)于css的加載就講到這里。
*請認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。