web就是我們說的萬維網的意思
就是指互聯網
web網頁設計,就是特指電腦端看到的那些網站的頁面設計(除了電腦端,我們還有壹個很大的地方是移動端,就是指手機端。)
註意,只是設計喲。不包括把網站用代碼寫出來,用代碼制作網站的技術是另壹個學科
叫做:web前端開發(妳看,都叫web什麽什麽)
網頁設計師非常有用的幾個在線工具時間戳轉換
功能簡介:Unix時間戳和北京時間互轉、獲取時間戳方法
地址:
代碼對比/歸並
功能簡介:在線檢測/比較兩個文件文本的不同
地址:
LESS編譯器
功能簡介:將LESS代碼編譯成CSS代碼,方便前端人員使用
地址:
crontab表達式
功能簡介:根據crontab表達式計算未來N次的執行時間
地址:
代碼格式化
功能簡介:可以對SQL、XML、JSON代碼進行格式化和美化
地址:
編碼轉換
功能簡介:URL解碼、Native轉UTF-8、Native轉ASCII
地址:
網頁調色板
功能簡介:網頁顏色選擇器、顏色代碼查詢、RGB顏色值參考
地址:
正則表達式
功能簡介:正則表達式匹配和替換、多種常用正則表達式
地址:
答題
功能簡介:學霸,快來做題,提升壹下妳的技能吧
地址:
Markdown
功能簡介:將web上的文本轉換成HTML文檔
地址:
UBB編譯器
功能簡介:UBB是壹種網頁中的替代HTML代碼的安全代碼
地址:
進制轉換
功能簡介:2~36進制之間任意進制轉換,支持浮點型
地址:
CSV轉HTML
功能簡介:將CSV數據轉換為HTML的表格,並展示在頁面上
地址:
HTML特殊符號
功能簡介:HTML特殊字符編碼大全
地址:
XML轉JSON
功能簡介:XML和JSON的內容和輸出互相轉換
地址:
HTML轉JS
功能簡介:HTML和JS的內容和輸出互相轉換
地址:
js/css壓縮
功能簡介:在線壓縮Javascript和CSS代碼
地址:
網頁常用字體
功能簡介:總結了各種常見的網頁字體的顯示效果
地址:
Cron生成器
功能簡介:可以在線生成任務調度Quartz的Cron表達式
地址:
JSON格式化
功能簡介:Json解析、驗證、格式化、壓縮、以及Json與XML相互轉換
地址:
SQL格式化
功能簡介:sql在線美化、格式化、腳本壓縮
地址:
端口掃描
功能簡介:掃描常用或指定的端口,查看端口是否開放
地址:
Base64編碼解碼
功能簡介:將字符base64編碼加密,或者將base64加密的字符還原
地址:
MD5加密
功能簡介:生成32位和16位的大寫和小寫的密文
地址:
摩斯電碼
功能簡介:在線摩斯電碼加密解密
地址:
IP查詢
功能簡介:查詢IP或域名的地理位置和寬帶供應商、查看本機IP
地址:
文字加密解密
功能簡介:支持AES、DES、RC4、Rabbit等多種算法
地址:
HTTP狀態查詢
功能簡介:檢測網頁返回的HTTP狀態碼
地址:
生成htpasswd
功能簡介:生成htpasswd
地址:
favicon圖標制作
功能簡介:將上傳圖像剪切並生成ico格式的圖標
地址:
傳圖識字
功能簡介:可以將壹段含有英文文字的照片免費轉化成文字
地址:
gif圖制作
功能簡介:壹鍵生成gif動態圖、閃圖和搞笑表情包
地址:
生成二維碼
功能簡介:可以設置圖像格式、容錯率、大小、顏色及LOGO
地址:
圖片轉pdf
功能簡介:在線免費將多張圖片轉成pdf文檔,壹鍵生成pdf文檔
地址:
人臉識別
功能簡介:在線人臉識別,自動識別人臉批量裁剪出頭像圖片
地址:
DIY卡通頭像
功能簡介:免費的動漫人物制作工具,可以隨心定制男女卡通頭像
地址:
傳圖識色
功能簡介:可以識別出光標所在處圖片的顏色,並提取出圖片的主色調
地址:
手繪圖片
功能簡介:可以自動生成手繪風格照片,還可以改變照片的模糊度
地址:
圖片轉Base64
功能簡介:圖片和Base64編碼互轉
地址:
衣服尺碼計算
功能簡介:輸入妳的身高體重,即可計算出妳需要的衣服尺寸
地址:
身份證信息查詢
功能簡介:輸入身份證號,查詢歸屬地、性別和出生年月
地址:
科學計算器
功能簡介:開方(√)、圓周率(π)、倒數(1/x)、正弦(Sin)
地址:
大小寫轉換
功能簡介:可以實現人民幣數字大寫轉換和英文大小寫轉換
地址:
日期間隔計算
功能簡介:壹款可以計算兩個日期之間的天數的工具
地址:
漢字轉拼音
功能簡介:可以將漢字轉化為帶聲調的拼音
地址:
文字去重
功能簡介:該工具可得到無重復數據的文字
地址:
單位換算器
功能簡介:長度、面積、重量、溫度等單位壹鍵對等轉換
地址:
中文簡繁轉換
功能簡介:將輸入的壹段文字轉換為簡體或繁體
地址:
陰陽歷轉換
功能簡介:支持農歷公歷互查,公歷和農歷互相轉換
地址:
郵編區號查詢
功能簡介:輸入省份、城市、區號或郵編查詢該地區號
地址:
字數統計
功能簡介:快速計算文章中漢字、標點、英文和數字的個數
地址:
如何設計網站——對Web設計的壹點總結在最近的工作中,遇到了導航的問題,無意中發現了找出了收藏已久的《別讓我思考》,花了壹周時間讀了兩遍,才清楚的理解導航對於壹個產品的重要作用。也更加印證了產品圈中將用戶當做小白的理論,其實並不是在產品設計中將壹切都為用戶標註出來,而是讓用戶能夠通過自己的方式更加輕松的使用產品,這樣的產品對於用戶來說必定是不言而喻的,也就是主題“別讓我思考”。下面是這次讀書的筆記,雖然這本書給我很大的啟發,但是壹切需要歸於實踐,在實踐中驗證這個理論。
壹、指導原則
第壹章:別讓我思考---_捎瞇緣諞歡_
web設計的終極法則:別讓我思考,即看到壹個界面應該是_謊遠_,_荒苛巳_,_暈醫饈_。
強迫我們思考的地方:(1)酷炫的名字或技術名詞。(2)看起來不太明顯的按鈕和鏈接
當思考時,需要權衡,權衡應該更傾向於“顯而易見”,而不行hi需要額外的思考
每個需要思考的地方會加重用戶的認知負擔,把用戶的註意力從要完成的任務上拉開
訪問網站時不需要思考的事都有什麽?
我在什麽位置?
該從哪裏開始?
他們把xx放在什麽地方?
這個項目上最重要的是什麽?
為什麽他們給它取這個名字?
如果做不到讓壹個頁面不言而喻,那麽至少應該讓它自我解釋
當瀏覽網站遇到問題時,用戶會認為是自己的錯誤,而不會責怪網站
如果要讓網頁有效,它們必須在用戶第壹眼看到時將自己展示出來,而要做到這壹點,最好的方法是創建不言而喻的網頁,或者至少是自我解釋。
第二章:我們實際上是如何使用Web的---__,滿意即可,勉強應付
事實1--_頤遣皇竊畝,而是掃描,尋找能吸引用戶註意力的文字或詞語(除新聞故事,報告,產品描述界面)
為什麽掃描?
(1)我們總是處於忙碌之中---_褂_eb是想節約時間
(2)我們知道自己不必閱讀所有內容---_罷腋行巳せ蚴滯返娜撾襝喙氐哪諶
(3)我們善於掃描---_釹骯,找感興趣的內容
用戶在網頁上看到什麽卻決於想看到什麽,通常為頁面的壹小部分內容
吸引註意力的文字和短語是什麽?
(1)與手頭任務有關的
(2)我們當前或接下來的個人興趣
事實2---_頤遣蛔髯羆蜒≡,而是滿意即可
用戶大多數時間不會選擇最佳選項,而是選擇第壹個合理的選項---_獠唄
為什麽不尋找最佳選擇?
(1)我們總是處於忙碌之中---_羆巡唄允奔渚,滿意策略效率高
(2)如果猜錯了,也不會產生什麽嚴重的後果
(3)對選擇進行權衡並不會改善我們的機會
(4)猜測更有意思---_虜獠換嵯袢ê餑敲蠢,猜對了,可能看到意外的內容
事實3---_頤遣皇親犯康,而是勉強應付
勉強應付不僅限於初學者,技術專家也會在理解事物的工作原理上有著驚人的誤會
原因是什麽?
(1)這對我們來說並不重要---_靼資攣錒ぷ骰撇⒉恢匾
(2)如果發現某個事物能用,我們會壹直使用它---_綣齙礁玫姆椒,會用好的方法,但是很少主動尋找更好的方法
如果用戶明白網站,而不是勉強應付的作用
(1)用戶更容易找到自己需要的東西,對用戶和網站都好
(2)用戶更容易理解妳的網站有哪些服務---_喚黿鍪怯沒_既豢吹降
(3)引導用戶看到妳希望他們看到的內容(網站上)
(4)在妳的網站上,用戶會感到掌控全局,並逐漸成為老用戶
第三章:廣告牌設計101法則---__梟杓,不為閱讀設計
吸引用戶的5個重要方面(為下方2-6部分內容)
在每個頁面上建立清楚的視覺層次
盡量利用習慣用法
把頁面劃分成明確定義的區域
明顯標識可以點擊的地方
最大限度降低幹擾
建立清楚的視覺層次
視覺層次清楚的頁面的特點
(1)越重要的部分越突出
(2)邏輯上相關的部分在視覺上也相關
(3)邏輯上包含的部分在視覺上進行嵌套
壹個頁面沒有清楚的視覺層次,用戶會降低掃描頁面的速度,會尋找關鍵的文字和短語,然後拼湊出感覺重要的內容和內容的組織方式,這樣會增加工作量
習慣用法是妳的好幫手
web的習慣用法
(1)它們非常有用---_實筆褂孟骯哂梅,讓用戶訪問更容易,減少額外學習工作原理ide成本
(2)設計師通常不願意利用它們
如果不打算使用習慣用法,需要的做法:
a.必須確定妳在使用壹種同樣清楚、同樣不言而喻,沒有學習曲線的方法
b.帶來很大的價值
把頁面劃分成明確定義的區域
明顯標識可以點擊的地方
降低視覺噪聲
噪聲的分類
(1)眼花繚亂---_械男畔⒍枷胛沒У哪抗,沒有突出點
(2)背景噪聲---_趁婷揮幸桓齙胤交嵩斐曬指扇,但是這些很小的噪聲太多會惹人厭煩
第四章:動物、植物、無機物---_裁從沒_不段扌杷伎嫉難≡
真正的問題不是到達目標之前要點擊的次數,而是每次點擊有多難,需要多少思考,多大的不確定性來判斷自己是否在進行正確的選擇
關鍵:如果用戶需要壹直在網絡上進行選擇,那麽讓這些選擇變得無需思考是讓壹個網站容易使用的原因
第五章:省略不必要的文字---_灰_eb上寫作的藝術
有力的文字都很簡練。句子裏不應該有多余的文字,段落中不應該有多余的句子
去掉沒人看的文字的優點有哪些?
可以降低頁面的噪聲
讓有用的內容更加突出
讓頁面簡潔,讓用戶在每個頁面上以言就能看見更多的內容,而不必滾動屏幕
需要去掉的文字是_隊_和_甘舅得
二、必須正確處理的幾個方面
第六章:街頭指示牌和面包屑---_杓頻己
如果在網站上找不到方向、人們不會使用妳的網站
網絡導航101法則
妳通常是為了尋找某個目標
妳會決定先詢問還是先瀏覽
如果選擇劉蘭蘭,妳將通過標誌的引導再層次結構中穿行
最後,如果找不到想要的東西,妳會離開
web與生活從空間角度來看的不同點
感覺不到大小
感覺不到方向
感覺不到位置
用戶使用Web導航是因為需要得知自己當前的位置
導航的用途---_遠準撓猛
幫助我們找到想要的任何東西
告訴我們現在身處何處
導航給了用戶壹些固定的感覺,讓用戶感到腳踏實地
導航的其他用途---_緩鍪擁撓猛
導航告訴我們當前的位置---_嫠咄居行┦裁,導航表現了內容,導航站點比告訴我們位置更重要
導航告訴我們如何使用網站---_幽睦錕,如何進行選擇
導航給了用戶對網站建造者信心
Web導航的習慣用法
網站ID
欄目
實用工具
指示器(指明用戶當前位置)
下壹級欄目
頁面名稱
頁面導航(當前這壹層的內容)
小字體版的底端導航
持久導航(或全局導航):來描述出現在網站每個頁面的壹組導航元素
持久導航應在在整個網站保持壹致,使用戶只需要了解壹次就夠了,減少學習成本
持久導航的五個元素
站點ID
回首頁的方式(Home)
搜索的方式
欄目
實用工具
主頁和表單_恍枰褂貿誌玫己
主頁:承擔壹些不同的任務,遵守壹些不同的承諾,所以不需要使用持久導航
表單:在填寫表單的頁面,持久導航會產生幹擾
如何設計Web導航各元素(表格下方為示例-_鍬硌)
導航元素名稱
細節點
站點ID
1.在Web上需要在每個頁面都能看到網站的名稱---_趁_D,通常在左上或靠近左上
2.網站ID代表整個網站,也就是說在當前站點結構中層次最高
3.站點ID如何出現在頁面可視層次的首要位置
(1)讓網站站點成為本頁最顯眼的內容
(2)讓網站ID涵蓋頁面所有其他元素
4.站點ID需看起來像壹個站點ID---__ogo
欄目
1.欄目(或稱主導航條)是到達站點主要欄目的鏈接,結構的最頂層
2.大部分情況,持久導航也包括二級導航(當前欄目的下壹級欄目清單)的顯示位置
實用工具
實用工具是到達網站中不屬於內容層次的重要元素的鏈接
返回主頁Home
1.返回主頁(Home)的按鈕需要始終可見,給用戶壹種隨時可以從新開始的感覺
2.Home的用法
(1)在欄目或使用工具清單中包含壹個回到主頁的鏈接
(2)在主頁之外的站點ID上小心地加上Home的字樣,讓用戶知道點擊它
搜索
1.避免混淆的方法
(1)花哨的用字
(2)指示說明
(3)選項---_∠鈈聰呂
2.需要對低層次導航給予足夠的重視(三級導航)
頁面名稱
1.頁面名稱的註意事項
(1)每個頁面都需要壹個名稱
(2)頁面名稱要出現在合適的位置
(3)名稱引人註目
(4)名稱要和點擊的鏈接壹致
指示器
1.如何標記當前位置
(1)在旁邊放置壹個指示器
(2)改變文字的顏色
(3)使用粗體
(4)按鈕反白
(5)改變按鈕的顏色
2.告訴用戶妳所在的站點層級結構的前後關系(在網頁中的位置)
層級菜單
1.告訴用戶從主頁到當前位置的路徑(如何到達)
2.層級導航的最佳實踐方式
(1)將它們放在最頂端
(2)使用“>”對層級進行分隔
(3)使用小字體(表明是壹種補充機制)
(4)使用了文字“妳在這裏”
(5)將最後壹個元素加粗
(6)不需要把它們用作_趁婷
標簽
1.為什麽標簽做導航是壹個上佳的選擇
(1)它們不言而喻
(2)它們很難錯過(視覺上與眾不同)
(3)它們靈活
(4)它們暗示了壹個物理的空間
2.註意事項
(1)正確繪制---_せ畹謀昵┮吃諂淥昵┮持
(2)顏色編碼---_岣吖刈⒍
示例
如何評判壹個網站設計的好
這是什麽網站?(站點ID)
我在哪個網頁上?(網頁名稱)
這個網站的主要欄目有哪些?(欄目清單)
在這個層上我有哪些選擇?(本頁導航)
我在導航系統的什麽位置?(“妳在這裏”的指示器)
我怎麽搜索?(搜索欄)
第七章:首先要承認,主頁不由妳控制---_杓浦饕
主頁主要完成的任務
站點的標識和使命---_嫠哂沒д饈鞘裁賜,做什麽的
站點層次---_峁┓竦母琶,包括內容,功能,服務是如何組織
搜索
導讀---_枰心諶萃平,功能推介
友情鏈接---_ち艨占浞胖黴愀,交叉推廣,品牌合作
快捷方式---_畛7夢實哪諶萜沃檔迷諭成戲胖昧唇
註冊
主頁需要滿足的抽象目標
讓用戶看到自己在尋找東西---_糜糜諳胍娜魏味饗遠準
......還有我沒有尋找的---_糜沒Э吹揭恍┚實哪諶,就算這些內容用戶沒有尋找
告訴用戶從哪開始
建立可信度和信任感
主頁的常見約束有哪些
每個人都想占壹席之地---_平檳諶莨
想要參與的人太多
壹個尺寸要適合所有的人---_氈槭視糜詿籩
主頁需要傳達整體形象,讓用戶壹眼就能清楚妳的網站是說什麽的
如何向用戶傳達網頁的整體形象
口號---_拷鏡_D的地方,整個網站的描述
歡迎廣告---_鏡募蛞枋,在主頁的首要位置,不需要滾動屏幕就能看到
傳達信息的原則
需要多大空間就使用多大空間
但也不要使用過多的空間---_3旨蚨
不要把實名陳述當做歡迎廣告
最後的是進行測試
口號的註意事項
好的口號
不好的口號
清楚、言之有物
含混不清
長度適中,易讓用戶領會表達思想
太籠統
表達出網站特點和顯而易見的好處
把口號(傳達某種價值主張)和宗旨(表達某種指導原則,某個目標或某個理想)混淆起來
有個性、生動、有時候很俏皮
由於主頁獨特的職責,通常不必使用持久導航,它們之間的差異
欄目描述---_饕承枰贍芏嗟謀硐滯襯諶,其他頁面不需要
不同的方向---_饕澈推淥趁娌季植煌,主頁通常用
用於表示的空間更多---_饕成險鏡_D比較大,口號留有空間也較大
讓欄目的名稱保持不變,同樣的順序、同樣的文字和同樣的分組,盡可能多地保持視覺提示,同樣的字體,顏色和大小寫
下拉框存在的問題
用戶必須將它們找出來---_匭胝業較呂,才能看到下拉列表
它們難以掃描
不好控制---_呂斜硎賬跛俁饒巖鑰刂
下拉框對於組織按照字母順序排列的項目比較有效
下拉框的優點是節約空間
任何***享的資源(***有區域)都會因為過度使用而遭到破壞---_謚饕成顯黽癰嗟南钅克玫降牡暮透凍齙牟⒉灰恢,雖然給推薦欄目巨大的訪問量,但是讓主頁變得混亂,所遭受的損失將由所有欄目承擔
三、確定妳沒有做錯的幾件事
第八章:農場主和牧羊人應該是朋友---_裁_eb設計團隊討論可用性是在浪費時間,如何避免這種情況
由於各自的職位不同,Web團隊成員對於好的網站設計的看法不同
通過測試將討論對錯轉移到什麽有效、什麽無效上,測試會讓我們看到用戶的動機、理解和反應的不同,從而不再讓我們堅持用戶和我們的想法相同
第九章:壹天10美分的可用性測試---_貌饈約虻,這樣妳能進行充分的測試
焦點小組並不是可用行測試,焦點小組是在項目早期階段,用來收集用戶的意見和感覺
可用性測試主要是希望得到用戶是否知道該網站是做什麽的,並且能用它完成壹項典型任務
測試的作用是什麽
如果想建立壹個優秀的網站,壹定要測試
測試壹個用戶比不做測試好壹倍
在項目中,在點測試壹位用戶好過最後測試50位用戶
人們對招募用戶代表的重要性評估過高
測試的關鍵不是要證明什麽或者反駁什麽,而是了解妳的判斷力
測試是壹個叠代的過程
沒有什麽比現場用戶的反應更重要
尋找能夠反應目標群體的測試用戶,但別裹足不前
尋找的測試用戶可以和目標群體有差別的理由是什麽
差別的原因
例外
實際上,我們都是初學者
如果妳的網站幾乎只由某壹類用戶使用,且招募並不難,那就去招募
設計出的網站只有妳的目標群體能使用,這通常並不是壹個好