成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

關(guān)于 WebCity 界面的一些想法

fireflow / 3311人閱讀

摘要：這個話題在前邊已經(jīng)寫過一些看豆瓣上關(guān)于一些新的想法中間一些想法醞釀了比較長時間了這次也當(dāng)作是一個整理吧這篇文章在界面設(shè)計方面寫一點配圖也是網(wǎng)上的沒有經(jīng)過加工需要點想象啊由于我沒有足夠的設(shè)計能力相關(guān)技術(shù)也不成熟因此暫時不會有雙十一網(wǎng)頁雙十一沒

這個話題在前邊已經(jīng)寫過一些, 看豆瓣上 關(guān)于 WebCity 一些新的想法
中間一些想法醞釀了比較長時間了, 這次也當(dāng)作是一個整理吧
這篇文章在界面設(shè)計方面寫一點, 配圖也是網(wǎng)上的, 沒有經(jīng)過加工, 需要點想象啊
由于我沒有足夠的設(shè)計能力, 相關(guān)技術(shù)也不成熟, 因此 Demo 暫時不會有

雙十一網(wǎng)頁

雙十一沒有買東西, 網(wǎng)頁沒有細(xì)看, 只是掃了一眼淘寶京東跟蘑菇街
京東加強(qiáng)了導(dǎo)航難看實用, 蘑菇街設(shè)定了區(qū)分明確的板塊風(fēng)格清晰.. 興趣不大
天貓做了個地圖, 這一點我覺得很有意思, 某種程度上也 WebCity 有點像
當(dāng) Web 上內(nèi)容更加豐富, 怎樣呈現(xiàn)才是更友好的? 至少不能用機(jī)械化的列表!
我想這是一個網(wǎng)站朝著類似方向發(fā)展的另一個征兆

界面特點

WebCity 并不是一個只是為了桌面上方便人查找網(wǎng)站而設(shè)想的頁面
特別因為線上社區(qū)大量增多, 桌面電腦大小的屏幕通常是不夠的
WebCity 設(shè)想的場景是地鐵廣告那么大的屏幕, 支持手勢語音直接操作
當(dāng)然出于各種原因, 一定是基于桌面版開發(fā)和兼容的

我設(shè)想達(dá)到的是這樣一些目標(biāo):

索引

現(xiàn)在網(wǎng)站越來越多, 以搜索作為入口是不夠優(yōu)化的, 也不夠友好
我猜想人們喜聞樂見的還是在頁面上平鋪開來, 還有按照分類分開多個頁面
所以簡單理解就是會有非常多網(wǎng)頁, 每個網(wǎng)頁上有很多卡片式的入口同向站外

但是就像人們無論去哪里都先上街一樣, WebCity 當(dāng)中的"通道"的概念必不可少
同時街道的作用也可以標(biāo)記位置, 因此人們不需要記憶各個建筑的經(jīng)緯度
同時街道直接相互聯(lián)通, 作為在建筑直接切換的途徑, 也可以說是引導(dǎo)
因此作為索引, 一方面收錄網(wǎng)站, 一方面建立網(wǎng)站之間的關(guān)聯(lián)

裝飾

上邊是最初覺得適合 WebCity 用的一個樣式, 因為這個排列顯得美觀
美觀的界面才有可能被人用在桌面, 或者廣告, 或者用來裝飾墻體
試想未來城市里到處是屏幕, 也許全都會顯示可交互的廣告
而這樣的界面除了美觀, 也對應(yīng)了人們熟悉的網(wǎng)上一個經(jīng)常光顧的場所
這個網(wǎng)絡(luò)和現(xiàn)實產(chǎn)生關(guān)聯(lián)的感覺, 比起海報或者廣告片也挺有趣的

我傾向于和現(xiàn)在的網(wǎng)站一樣采用卡片的簡單結(jié)構(gòu), 將裝飾放到配色和背景上
這樣的界面易于使用算法進(jìn)行堆積和調(diào)整, 每個單元能相對一致得受到關(guān)注
極端的情況比如廣告顏色太多, 卡片也能通過間距一起降低相互的干擾
而圖中卡片的傾斜, 純粹是為了在視覺上避免單調(diào)

關(guān)聯(lián)

前面已經(jīng)提到了"通道"的概念, 作為一種手段, 展現(xiàn)出網(wǎng)站的關(guān)聯(lián)
用另外一個角度理解, WebCity 就是為網(wǎng)上那么多的網(wǎng)站創(chuàng)造一些關(guān)聯(lián)
假設(shè)人們因為一些需求通過 WebCity 去訪問一些網(wǎng)站極其相關(guān)信息,
那么, 將有巨大的流量, 一方面要更快滿足流量需求, 一方面激發(fā)更多的需求
找個比喻就像植物的根系, 伸向土壤中的養(yǎng)分, 同時讓土壤更活躍

于是這些卡片組成是連貫的整體, 即便切換位置, 也會加有用意的專場動畫
原來展示, 兩個位置是互聯(lián)網(wǎng)地理上相關(guān)聯(lián)的, 那是這一邊, 這是在這一邊
所以卡片之間會留一些入口, 提供游客停下交流的地方, 對, 就像阿爾法城的聊天
當(dāng)然我期待的是還有其他的互動方式, 相對到那時候自然而然會冒出來
而這些是模仿現(xiàn)實中的城市, 一個地方, 就有一個地方人們留下來的氛圍

映射到現(xiàn)實世界

WebCity 上地點也可以和現(xiàn)實中對應(yīng), 比如外灘, 恐怕就能占滿整頁
還記得前邊說的大屏幕, 這些屏幕也許就在對應(yīng)的廣場或者街道出現(xiàn)
虛擬世界總之不會繼續(xù)是漂浮在空中樓閣, 而是跟現(xiàn)實充滿了交點
界面上會隨著出現(xiàn)很多跟地點配合的元素, 在背景配色以及布局上邊

菱格

類似前邊給出的方案, 我嘗試在網(wǎng)上挖更多風(fēng)格類似的素材
中文關(guān)鍵詞"菱格", 英文關(guān)鍵詞 "rhombus pattern", 特地找了些規(guī)則帶邊框的
關(guān)于格子的大小. 有幾個例子能看到, 多樣的尺寸效果更漂亮
考慮我不會設(shè)計圖案, 先從網(wǎng)上的圖案想象一下成為卡片可能達(dá)到的效果

方格

相對來說, 方格的界面規(guī)整很多, 傳達(dá)內(nèi)容更清晰, 但是畫面感較弱
雖然我個人對菱格更喜歡, 但在 Web 的實踐當(dāng)中也許方格經(jīng)常會實用

其他格子的排列

如果允許更隨意的排列, 相信畫面的效果會比菱格還要好很多
只是這樣的話就不能通過程序直接生成和后期處理了
而且這樣的格子有的沒有明確的順序, 進(jìn)行關(guān)聯(lián)時要再額外做考慮
我只是想說, 當(dāng)圖形界面引入更多樣的布局, 真的能非常漂亮

引導(dǎo)線

還有一張圖讓我很有啟發(fā), 就是下面這張, 圖中間有一條分割線
這條線像是一條街把所有的方塊都聯(lián)通起來了, 成了一個整體
這樣用戶訪問時就有了一個極好的引導(dǎo), 而不是隨意地掃視這些方塊
網(wǎng)頁上雖然瀏覽的方式不同, 一條街線還是很能把注意力貫穿起來的

以上零零碎碎都還是想法, 以后想到會繼續(xù)補(bǔ)充

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/8976.html

相關(guān)文章

  • 關(guān)于寫手機(jī)密碼鎖頁面的css技巧

    摘要：先來看看的樣式吧這里值得一提的是我們的定義的是這樣寫的好處是它能適配不同類型的手機(jī)的界面寬度，畢竟現(xiàn)在市面上手機(jī)類型太多，我們不可能為每一款手機(jī)都設(shè)置一個寬度。其次，我們?yōu)槭裁匆x呢這樣可以使我們的頁面充滿整個手機(jī)頁面，不會滾動。 昨天用html5寫了一個手機(jī)密碼鎖界面，中途碰到一些小問題，解決了后總結(jié)了一些小方法來和大家一起分享，如果有不成熟的地方希望大家指出來，大家有更好的方法我...

    Yuanf 評論0 收藏0

  • 關(guān)于寫手機(jī)密碼鎖頁面的css技巧

    摘要：先來看看的樣式吧這里值得一提的是我們的定義的是這樣寫的好處是它能適配不同類型的手機(jī)的界面寬度，畢竟現(xiàn)在市面上手機(jī)類型太多，我們不可能為每一款手機(jī)都設(shè)置一個寬度。其次，我們?yōu)槭裁匆x呢這樣可以使我們的頁面充滿整個手機(jī)頁面，不會滾動。 昨天用html5寫了一個手機(jī)密碼鎖界面，中途碰到一些小問題，解決了后總結(jié)了一些小方法來和大家一起分享，如果有不成熟的地方希望大家指出來，大家有更好的方法我...

    xuhong 評論0 收藏0

  • 關(guān)于單頁面應(yīng)用一些隨想

    摘要：前面不短時間持續(xù)投入了時間在做應(yīng)用架構(gòu)方面的考量一個是冒險進(jìn)行了一次應(yīng)用架構(gòu)的調(diào)整另一個是跟進(jìn)了的進(jìn)展當(dāng)然實際上是同一個事情也許錯過的比收獲的還多一些不過能走到現(xiàn)在也算幸運(yùn)了畢竟單頁面應(yīng)用還面臨很多不成熟之處國慶長假過去不少現(xiàn)在的想法估計會 前面不短時間持續(xù)投入了時間在做 React 應(yīng)用架構(gòu)方面的考量一個是冒險進(jìn)行了一次應(yīng)用架構(gòu)的調(diào)整, 另一個是跟進(jìn)了 Redux 的進(jìn)展當(dāng)然, 實際...

    AaronYuan 評論0 收藏0

  • 關(guān)于 FP 和 OOP 區(qū)別不成熟的想法

    摘要：前面一段時間對和兩者的關(guān)系感到比較困惑我使用的動態(tài)語言揉合太多范式在這一點上很難做出明確透徹的區(qū)分不過經(jīng)過這段時間琢磨相對之前感覺要好一些了有了一些自己的想法后面自己的部分會有不少沒有驗證的地方所以應(yīng)該當(dāng)成感想來看需要說明我的經(jīng)驗來自動態(tài)語 前面一段時間對 FP 和 OOP 兩者的關(guān)系感到比較困惑 我使用的動態(tài)語言揉合太多范式, 在這一點上很難做出明確透徹的區(qū)分 不過經(jīng)過這段時間琢磨相...

    thekingisalwaysluc 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<