整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好！我是一名UX設(shè)計(jì)師，希望可以與共同喜歡探索用戶體驗(yàn)的朋友們一起成長(zhǎng)！我會(huì)不定期地更新一些有關(guān)用戶體驗(yàn)方面的文章。本文主要分享：無(wú)需ui和前端制作個(gè)人網(wǎng)站，只需一個(gè)Axure就能搞定！
越來(lái)越多的人想要?jiǎng)?chuàng)建自己的個(gè)人網(wǎng)站，把自己平時(shí)工作的總結(jié)和收藏分享出來(lái)，整理到自己的個(gè)人網(wǎng)站中，不僅能幫助同行互相學(xué)習(xí)，更是自己能力的體現(xiàn)。我自己用axure做了一個(gè)個(gè)人網(wǎng)站，以本網(wǎng)站為例，來(lái)為大家講解如何用axure做出高保真的個(gè)人網(wǎng)站。
如果后期維護(hù)量較頻繁的，還是建議正常開發(fā)網(wǎng)站，并且需要有后臺(tái)進(jìn)行日后維護(hù)。axure制作網(wǎng)站只適合維護(hù)量較小且簡(jiǎn)單的網(wǎng)站。
在正文開始前，先給大家看一下網(wǎng)站的效果（http://uxgao.com），覺(jué)得不錯(cuò)的童鞋可以繼續(xù)往下看哦！
所謂的后臺(tái)維護(hù)指得就是需要開發(fā)一個(gè)官網(wǎng)后臺(tái)，日常通過(guò)后臺(tái)上傳新文章、新內(nèi)容等信息。axure只能做出展示效果，所以該場(chǎng)景下不適用axure制作網(wǎng)站。
首先axure制作的網(wǎng)站導(dǎo)出的html文件較大，相比正常前端開發(fā)出來(lái)的網(wǎng)站要大好多。如果網(wǎng)站整體頁(yè)面較多，或單獨(dú)某一個(gè)頁(yè)面內(nèi)容／圖片較多。網(wǎng)站加載較慢，所以該場(chǎng)景下不適合用axure制作網(wǎng)站。
現(xiàn)在大多數(shù)復(fù)雜的動(dòng)效和交互都是用h5、css3做的，過(guò)去我們可能還會(huì)看到網(wǎng)站上有flash或AE做的動(dòng)效。目前大多數(shù)都是用flash、AE做出效果后，前端轉(zhuǎn)換成代碼實(shí)現(xiàn)。從而讓網(wǎng)站瀏覽更加流暢。如果再axure里加復(fù)雜的動(dòng)效和交互，那么絕對(duì)會(huì)影響網(wǎng)站的加載速度，從而大大降低了網(wǎng)站的瀏覽效率。
本網(wǎng)站做的效果是內(nèi)容區(qū)域?qū)挾裙潭ǎ尘皩挾茸赃m應(yīng)。
（1）內(nèi)容區(qū)域?qū)挾?/strong>
考慮到主流的顯示器分辨率，我設(shè)置的內(nèi)容區(qū)域?qū)挾葹?200px。所有內(nèi)容和圖片都要放在這1200px以內(nèi)。可在頁(yè)面中拉一個(gè)參考線，拉到橫坐標(biāo)1200的位置。在做設(shè)計(jì)的時(shí)候從最左側(cè)開始就可以了，不需要給左側(cè)留出空間，下一條會(huì)講到頁(yè)面居中的方法。
（2）整體頁(yè)面居中
之所以上一條說(shuō)到不給左側(cè)留空間，是因?yàn)槲覀円秧?yè)面設(shè)置成居中對(duì)齊。選擇項(xiàng)目－頁(yè)面樣式編輯，在頁(yè)面排版中選擇第二個(gè)，居中對(duì)齊。選擇這個(gè)選項(xiàng)后，在axure畫圖時(shí)頁(yè)面依然是在最左側(cè)，在瀏覽器預(yù)覽時(shí)整個(gè)頁(yè)面就會(huì)居中顯示。
（3）背景寬度自適應(yīng)
如果網(wǎng)站一個(gè)頁(yè)面的背景都是同一個(gè)顏色，那么直接在當(dāng)前頁(yè)面點(diǎn)擊一下空白處，然后選擇樣式－背景顏色，選擇自己需要的顏色。
如果一個(gè)頁(yè)面不同模塊有不同的背景色，那么我們需要用動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)。首先拉一個(gè)動(dòng)態(tài)面板，高度設(shè)置到你需要的高度，寬度隨意，不過(guò)為了方便在這個(gè)模塊上加內(nèi)容，建議寬度拉倒跟網(wǎng)頁(yè)內(nèi)容寬度一樣，比如1200px。然后在樣式里設(shè)計(jì)你需要的背景顏色，然后勾選100%寬度。在瀏覽器預(yù)覽后，該模塊的背景色就是自適應(yīng)各個(gè)分辨率了。
我做的導(dǎo)航效果是固定在瀏覽器頂部，之所以要固定在瀏覽器頂部，是因?yàn)轫?yè)面內(nèi)容較多時(shí)，用戶滾動(dòng)到下面后，直接就可以看到導(dǎo)航并進(jìn)行操作。
制作過(guò)程：
（1）拉一個(gè)動(dòng)態(tài)面板，導(dǎo)航的高度即為動(dòng)態(tài)面板的高度，寬度拉到1200px。（寬度一定要拉倒內(nèi)容區(qū)域的寬度，因?yàn)橐趧?dòng)態(tài)面板里面放導(dǎo)航的內(nèi)容）
（2）設(shè)置動(dòng)態(tài)面板背景顏色（即為導(dǎo)航背景顏色），勾選100%寬度。
（3）在屬性中選擇固定到瀏覽器，勾選固定到瀏覽器窗口，水平固定選擇居中，垂直固定選擇上。最下面的始終保持頂部，如果沒(méi)有其它內(nèi)容需要覆蓋在導(dǎo)航上就勾選上，我的導(dǎo)航右側(cè)有一個(gè)二維碼需要覆蓋在導(dǎo)航上，所以我的沒(méi)有勾選。（沒(méi)有勾選的要注意設(shè)計(jì)完所有頁(yè)面時(shí)，要把導(dǎo)航的動(dòng)態(tài)面板放到圖層最上層。）
導(dǎo)航文字：導(dǎo)航的文字需要放在動(dòng)態(tài)面板里，文字需要有3種狀態(tài)，當(dāng)前頁(yè)面狀態(tài)、鼠標(biāo)懸停狀態(tài)、正常狀態(tài)。
banner的圖是整個(gè)網(wǎng)站中最大的圖片，這里不建議大家直接把banner圖放到axure文件里，既不能自適應(yīng)，又影響了加載速度。
純色背景banner制作過(guò)程：
非純色背景banner制作過(guò)程：
所有可點(diǎn)擊的圖形按鈕、文字按鈕都需要有3種狀態(tài)，正常狀態(tài)、鼠標(biāo)懸停狀態(tài)、鼠標(biāo)按下狀態(tài)。
在屬性－交互樣式設(shè)置中設(shè)置鼠標(biāo)懸停和鼠標(biāo)按下的效果。
我做的二維碼效果是鼠標(biāo)懸停在導(dǎo)航右側(cè)二維碼圖標(biāo)時(shí)，由上向下推出二維碼，鼠標(biāo)離開時(shí)，由下向上收回二維碼。
制作過(guò)程：
（1）拉一個(gè)動(dòng)態(tài)面板里面放二維碼圖片，放到圖標(biāo)下面的位置上。
（2）選擇固定到瀏覽器，水平固定選擇居中（根據(jù)網(wǎng)站尺寸，調(diào)整邊距），垂直固定選擇上，勾選始終保持頂部。
（3）給導(dǎo)航動(dòng)態(tài)面板中的二維碼圖標(biāo)加兩個(gè)事件，如圖：
網(wǎng)站中有一些文章、推薦等模塊，點(diǎn)擊后跳轉(zhuǎn)的是非本網(wǎng)站中的鏈接，我們需要對(duì)可點(diǎn)擊的區(qū)域加點(diǎn)擊事件，鏈接到外部鏈接，并且在瀏覽器新窗口打開。具體操作如圖：
1. 能用文本盡量少插入圖片
比如banner上的文字，推薦里面的各種文字等，盡量不用以圖片的形式放進(jìn)來(lái)。嘗試用axure進(jìn)行排版。
2. 注意細(xì)節(jié)
既然是高保真，就不能做的像低保真那樣粗糙，整個(gè)網(wǎng)站的字體、字號(hào)、間距、顏色等細(xì)節(jié)問(wèn)題。都要像ui設(shè)計(jì)一樣注重細(xì)節(jié)。
3. 交互效果統(tǒng)一
可點(diǎn)擊的區(qū)域，比如文章，鼠標(biāo)懸停的時(shí)候要有一個(gè)變化，比如外發(fā)光、描邊等效果。要遵循設(shè)計(jì)原型，給用戶每一個(gè)操作都有及時(shí)的反饋。
4. 圖片壓縮
盡量把用到的每一張圖都進(jìn)行壓縮，前提是保證圖片質(zhì)量不會(huì)被看出來(lái)降低。
5. 購(gòu)買域名
這個(gè)大家可以自行選擇，去騰訊云、阿里云購(gòu)買，哪個(gè)便宜買哪個(gè)。域名后綴盡量選擇常見(jiàn)的，比如cn、com等。前面的字母可以以自己名字開頭拼音或全拼來(lái)選擇。
這個(gè)我也不太懂，是朋友幫忙搞的，用的是github，大家可以上網(wǎng)搜一下。不用花錢買服務(wù)器，這里有一個(gè)注冊(cè)與使用的教學(xué)希望可以幫到大家，鏈接：https://blog.csdn.net/p10010/article/details/51336332
上傳完去域名后臺(tái)管理解析一下就可以嘍！
作者：高杰，微信號(hào)公眾號(hào)：UX設(shè)計(jì)師高杰，從事交互設(shè)計(jì)和用戶體驗(yàn)工作。
本文由 @高杰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自 Pexels，基于 CC0 協(xié)議
天的主題是網(wǎng)頁(yè)編程中的水平線。
同學(xué)們好，今天我來(lái)分享一些免費(fèi)的少兒編程知識(shí)。只要每天堅(jiān)持學(xué)習(xí)一行代碼，你也可以成為編程高手！今天我們要學(xué)習(xí)如何在HTML中插入一條水平線，使用的是HR標(biāo)簽。HR是一個(gè)自閉合標(biāo)簽，雖然它沒(méi)有標(biāo)準(zhǔn)的屬性，但我們可以通過(guò)CSS來(lái)控制它的外觀。
先來(lái)看看我們的實(shí)例效果。在頁(yè)面上，兩行文字被一條直線分開。這條直線就是HR標(biāo)簽，效果已經(jīng)展示出來(lái)了。現(xiàn)在我們來(lái)看看實(shí)現(xiàn)的代碼。HR標(biāo)簽的寫法非常簡(jiǎn)單，但在最開始的時(shí)候，它有四個(gè)屬性，現(xiàn)在已經(jīng)不被標(biāo)準(zhǔn)支持了。盡管如此，我們?nèi)匀豢梢允褂盟?/p>
今天的實(shí)例中，我們已經(jīng)將這些標(biāo)簽加入到了代碼中。如果你感興趣，可以查看下方的代碼。按下空格鍵可以看到過(guò)時(shí)的屬性不會(huì)被智能提示，但這并不影響代碼的正確性。將注釋取消后保存，然后回到瀏覽器刷新，可以看到屬性仍然有效。線條的高度為3，寬度為400，并且居中顯示。取消陰影后，線條將變?yōu)榧兩?/p>
這只是一個(gè)演示，你可以參考一下。從這個(gè)示例中，我們可以看到，HR標(biāo)簽的寬度是根據(jù)頁(yè)面寬度自動(dòng)調(diào)整的。當(dāng)它的寬度達(dá)到整個(gè)瀏覽器時(shí)，它會(huì)自動(dòng)換行。既然屬性已經(jīng)過(guò)時(shí)了，那么我們?nèi)绾瓮ㄟ^(guò)HTML來(lái)控制外觀呢？CSS是我們今天要學(xué)習(xí)的內(nèi)容。
先取消注釋的代碼，讓HTML失效，然后保存。回到瀏覽器刷新，就可以看到線條變成了藍(lán)色。
今天的分享就到這里，希望各位同學(xué)可以試著寫三遍，不需要看視頻也可以掌握這個(gè)技巧。如果你需要案例和相關(guān)文檔，可以向我咨詢。
我們下期再見(jiàn)，想學(xué)習(xí)編程的同學(xué)記得關(guān)注哦。
天分享 7 個(gè)冷門好用的在線工具，每一個(gè)都是自己精心挑選，每一個(gè)都足夠驚艷，讓你眼前一亮。
https://chartcube.alipay.com/
ChartCube 是螞蟻金服數(shù)據(jù)可視化研發(fā)團(tuán)隊(duì)出品的一個(gè)在線圖表制作工具，它讓你只需要三步簡(jiǎn)單的操作，就可以快速制作出一個(gè)精美的圖表。
它不需要登錄注冊(cè)，完全免費(fèi)，操作簡(jiǎn)單，功能強(qiáng)大，不僅支持導(dǎo)出圖表，還支持導(dǎo)出其它文件。
它整體體驗(yàn)下來(lái)非常流暢好用，值得嘗試。
首先，第一步，你需要選擇一個(gè)合適的圖表，它按照?qǐng)D表類型和分析目的對(duì)圖表進(jìn)行了詳細(xì)的分類。
每個(gè)圖表都是非常精美。
圖表類型分類包括：折線圖類、條形圖類、柱狀圖類、餅圖類、面積圖類、雷達(dá)圖類。
分析目的分類包括：比較類、占比類、趨勢(shì)類。
選擇完圖表，我們進(jìn)行第二步配置圖表，這里支持的配置包括：畫布尺寸、標(biāo)題、副標(biāo)題，圖例方位、水平位置，圖形數(shù)據(jù)、圖形屬性、高度、寬度等。
它支持三通配置，包括圖表、數(shù)據(jù)、配置三個(gè)畫板，不管你在哪個(gè)畫板做了修改，其它畫板對(duì)應(yīng)的選項(xiàng)也會(huì)同步變化。
它支持直接拖拽圖形元素，讓你配置圖表變得如此簡(jiǎn)單有趣。
它還支持導(dǎo)入先前的配置文件。
最后完成配置，我們可以直接導(dǎo)出圖表；它支持導(dǎo)出多種內(nèi)容，包括：圖片、數(shù)據(jù)、代碼、配置文件。
導(dǎo)出圖片包括：PNG 、SVG 、JPG 三種格式文件，導(dǎo)出數(shù)據(jù)是 CSV 格式文件，導(dǎo)出代碼包括 JS 和 HTML 格式文件，你也可以直接復(fù)制代碼內(nèi)容。
配置文件下次可以再次導(dǎo)入到 ChartCube 中進(jìn)行編輯操作。
https://jm.wps.cn/
極墨 PPT 是金山 WPS 出品的一個(gè)在線 PPT 制作網(wǎng)站，它讓你只需要簡(jiǎn)單的操作，就可以輕松制作出精美的 PPT 。
它目前完全免費(fèi)，仍處于內(nèi)測(cè)版本，但是整體使用下來(lái)已經(jīng)足夠讓人驚艷。
進(jìn)入網(wǎng)站，我們需要進(jìn)行登錄，點(diǎn)擊新建按鈕，我們可以看到網(wǎng)站免費(fèi)提供了很多精美的 PPT 模板，并且進(jìn)行了詳細(xì)的分類，包括：年終總結(jié)、答辯、宣傳介紹、商業(yè)計(jì)劃、述職報(bào)告、課件、發(fā)布會(huì)、簡(jiǎn)歷、競(jìng)聘。
選擇任意一個(gè) PPT 模板，我們就進(jìn)入了編輯界面。
我們不需要在 PPT 圖片模板上編輯，直接在 PPT 模板下方的編輯界面就可以編輯內(nèi)容，這里不僅可以編輯文字，還可以編輯圖片。
編輯完畢，點(diǎn)擊刷新按鈕，我們會(huì)發(fā)現(xiàn) PPT 上的內(nèi)容已經(jīng)同步修改，并且文字和圖片的位置不會(huì)變化，圖片的大小也不會(huì)發(fā)生改變。
它最讓我驚艷的是它的智能排版功能。
它支持對(duì)某一頁(yè) PPT 進(jìn)行智能排版，點(diǎn)擊智能排版按鈕，網(wǎng)站會(huì)自動(dòng) AI 識(shí)別你的內(nèi)容，給出很多個(gè)同種風(fēng)格但是不同樣式的排版方案，你可以隨意挑選，直接替換，讓你的 PPT 變得無(wú)限可能。
它的智能排版功能不僅支持純文字智能排版，還支持添加圖片智能排版，你可以添加一張或多張圖片，網(wǎng)站同樣會(huì)自動(dòng)生成多個(gè)圖文混合排版方案。
我們點(diǎn)擊網(wǎng)站右上方的更換風(fēng)格可以重新選擇 PPT 模板，點(diǎn)擊右上方的播放按鈕可以直接播放 PPT ，全屏演示 PPT 。
我們編輯完畢，可以直接導(dǎo)出 PPT 為 PPTX 格式，這個(gè)格式可以兼容任何版本的 Office 。
最后，這個(gè)網(wǎng)站目前仍處于內(nèi)測(cè)階段，很多功能有待完善，很多功能也還在開發(fā)，但是目前而言，就可以讓你花少量的時(shí)間、少量的精力制作出不錯(cuò)的 PPT 。
https://www.sjtiantang.com/
設(shè)計(jì)天堂是一個(gè)免費(fèi)的設(shè)計(jì)素材下載網(wǎng)站。
它支持下載的素材包括：PPT 模板、簡(jiǎn)歷、圖片、字體，其中 PPT 模板分類包括：動(dòng)態(tài)模板、節(jié)假節(jié)日、論文答辯、相冊(cè)圖集、求職簡(jiǎn)歷、晚會(huì)頒獎(jiǎng)、總結(jié)匯報(bào)、商業(yè)計(jì)劃書、企業(yè)宣傳、教育培訓(xùn)、商務(wù)通用、婚禮愛(ài)情。
你不僅可以利用網(wǎng)站的分類功能找到自己需要的素材，還可以利用網(wǎng)站的搜索功能搜索自己需要的素材。
https://shulijp.com/
簡(jiǎn)捷工具是一個(gè)實(shí)用的多功能聚合網(wǎng)站。
它提供的工具分類包括：文字工具、圖片工具、自媒體工具、計(jì)算工具、數(shù)據(jù)資訊、開發(fā)工具。
它提供了很多實(shí)用的具體工具，包括：短視頻批量去水印、證件照改背景、手寫文字識(shí)別、圖片無(wú)損放大、黑白圖片上色、圖片壓縮、圖片對(duì)比度增強(qiáng)、圖片變透明格式、二維碼生成解碼。
它支持一鍵更換證件照的背景顏色，并且提供白色、紅色、藍(lán)色三種底色供你選擇，你可以直接上傳你需要處理的證件照，選擇任意一個(gè)底色就可以開始處理，處理效果比較出色。
https://taira-komori.jpn.org/freesoundcn.html
小森平的免費(fèi)音效下載是一個(gè)完全免費(fèi)并且非常良心的音效下載網(wǎng)站，它的作者是日本的一個(gè)音效制作者。
它提供的音效可以免費(fèi)用于你想用的項(xiàng)目，可以用于商業(yè)加工，可以用于工業(yè)產(chǎn)品。
它提供了豐富并且全面的音效，進(jìn)行了詳細(xì)的分類，包括：日常生活、游戲動(dòng)畫片、體育大會(huì)學(xué)校、魔術(shù)幻想、飯菜吃飯廚房、格斗打擊、街環(huán)境聲音、開關(guān)、摒棄爆炸、交通工具、自然季節(jié)昆蟲、恐怖、噪音空調(diào)、人動(dòng)物腳步聲、樂(lè)器。
它的每個(gè)分類提供了很多個(gè)具體音效，你不僅可以在線試聽，也可以直接下載。
https://wallroom.io/
Wallroom 是一個(gè)不可多得的精品電腦壁紙網(wǎng)站。
它所有的壁紙都是站長(zhǎng)人工收集上傳，每一張壁紙的質(zhì)量都是非常出色，每一張壁紙也都是非常唯美。
它的所有壁紙都可以免費(fèi)下載。
它提供了多種分辨率的壁紙，從 1920 到 8K ，包括：1920 、2560 、2880 、4K 、5K 、8K ，你可以根據(jù)自己的需求下載對(duì)應(yīng)分辨率的壁紙。
http://www.webhek.com/misc-res/species-in-pieces/
30 個(gè) CSS 碎片拼圖是一個(gè)唯美精致并且非常具有價(jià)值的網(wǎng)站，它通過(guò) 30 個(gè) CSS 碎片拼圖展示了 30 種瀕臨滅絕動(dòng)物。
它的每個(gè) CSS 碎片拼圖，展示了一種瀕臨滅絕動(dòng)物的樣子，配上純色的背景，舒緩的背景音樂(lè)，唯美的動(dòng)態(tài)效果，帶給你強(qiáng)烈的視覺(jué)沖擊。
它非常具有教育價(jià)值，每一個(gè)展示頁(yè)面都有一個(gè) “它們有什么危機(jī)” 按鈕，你可以點(diǎn)擊它了解這些動(dòng)物瀕臨滅絕的原因。
最后，我們除了欣賞，還可以截圖保存這些唯美精致的圖片用作電腦桌面壁紙。
下面我簡(jiǎn)單展示幾個(gè) CSS 碎片拼圖，每一個(gè)都是精致唯美。
轉(zhuǎn)自：微信公眾號(hào) 木子淇
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
