整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，很高興又見(jiàn)面了，我是"高級(jí)前端進(jìn)階"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)!
ai2html 是 Adob?e Illustrator 的開(kāi)源腳本，可將 Illustrator 文檔轉(zhuǎn)換為 html 和 css，基于 ai2html 的諸多示例登上了 New York Times。
ai2html由不同的組成部分：
目前 ai2html 在 Github 上開(kāi)源，是一個(gè)值得關(guān)注的 AI 類前端開(kāi)源項(xiàng)目。
很多人會(huì)有此疑問(wèn)，為什么不直接將 Illustrator 文件導(dǎo)出為圖像或 SVG？
圖像和 SVG 中的文本會(huì)隨著圖像的縮放而縮放，因此當(dāng)藝術(shù)品縮小時(shí)，文本很快就會(huì)變得難以辨認(rèn)，或者在放大時(shí)看起來(lái)非常大。
通過(guò)將文本渲染為 html，可以上下縮放“圖形”同時(shí)保持文本在相同的字體大小和行高下可讀，從而適應(yīng)從手機(jī)到巨型桌面顯示器的視口。
可以打開(kāi)鏈接 http://nyti.ms/1CQdkwq ，然后查看頁(yè)面時(shí)更改窗口大小，此時(shí)將看到圖稿比例變化，但文本保持相同大小。 更多示例可以查看 https://del.icio.us/archietse/ai2html+responsive
同時(shí)，當(dāng) Illustrator 保存 SVG 時(shí)，每一行文本都會(huì)被分解為單獨(dú)的 SVG 元素，這使得編輯文本變得非常困難。 通過(guò)以 HTML 形式渲染文本，編輯人員可以更輕松地進(jìn)入 CMS 并進(jìn)行編輯，而無(wú)需費(fèi)力地瀏覽一堆 SVG 代碼。
當(dāng)然，ai2html 也有一定的局限性，主要體現(xiàn)在以下幾點(diǎn)：
將 ai2html 的 CDN 文件下載保存到電腦，下載地址已經(jīng)在文末給出。
將 ai2html.js 文件移動(dòng)到腳本所在的 Illustrator 文件夾中。 例如，在運(yùn)行 Adobe Illustrator CC 2015 的 Mac 上，路徑為：
/Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js接著按照以下步驟使用 ai2html：
http://ai2html.org/
https://github.com/newsdev/ai2html
https://raw.githubusercontent.com/newsdev/ai2html/master/ai2html.js
輯導(dǎo)語(yǔ)：如何優(yōu)化頁(yè)面轉(zhuǎn)化，提升用戶的相應(yīng)使用體驗(yàn)，進(jìn)而推動(dòng)用戶留存與轉(zhuǎn)化？也許，你需要結(jié)合一些設(shè)計(jì)上的小技巧，來(lái)幫助你達(dá)成所想要的效果。本篇文章里，作者總結(jié)了13個(gè)提升頁(yè)面轉(zhuǎn)化的設(shè)計(jì)技巧，一起來(lái)看一下吧。
有時(shí)候你不得不處理一些蹩腳的圖像。通過(guò)半透明的顏色上襯托你要表達(dá)的對(duì)象，讓它們更像背景紋理而不是主要焦點(diǎn)元素。這將為你提供必要的對(duì)比，使疊加的文本可讀。在下面的示例中，我對(duì)文本應(yīng)用了深藍(lán)色陰影以進(jìn)一步提高對(duì)比度。
負(fù)空間，也叫負(fù)形。是指除表達(dá)主體本身所占用的畫(huà)面空間之外的留白部分。而所謂的負(fù)空間Logo，則是指的是使用特殊的表現(xiàn)技法讓主體之外的空間也展示內(nèi)容從而創(chuàng)造出的形狀簡(jiǎn)潔卻可以表達(dá)復(fù)雜內(nèi)容的Logo。
產(chǎn)品設(shè)計(jì)師往往喜歡負(fù)空間。但是，當(dāng)屬于一起的元素之間存在過(guò)多的負(fù)空間時(shí)，眼睛就會(huì)變得斷斷續(xù)續(xù)，陷入空洞，而不是輕易地在連接的元素上流動(dòng)。
任何分析過(guò)網(wǎng)頁(yè)數(shù)據(jù)的人都知道，你只有很少的時(shí)間來(lái)吸引用戶的注意力。比方下面的例子：
頁(yè)面的純文本部分可能很難設(shè)計(jì)，特別是如果你沒(méi)有機(jī)會(huì)使用插圖、圖像，那么你的品牌顏色和一些簡(jiǎn)單線條也是提高設(shè)計(jì)質(zhì)量的利器。
圖標(biāo)很生動(dòng)，但他們應(yīng)該擺清自己的位置。如果把它們做得很大，你的插圖就會(huì)很糟糕。如果使用帶有標(biāo)題的圖標(biāo)，那么就優(yōu)先凸顯標(biāo)題。
我們可以通過(guò)多種方式使用字母間距來(lái)巧妙地改進(jìn)排版，但如果你不是經(jīng)驗(yàn)豐富的排版師，請(qǐng)堅(jiān)持在大寫(xiě)字母中添加字母間距，而不是在句子大小寫(xiě)文本中添加額外的字母間距，這會(huì)會(huì)產(chǎn)生可讀性問(wèn)題，并且會(huì)破壞字體設(shè)計(jì)的自然節(jié)奏。
很多文本不可讀的第一大罪魁禍?zhǔn)卓赡苁切虚L(zhǎng)問(wèn)題。標(biāo)準(zhǔn)行長(zhǎng)應(yīng)該不超過(guò)文字展示區(qū)域的三分之二。
在下面例子中，真正的價(jià)值主張隱藏在一個(gè)幾乎不可讀的字幕中。通過(guò)添加真實(shí)用戶的頭像，就可以證明社交的可信性。
下面的例子中，CSS 中使用了可變的網(wǎng)頁(yè)排版，創(chuàng)建了正文為 11 像素，導(dǎo)航鏈接為 9 像素的場(chǎng)景。瀏覽器默認(rèn)的 16px 字體大小現(xiàn)在已有 20 年歷史了——一定要學(xué)會(huì)使用為現(xiàn)代屏幕設(shè)計(jì)的字體， 18-20px 是個(gè)可考慮的選擇。
布局可嘗試包含更多的奇數(shù)元素。如果你有 4 個(gè)元素，試著把其中的 2 個(gè)元素結(jié)合在一起。如果不好做，就優(yōu)先考慮你最想表達(dá)的觀點(diǎn)并削減最弱的那個(gè)。
在可能的情況下結(jié)合并減少你要表達(dá)的東西。在標(biāo)題和副本之間創(chuàng)建大小對(duì)比以改善視覺(jué)層次，并在你有很多話要說(shuō)時(shí)使用負(fù)空間來(lái)創(chuàng)造更平靜的體驗(yàn)。
大面積使用明亮的顏色會(huì)讓你遇到對(duì)比度問(wèn)題，可能無(wú)法滿足基本的文本可訪問(wèn)性要求。在較小的元素，如按鈕，就需要避免白色文本。
?使用灰色文本是在文本元素之間創(chuàng)建層次結(jié)構(gòu)的一種流行方法。但這往往會(huì)導(dǎo)致嚴(yán)重的易訪問(wèn)性問(wèn)題，因?yàn)槲谋救狈ψ銐虻膶?duì)比度。使用在線工具檢查對(duì)比度，如果你需要建立一個(gè)更清晰的視覺(jué)層次結(jié)構(gòu)，可以增加字體大小的對(duì)比度。
以上是關(guān)于優(yōu)化頁(yè)面轉(zhuǎn)化的13個(gè)技巧，希望你能加以對(duì)照并開(kāi)始著手優(yōu)化你的產(chǎn)品體驗(yàn)。
本文由@公眾號(hào)：真的不一定 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
不知道你對(duì)各種文件的格式轉(zhuǎn)換需求大不大，對(duì)于我來(lái)說(shuō)是挺需要的，比如有時(shí)候我在 MarkDown 寫(xiě)的文章或者文檔，我需要將它們轉(zhuǎn)化成不同的文件形式來(lái)給別人閱讀，比如網(wǎng)頁(yè)，比如 PDF，電子書(shū)的 epub 等等的格式，甚至我還想要它們?cè)诓煌母袷街g能夠互相轉(zhuǎn)換。
你想不想，把在線的網(wǎng)頁(yè)變成 PDF， 然后慢慢看？
今天小帥b想要給你介紹的是一個(gè)開(kāi)源的神器——pandoc。
它自稱是一把文件格式轉(zhuǎn)換的「瑞士軍刀」，因?yàn)閹缀跄隳軌蛳氲降挠脴?biāo)記語(yǔ)言寫(xiě)的文件，都能通過(guò) pandoc 進(jìn)行轉(zhuǎn)換。
If you need to convert files from one markup format into another, pandoc is your swiss-army knife.
那么，怎么通過(guò) pandoc 來(lái)實(shí)現(xiàn)我們需要的文件格式轉(zhuǎn)化呢？
根據(jù)你使用的操作系統(tǒng)，你可以到 GitHub 上下載相應(yīng)的版本：
https://github.com/jgm/pandoc/releases/tag/2.11.3.2
你也可以使用命令的方式進(jìn)行安裝:
Mac OS 可以這樣安裝：
brew install pandoc
如果你是 Windows 用戶也可以使用 choco 進(jìn)行安裝：
choco install pandoc
Ubuntu 可以這么安裝：
sudo apt-get install pandoc
然后你輸入以下命令，可以看到版本號(hào)就說(shuō)明你安裝成功了：
pandoc --version
pandoc 的命令是這樣使用的：
pandoc [選項(xiàng)] [輸入文件] ...
比如我想把我現(xiàn)在寫(xiě)的 markdown 是這樣的：
想要把它轉(zhuǎn)化成 HTML，就可以這樣：
pandoc -s --metadata title='帥b講pandoc' -o out.html Desktop/pandoc.md
這樣就可以把我桌面上的 md 直接轉(zhuǎn)出 html 文件了：
一行命令就搞定了，其中 「 -s --metadata title='帥b講pandoc' -o out.html 」就是「選項(xiàng)」：
而在最后面的 「Desktop/pandoc.md」就是「輸入文件」。
可能你要問(wèn)了，這些「選項(xiàng)」在哪里可以得到，分別都是什么意思？
有兩個(gè)地方你可以查詢得到，一個(gè)是在你的終端中使用 man 命令：
man pandoc
往下拉你就可以看到各種選項(xiàng)的意思：
另一個(gè)地方你可以通過(guò)在線文檔查詢，地址在這：
https://pandoc.org/MANUAL.html#options
內(nèi)容都是一樣的，不過(guò)網(wǎng)頁(yè)更加方便查閱。
我們?cè)賮?lái)玩一下，將 HTML 文件轉(zhuǎn)化為 PDF，因?yàn)?pandoc 在轉(zhuǎn)化為 PDF 文件的時(shí)候，需要用到 pdf 引擎，pandoc 默認(rèn)使用的是 pdflatex，如果你沒(méi)有安裝可以先安裝一波。
brew install basictex
pandoc 支持的 pdf 引擎有很多，比如：
pdflatex, lualatex, xelatex, latexmk, tectonic, wkhtmltopdf, weasyprint, prince, context
你可以根據(jù)自己的需要，選擇對(duì)應(yīng)的引擎，比如我們把剛剛生成的 HTML 文件直接轉(zhuǎn)化為 PDF，就可以這樣：
pandoc --pdf-engine=xelatex -o out.pdf out.html -V mainfont=STXihei
這里我們使用的 pdf 引擎是 xelatex，使用的中文字體是細(xì)黑，運(yùn)行得到的 pdf 是這樣子的：
是不是很方便，還有很多其他的文件格式，你都可以通過(guò) pandoc 進(jìn)行轉(zhuǎn)化，你還可以對(duì)其指定樣式，模板等操作，你都可以在這里找到：https://pandoc.org/MANUAL.html。
如果你想在 Python 中使用 pandoc ，也不是不行，你可以安裝 pypandoc 這個(gè)庫(kù)，然后使用也是很簡(jiǎn)單，像這樣：
OK，以上就是今天小帥b給你帶來(lái)的分享，希望對(duì)你有幫助！
最后，一直堅(jiān)持原創(chuàng)分享不易，如果對(duì)你有幫助的話點(diǎn)個(gè)贊支持一下唄，這樣我才有動(dòng)力給你一直分享個(gè)不停嘛，好了，我們下回見(jiàn)，peace！
我是怎么通過(guò) Python 排版公眾號(hào)的？
你真的會(huì)使用 Python 命令嗎？
使用終端命令行的一些技巧
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
