国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

目錄
計(jì)數(shù),組和名稱
標(biāo)題
徽章
日期/時(shí)間
類別/標(biāo)籤
行動(dòng)
結(jié)論
凱蒂的反饋
首頁(yè) web前端 css教學(xué) 講圖形設(shè)計(jì)的故事

講圖形設(shè)計(jì)的故事

Apr 18, 2025 am 09:19 AM

講圖形設(shè)計(jì)的故事

讓我們從草圖UI組件中製作出引人注目的敘述。我們將剖析其元素(顏色,版式,尺寸),並將其轉(zhuǎn)化為一個(gè)不同的觀眾的故事:視覺(jué),聽(tīng)覺(jué),觸覺(jué)。目標(biāo)?引人入勝的,容易理解和令人難忘的經(jīng)歷。清晰度和連貫性至關(guān)重要。

我的同事凱蒂(Katie)選擇了一個(gè)UI組件。我會(huì)註釋它(我們的主要工具是SCSS,樹(shù)枝和手工藝品,但模板語(yǔ)言並不重要),她將提供反饋。理想情況下,我將正確獲取大多數(shù)細(xì)節(jié),並出現(xiàn)一些錯(cuò)誤,以說(shuō)明如何在交接過(guò)程中丟失信息。

在白標(biāo)或框架前端開(kāi)發(fā)中,優(yōu)先級(jí)是靈活性和適應(yīng)性。內(nèi)容和樣式在很大程度上保持不可知論(在產(chǎn)品邊界內(nèi)),因?yàn)榇a的最終目的地和目的是未知的。但是,我最近向網(wǎng)頁(yè)設(shè)計(jì)機(jī)構(gòu)的過(guò)渡已經(jīng)將重點(diǎn)轉(zhuǎn)移了出來(lái)。在這裡,重點(diǎn)是定制,高度量身定制的設(shè)計(jì),與客戶的特定需求及其目標(biāo)受眾深入融合。

與精心製作的Pixel-Perfect UI而不是線框或初始敘述的精心製作的圖形設(shè)計(jì)師緊密合作是一條學(xué)習(xí)曲線。但是,我將有價(jià)值的技能帶入餐桌:文檔設(shè)計(jì)。

文檔設(shè)計(jì) - 基本上是具有核心訪問(wèn)性的語(yǔ)義網(wǎng)絡(luò),即將圖形設(shè)計(jì)視為通信系統(tǒng)。我們將顏色,版式和佈局的基本目的轉(zhuǎn)化為可訪問(wèn),線性和可導(dǎo)航的DOM。它是HTML,簡(jiǎn)單而簡(jiǎn)單。然而,令人驚訝的是,這個(gè)基本原則常常被忽略。

凱蒂(Katie)提供了一個(gè)充滿藝術(shù)板和清晰設(shè)計(jì)規(guī)格的草圖文件。我的分析顯示,使用類似卡範(fàn)式的六個(gè)或七個(gè)組件:

  • 一張卡片在網(wǎng)站頁(yè)面上呈現(xiàn)元數(shù)據(jù)。
  • 它包含圖像/媒體和元數(shù)據(jù)(媒體對(duì)象)。
  • 它顯示在一組類似對(duì)像中。
  • 該組始終鍵入(沒(méi)有搜索結(jié)果,新聞文章和課程的混合)。
  • 每個(gè)對(duì)像都有一個(gè)頁(yè)面鏈接,沒(méi)有其他操作。
  • 每個(gè)對(duì)像都包含一個(gè)呼籲行動(dòng)(例如,“書”)。
  • 可選元素:時(shí)間,類別,徽章。
  • 所需元素:媒體,標(biāo)題,鏈接。

該卡是主要導(dǎo)航元素。用戶遍歷指導(dǎo)路徑,根據(jù)頂級(jí)頁(yè)面從卡集中選擇(“ what on oon”,“ class”)。它不是交互式的,而是指南,索引卡將目的地的用戶帶到了目的地,在這種情況下,購(gòu)買了一張表演票。

考慮一下這個(gè)類比:通過(guò)電話描述一個(gè)節(jié)目傳單。從無(wú)關(guān)緊要的細(xì)節(jié)開(kāi)始,您不會(huì)逐字朗誦文字。您也不只是描述顏色和字體。您將傳達(dá)基本信息:“這是最偉大的表演者,星期二晚上7:30,在電車附近的牛津街上的奧迪恩?!边@是文檔設(shè)計(jì)的本質(zhì)。

計(jì)數(shù),組和名稱

讓我們?cè)诹斜眄?xiàng)目中構(gòu)建每張卡。我們需要一個(gè)可數(shù)的小組,我們將以標(biāo)題介紹(<h3></h3> )。這使屏幕讀取器用戶可以:

  1. 標(biāo)識(shí)標(biāo)題概述中的列表。
  2. 請(qǐng)參閱預(yù)先計(jì)數(shù)項(xiàng)目。
  3. 導(dǎo)航到下一個(gè)列表項(xiàng)目/卡。
  4. 跳過(guò)小組並繼續(xù)下一頁(yè)(分頁(yè)是以下標(biāo)記地標(biāo))。

======================================================================================================================= ========================================================================================================= ======================================================================================================================= ========================================================================================================= ======================================================================================================================= ========================================================================================================= ========================================================================================================= =========================================================================================================

每張卡都將包裹在錨元件中(<a></a> )。這優(yōu)先考慮鏈接,允許用戶在識(shí)別相關(guān)卡後立即單擊。雖然可單擊的大區(qū)域是有益的,但它不應(yīng)成為可用性陷阱。該卡的大量排水溝提供了足夠的間距,以最大程度地減少意外點(diǎn)擊。

標(biāo)題

演出標(biāo)題將是標(biāo)題(<h3></h3> ),反映其視覺(jué)突出。快速掃描標(biāo)題的用戶很容易找到此關(guān)鍵信息。圖像將在標(biāo)題之前;由於無(wú)法通過(guò)API提供圖像描述,因此alt屬性將留為空。

現(xiàn)在為元數(shù)據(jù):

  • 徽章
  • 日期/時(shí)間
  • 類別

徽章

徽章突出顯示特定於場(chǎng)地的信息。儘管其用戶利益並不明顯,但其視覺(jué)強(qiáng)調(diào)需要包含。為了避免在非視覺(jué)瀏覽期間錯(cuò)過(guò)它,我將立即將其放在標(biāo)題之後,無(wú)論是首先還是最後一次,以保持一致的可訪問(wèn)性。而不是<abbr></abbr>,我將使用純文本,因?yàn)槠放祁伾菆?chǎng)地所有權(quán)的明確指標(biāo)。

<p> HAC亮點(diǎn)</p>

徽章是組織特定的,顯然將內(nèi)部事件與外部組織主持的事件區(qū)分開(kāi)來(lái)。

日期/時(shí)間

日期至關(guān)重要,將放置在<h4></h4>元素,促進(jìn)對(duì)特定日期或時(shí)間的快速掃描。這<time></time>元素確保通過(guò)輔助技術(shù)進(jìn)行適當(dāng)?shù)娜掌?時(shí)間解釋。

類別/標(biāo)籤

類別遵循徽章和日期,反映了它們的視覺(jué)去優(yōu)先級(jí)。我們通過(guò)將特定信息放在更多一般信息之前避免重複。一個(gè)簡(jiǎn)單的標(biāo)籤先於類別列表以易於清晰。硬編碼的間距也可以防止文本壓縮。

<p>類別:{for類別中的類別。</p>

CSS中處理了主要類別的顏色編碼,因?yàn)樗且环N非語(yǔ)言提示,不需要口頭描述。首先將主要類別放置,但沒(méi)有明確標(biāo)記,因?yàn)轭A(yù)先存在的類別過(guò)濾器提供了更有效的選擇方法。

行動(dòng)

呼籲採(cǎi)取行動(dòng)(“書籍”,“了解更多”)被視為跨度,最後放置以發(fā)出信號(hào)的末端。這樣可以確保沒(méi)有數(shù)據(jù)遵循該動(dòng)作。

結(jié)論

此標(biāo)記優(yōu)先考慮計(jì)數(shù),分組和命名數(shù)據(jù),從而實(shí)現(xiàn)線性和非線性相互作用。當(dāng)依次或零件閱讀時(shí),該頁(yè)面是可以理解的,從而促進(jìn)有效的導(dǎo)航。

凱蒂的反饋

凱蒂·帕里(Katie Parry),設(shè)計(jì)師:出色的文章!這<time></time>元素處理特別聰明。但是,輔助技術(shù)用戶以預(yù)定的順序接收信息。在不進(jìn)行過(guò)濾時(shí),查找特定事件(例如,舞蹈事件)需要在標(biāo)題,徽章,日期和類別中導(dǎo)航,這可能很麻煩。這不是編碼錯(cuò)誤,而是當(dāng)前Web範(fàn)式的限制。要考慮未來(lái)改進(jìn)的事情。

我的設(shè)計(jì)過(guò)程通常始於事件卡,甚至在建立範(fàn)圍內(nèi)的版式之前。從視覺(jué)上看,這些卡應(yīng):

  • 類似於直觀使用的列表。
  • 提供足夠的信息以供用戶興趣評(píng)估(圖像,標(biāo)題,日期,鏈接)。
  • 包括一個(gè)明確的行動(dòng)呼籲(鏈接)。
  • 容易掃描。

視覺(jué)掃描性是通過(guò)一致的信息類型和清晰的視覺(jué)層次結(jié)構(gòu)來(lái)實(shí)現(xiàn)的。字體和間距是關(guān)鍵。標(biāo)題高度突出;日期始終如一,但與標(biāo)題不同。類別具有不同的樣式。代碼樣本中的間距需要調(diào)整以進(jìn)行最佳掃描性。

用戶掃描以獲取不同的信息。一些通常瀏覽;其他人則搜索特定的事件或類別??ㄐ枰m應(yīng)這種多樣化的行為。儘管存在慣例,但卡設(shè)計(jì)隨著項(xiàng)目而異。

必須在熟悉的界面和特定於客戶的獨(dú)創(chuàng)性之間達(dá)到平衡。自定義字體和調(diào)色板有助於,但用戶發(fā)現(xiàn)至關(guān)重要。我研究客戶及其受眾(評(píng)論網(wǎng)站,社交媒體),以發(fā)現(xiàn)影響設(shè)計(jì)的見(jiàn)解。開(kāi)發(fā)人員參與在此發(fā)現(xiàn)階段將是有益的。目前,我使用廣泛的草圖筆記,有時(shí)還使用電子表格來(lái)定義功能。數(shù)據(jù)民群體將是理想的!

以上是講圖形設(shè)計(jì)的故事的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願(yuàn)投稿,版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容,請(qǐng)聯(lián)絡(luò)admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費(fèi)脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級(jí)程式碼編輯軟體(SublimeText3)

什麼是AutoPrefixer,它如何工作? 什麼是AutoPrefixer,它如何工作? Jul 02, 2025 am 01:15 AM

Autoprefixer是一個(gè)根據(jù)目標(biāo)瀏覽器範(fàn)圍自動(dòng)為CSS屬性添加廠商前綴的工具。 1.它解決了手動(dòng)維護(hù)前綴易出錯(cuò)的問(wèn)題;2.通過(guò)PostCSS插件形式工作,解析CSS、分析需加前綴的屬性、依配置生成代碼;3.使用步驟包括安裝插件、設(shè)置browserslist、在構(gòu)建流程中啟用;4.注意事項(xiàng)有不手動(dòng)加前綴、保持配置更新、非所有屬性都加前綴、建議配合預(yù)處理器使用。

CSS教程,用於創(chuàng)建粘性標(biāo)頭或頁(yè)腳 CSS教程,用於創(chuàng)建粘性標(biāo)頭或頁(yè)腳 Jul 02, 2025 am 01:04 AM

TocreatestickyheadersandfooterswithCSS,useposition:stickyforheaderswithtopvalueandz-index,ensuringparentcontainersdon’trestrictit.1.Forstickyheaders:setposition:sticky,top:0,z-index,andbackgroundcolor.2.Forstickyfooters,betteruseposition:fixedwithbot

什麼是圓錐級(jí)函數(shù)? 什麼是圓錐級(jí)函數(shù)? Jul 01, 2025 am 01:16 AM

theconic-Gradient()functionIncsscreatesCircularGradientsThatRotateColorStopSaroundAcentralPoint.1.IsidealForPieCharts,ProgressIndicators,colordichers,colorwheels和decorativeBackgrounds.2.itworksbysbysbysbydefindefingincolordefingincolorstopsatspecificains off.

CSS自定義屬性的範(fàn)圍是什麼? CSS自定義屬性的範(fàn)圍是什麼? Jun 25, 2025 am 12:16 AM

CSS自定義屬性的作用域取決於其聲明的上下文,全局變量通常定義在:root中,而局部變量則定義在特定選擇器內(nèi),以便組件化和隔離樣式。例如,定義在.card類中的變量?jī)H對(duì)匹配該類的元素及其子元素可用。最佳實(shí)踐包括:1.使用:root定義全局變量如主題色;2.在組件內(nèi)部定義局部變量以實(shí)現(xiàn)封裝;3.避免重複聲明同一變量;4.注意選擇器特異性可能引發(fā)的覆蓋問(wèn)題。此外,CSS變量區(qū)分大小寫,且應(yīng)在使用前定義以避免錯(cuò)誤。若變量未定義或引用失敗,則會(huì)採(cǎi)用回退值或默認(rèn)值initial。調(diào)試時(shí)可通過(guò)瀏覽器開(kāi)發(fā)者工

CSS教程專注於移動(dòng)優(yōu)先設(shè)計(jì) CSS教程專注於移動(dòng)優(yōu)先設(shè)計(jì) Jul 02, 2025 am 12:52 AM

Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the

CSS教程,用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫 CSS教程,用於創(chuàng)建加載旋轉(zhuǎn)器和動(dòng)畫 Jul 07, 2025 am 12:07 AM

創(chuàng)建CSS加載旋轉(zhuǎn)器的方法有三種:1.使用邊框的基本旋轉(zhuǎn)器,通過(guò)HTML和CSS實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫;2.使用多個(gè)點(diǎn)的自定義旋轉(zhuǎn)器,通過(guò)不同延遲時(shí)間實(shí)現(xiàn)跳動(dòng)效果;3.在按鈕中添加旋轉(zhuǎn)器,通過(guò)JavaScript切換類來(lái)顯示加載狀態(tài)。每種方法都強(qiáng)調(diào)了設(shè)計(jì)細(xì)節(jié)如顏色、大小、可訪問(wèn)性和性能優(yōu)化的重要性,以提升用戶體驗(yàn)。

如何將整個(gè)網(wǎng)格集中在視口中? 如何將整個(gè)網(wǎng)格集中在視口中? Jul 02, 2025 am 12:53 AM

要讓整個(gè)網(wǎng)格佈局在視口中居中顯示,可通過(guò)以下方法實(shí)現(xiàn):1.使用margin:0auto實(shí)現(xiàn)水平居中,需設(shè)定容器固定寬度,適用於固定佈局;2.利用Flexbox在外層容器設(shè)置justify-content和align-items屬性,結(jié)合min-height:100vh可實(shí)現(xiàn)垂直和水平居中,適合全屏展示場(chǎng)景;3.直接使用CSSGrid的place-items屬性在父容器上快速居中,簡(jiǎn)潔且現(xiàn)代瀏覽器支持良好,同時(shí)需確保父容器有足夠高度。每種方式均有適用場(chǎng)景和限制,根據(jù)實(shí)際需求選擇合適的方案即可。

如何創(chuàng)建本質(zhì)上響應(yīng)的網(wǎng)格佈局? 如何創(chuàng)建本質(zhì)上響應(yīng)的網(wǎng)格佈局? Jul 02, 2025 am 01:19 AM

要?jiǎng)?chuàng)建內(nèi)在響應(yīng)式網(wǎng)格佈局,核心方法是使用CSSGrid的repeat(auto-fit,minmax())模式;1.設(shè)置grid-template-columns:repeat(auto-fit,minmax(200px,1fr))讓瀏覽器自動(dòng)調(diào)整列數(shù)並限制每列最小和最大寬度;2.使用gap控制格子間距;3.容器應(yīng)設(shè)為相對(duì)單位如width:100%、配合box-sizing:border-box避免寬度計(jì)算錯(cuò)誤並用margin:auto居中;4.可選設(shè)置行高與內(nèi)容對(duì)齊方式提升視覺(jué)一致性,如row

See all articles