發表文章

目前顯示的是 2月, 2021的文章

UX = User Exploitation (利用使用者)

圖片
看到一篇 談論1997年至今的 UX 發展 的翻譯文章,原文的作者是Mark Hurst,看完之後心有戚戚焉,推薦給大家一起看,力道雖然沒有「 真正發生過的恐怖IT故事 」強,但也一樣是很無奈的現況。 KORONE FALCON PUNCH 文章從1997年至今分成3個10年去描述 UX 產業的變遷。 UX 的定義已經從原本的 user experience,漸漸被 user exploitation 取代,網站不再以便利性為目標,而是網站擁有者的目的為目標:試圖以各種方式誘導或阻止使用者在網站上做某些事情。 就像中文的「設計」一樣,英文可以翻譯成 design,也可以翻成 calculating。 真實案例 該文用 Amazon Prime 和紐約市疫苗網站為例子: The cancellation procedure is long, and consists of six separate pages. On each separate page, the consumer is nudged toward keeping their Prime membership, even though they have began a procedure to end the agreement. ...This uncertainty is further strengthened by having to scroll through the page, which is full of text and graphics to show how cancelling the membership will mean the loss of many benefits. In the single biggest public health crisis in the world, New York can't build a usable vaccine website. The telephone - 1950s technology - is our best option, after 25 years of web development. Shameful. 從 UX 設計領導者 Amazon 帶頭墮落,默默道

用CSS的 min() max() 與vw,設計有極限值的RWD響應式文字

圖片
你是否有想過,能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size?答案是可以的!只要設定字體的最大值和最小值就可以辦到。 文章目錄: vw 基本運用 極限問題 Media Query max()、min() If you just want the best solution, just click "max()、min()" . 為何使用 vw? 在編寫 CSS 的時候,你可能習慣將網頁上的字體大小(font-size)使用 rem、em、px 等單位設定,但在講究 RWD 的情況下,甚至是 Google SEO 著重在手機介面的現在,總是會遇到桌機看起來很舒適,但畫面一變小,標題類的字就又太佔版面。 而使用 viewport width (vw) 當作字體大小的單位,就可以讓字體隨著視窗寬度的不同自動縮放其大小。 各瀏覽器支援 vw 的情況 vw 基本運用: vw 是視窗寬度的百分比,所以 1vw = 1%的視窗寬度。舉例來說,當視窗寬度為 1000px 且 font-size: 1.5vw 的時候,字體的大小就是 1000*1.5% = 15px。 h1,.h1{ font-size: 1.5vw; } 除了直接運用之外,也能搭配 calc 使用: h1,.h1{ font-size: calc(10px + 1.5vw); } 極限問題(max or min font size) 這是不管設計什麼東西都存在且必需要考慮的事情,vw 也不例外。 設計網頁一定會設一個網頁寬度,以此寬度設定做為最大值;而人的視力有限,以 16px 當作最小值。所以,當視窗被拉到極大或極小的時候,以 vw 為單位的字體勢必會變成你不想要的樣子,這時候我們就必需設定最大值和最小值,讓字體在合理的區間變動,而 media query 和 min()、max()就出現在解決辦法的清單之中: Media Query 下面為使用的例子: h1,.h1{ font-size: 3.5vw; } @media (min-width: 1600px) { h1,.h1{ font-size: 40px; }