• 鍍金池/ 教程/ Android/ 圖像
    Snackbars 與 Toasts
    選擇器
    網(wǎng)格
    紙片
    色彩
    手勢
    內容選取
    準則
    導航過(guò)渡
    進(jìn)度和動(dòng)態(tài)
    概述
    數據格式
    搜索(Search)
    Roboto 字體
    副標題
    Material 屬性
    書(shū)寫(xiě)
    空狀態(tài)
    按鈕
    提示框(Dialogs)
    開(kāi)關(guān)
    導航
    單位和度量
    列表
    度量與邊框
    真實(shí)的動(dòng)作
    改進(jìn)的操作
    底部動(dòng)作條
    加載圖片
    卡片
    工具提示(Tooltips)
    菜單
    設備
    可達性
    分隔線(xiàn)(Dividers)
    高度和陰影
    環(huán)境
    抽屜式導航
    響應式交互
    Tabs
    圖標
    滾動(dòng)時(shí)的技巧
    更新記錄
    錯誤
    影像處理
    設置
    滑塊控件(Sliders)
    列表控制
    圖像
    文本框
    布局模板
    雙向性
    選擇控制器
    調色板
    自適應 UI
    貼片集
    數據表
    滑動(dòng)刷新
    啟動(dòng)屏幕
    按鈕:浮動(dòng)操作按鈕
    打動(dòng)用戶(hù)的細節
    應用結構
    有意義的轉場(chǎng)動(dòng)畫(huà)
    字體排版(Typography)
    結構

    圖像

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-style_philosophy_large_mdpi.png" alt="" />

    在 material design 中,圖像(無(wú)論是繪畫(huà)還是攝影)都應該是組建而成而并非人為策劃的,看起來(lái)神奇并且不顯得過(guò)度制作。這種風(fēng)格樂(lè )觀(guān),愉悅,并且坦率。這種風(fēng)格比較強調場(chǎng)景的實(shí)質(zhì)性(Materiality),質(zhì)感,深度,讓人意想不到的色彩運用, 以及對環(huán)境背景的關(guān)注。這些原則都旨在創(chuàng )建目的性強,美麗又有深度的用戶(hù)界面。

    原則

    當使用繪畫(huà)和攝影提升用戶(hù)體驗時(shí),選擇能夠表達個(gè)人關(guān)聯(lián)、信息和令人喜悅的圖像。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-personal_20relevance_large_mdpi.png" alt="" />

    個(gè)人關(guān)聯(lián)
    使用能夠喚起回憶的影像來(lái)建立用戶(hù)與應用程序的情感聯(lián)系。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-information_large_mdpi.png" alt="" />

    信息
    傳達特定的信息。以輔助理解的方式來(lái)創(chuàng )建智能的感官體驗。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-delight_large_mdpi.png" alt="" />

    閃光點(diǎn)
    用相關(guān)圖像以一種意想不到的方式來(lái)取悅用戶(hù),讓用戶(hù)覺(jué)得不可思議。

    場(chǎng)景賞析

    加入邏輯,確保圖像是動(dòng)感的,并且顯示出場(chǎng)景智能性和相關(guān)性。帶有預測性的視覺(jué)效果能夠彰顯出智能的水準,從而能大大改善用戶(hù)體驗。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-appreciaton_content_large_mdpi.png" alt="" />

    身臨其境

    要勇于運用遮蓋的方法,或是對色彩和內容的疊加來(lái)構成對畫(huà)面主角的印象,抑或是構成一幅縮略圖。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-principles-immersive_20obscure_large_mdpi.png" alt="" />

    最佳實(shí)踐

    使用多種媒體

    插畫(huà)和攝影可以運用在同一個(gè)產(chǎn)品中。攝影自動(dòng)暗含了一定程度的特定性,從而應該用來(lái)展示特定的物體和故事。繪畫(huà)則能有效的表現出概念和隱喻,而這一點(diǎn)是攝影所不具備的。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-multiple-mediums-a_large_mdpi.png" alt="" />

    (上圖)可取

    對于特定的實(shí)物,首先考慮用攝影來(lái)表現。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-multiple-mediums-b_large_mdpi.png" alt="" />

    (上圖)可取

    當所表達的內容并非具體實(shí)物(或者不能被具體實(shí)物所概括)時(shí),繪畫(huà)則可以傳達出你的應用程序的信息,并且允許用戶(hù)一目了然的理解內容。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-watch_stock-do_large_mdpi.png" alt="" />

    (上圖)可取

    如果你使用攝影來(lái)傳達一種概念,你需要創(chuàng )建一些具有思考性的,甚至是隱含寓意的作品。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-watch-stock-dont_large_mdpi.png" alt="" />

    (上圖)不可取

    不要局限于圖片庫。

    遠離圖片庫(Stay away from stock)

    利用圖像可以表達一種與眾不同的心聲,還可以展現出絕佳的創(chuàng )意。

    對于特定的實(shí)體或品牌內容,要用具體的圖像。對于較抽象的內容,使其具有解釋性。然而庫存攝影(Photographic stock)和剪貼畫(huà)(clipart)既不具體,又不具解釋性。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-stock-do_large_mdpi.png" alt="" />

    (上圖)可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-stock-dont_large_mdpi.png" alt="" />

    (上圖)不可取

    有焦點(diǎn)

    你的圖像應當有一個(gè)標志性的焦點(diǎn)。小到單一物體,大到整體布局,都可以成為焦點(diǎn)。確保能夠用一個(gè)讓人印象深刻的方法,傳遞給用戶(hù)一個(gè)清晰的概念。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-reminder-do_large_mdpi.png" alt="" />

    (上圖)可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-reminder-dont_large_mdpi.png" alt="" />

    (上圖)不可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-sf-do_large_mdpi.png" alt="" />

    (上圖)可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-sf-dont_large_mdpi.png" alt="" />

    (上圖)不可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-flight-do_large_mdpi.png" alt="" />

    (上圖)可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-point-focus-flight-dont_large_mdpi.png" alt="" />

    (上圖)不可取

    構建敘事(Build narratives)

    創(chuàng )建一個(gè)讓人感覺(jué)身臨其境的故事和上下文(context)場(chǎng)景。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-narrative-appointment-do_large_mdpi.png" alt="" />

    (上圖)可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-narrative-appointment-dont_large_mdpi.png" alt="" />

    (上圖)不可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-narrative-carseat-do_large_mdpi.png" alt="" />

    (上圖)可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-narrative-carseat-dont_large_mdpi.png" alt="" />

    (上圖)不可取

    不要過(guò)度操作

    保持圖像的原始完整性。不要過(guò)度使用高度濾鏡或高斯模糊,尤其是當試圖去隱藏劣化(degradation)的時(shí)候。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-manipulate-flowers-do_large_mdpi.png" alt="" />

    (上圖)可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-manipulate-flowers-dont_large_mdpi.png" alt="" />

    (上圖)不可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-manipulate-lake-do_large_mdpi.png" alt="" />

    (上圖)可取

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-bestpractices-manipulate-lake-dont_large_mdpi.png" alt="" />

    (上圖)不可取

    用戶(hù)界面集成(UI Integration)

    分辨率

    確保你的圖像大小適應其邊框并且支持跨平臺。該結構強調大幅圖像。理想情況下,素材應該不會(huì )出現像素化。要為特定的比率和設備測試合適的分辨率大小。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-resolutiona_large_mdpi.png" alt="" />

    (上圖)可取

    尺寸得當的圖像

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-resolutionb_large_mdpi.png" alt="" />

    (上圖)不可取

    劣化的圖像

    調整大小(Introduce Scale)

    利用不同的大小的圖像來(lái)創(chuàng )造視覺(jué)上的重要性。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-introduce_scalea_large_mdpi.png" alt="" />
    在一個(gè)畫(huà)冊的背景中,引入各種尺寸的縮略圖來(lái)傳達內容的層次結構。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-introduce_scaleb_large_mdpi.png" alt="" />
    鼓勵在同一個(gè)生態(tài)系統使用多個(gè)容器。

    文字保護

    添加文字保護紗(protection scrims)來(lái)使圖像上的文字顯示清晰易讀。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment1do_large_mdpi.png" alt="" />

    (上圖)可取

    暗紗(dark scrims)理想的透明度應當在 20%-40% 之間,亮紗(light scrims)理想的透明度應當在 40%-60% 之間,都要視具體內容來(lái)定。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment1dont_large_mdpi.png" alt="" />

    (上圖)不可取

    不要過(guò)度用文字保護紗遮擋住圖像內容。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment2do_large_mdpi.png" alt="" />

    (上圖)可取

    對于大一些的風(fēng)景圖,應該在特定的區域內加入文字保護紗, 不要覆蓋住整個(gè)圖像。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment2dont_large_mdpi.png" alt="" />

    (上圖)不可取

    不要過(guò)度覆蓋大圖像。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment3do_large_mdpi.png" alt="" />

    (上圖)可取

    顏色疊加不同于文字保護紗(text-protection scrims),可以用來(lái)作為設計元素。當創(chuàng )造互補的顏色疊加的時(shí)候,要從與其并列的內容中取樣,這樣才能夠產(chǎn)生出和諧一致的色板,從而展現出良好的內容意識。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-typetreatment3dont_large_mdpi.png" alt="" />

    (上圖)不可取

    頭像和縮略圖

    頭像和縮略圖代表實(shí)體或內容,可以是攝影或者概念性的插畫(huà)。 通常來(lái)講,他們是橫置目標(tap targets),可以讓人對事物和內容有一個(gè)初步印象。

    頭像可以用來(lái)表示個(gè)人。對于個(gè)人頭像,要提供個(gè)性化的選項。由于用戶(hù)也可能不個(gè)性化設定自己的頭像,不妨將默認效果設置得令人愉悅一些。當與一個(gè)特定的標志(logo)一起使用時(shí),頭像也可以用來(lái)表示品牌。

    縮略圖暗示著(zhù)更多的信息,讓用戶(hù)一窺其內容,并協(xié)助導航??s略圖讓你能把圖像放在狹小的空間里。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypeavatarsa_large_mdpi.png" alt="" />
    頭像使應用更具個(gè)性化而且占用的空間小。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypeavatarsb_large_mdpi.png" alt="" />
    一個(gè)品牌頭像能夠讓人在一眼之內傳達信息,縮略圖也如此。

    主角圖像(Hero Images)

    主角圖像通常被固定在很明顯的位置,大小比普通大小略大,比如屏幕頂部的橫幅。主角圖像能夠吸引用戶(hù),提供了內容相關(guān)的背景,或加強品牌。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypeheroa_large_mdpi.png" alt="" />

    特征圖像
    特征圖像是風(fēng)格醒目的主要視覺(jué)焦點(diǎn),并且有著(zhù)特異的設計布局。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypeherob_large_mdpi.png" alt="" />

    合成的主角圖像(Integrated hero image)

    合成的主角圖像通常在一個(gè)樣式中包含著(zhù)混雜特異的部分。 這些部分并不能形成首要的視覺(jué)焦點(diǎn)。

    圖集

    圖集圖片(gallery images)通常風(fēng)格醒目,且他們的布局基本相同,比如網(wǎng)格(grid)布局,或是單一的圖像。

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypegallerya_large_mdpi.png" alt="" />
    照片網(wǎng)格

    http://wiki.jikexueyuan.com/project/material-design/images/style-imagery-integration-imagetypegalleryb_large_mdpi.png" alt="" />
    圖集圖片

    原文:Imagery 翻譯:lhyqy5 校對:chenyusi

    上一篇:圖標下一篇:搜索(Search)
    草莓视频在线观看视频6_免费草莓视频_草莓视频在线下载免费官网_草莓视频黄色在线观看