幣股設計.

代幣化股票列表的圖示樣式,參考幣安 App:每一檔用公司真實 Logo,放在品牌底色的正圓裡,跟幣種圖示同一套尺寸。抓不到 Logo 時,改用深灰色的代號徽章,結尾一顆橘色句點。

最新:幣股整體優化和資產頁優化在最上面,可以直接點原型。
之前:真實 Logo 已換上。NVDA、AAPL、TSLA、MSFT、GOOGL、META、AMD、MU、AMZN、COIN 都改成公司官方 Logo,照幣安的做法放在品牌底色的圓裡;SPY、BE 找不到可用的圖形標誌,用備用徽章。另外新增「返回鍵移到左邊(全站)」,在頁面最下面。

幣股整體優化

打開「幣股」第一眼就是行情:每一檔的最新價和漲跌幅都在第一屏,像幣安一樣。存款賺 EDOT 移到旁邊的「理財」分頁,裡面分成存入、我的持倉、紀錄。排版統一:手機左右 20、間距 8 的倍數、數字等寬靠右、列表每列 64。下面的原型可以直接點。

可以點的原型

點左邊的手機可以操作:點股票進詳情、排序、切換行情/理財、買入、存入、提領。也可以用下面的按鈕直接看每個狀態。電腦版請開 新分頁(視窗寬度 900 以上會自動變電腦版)。

行情

詳情與買賣

理財

持倉與紀錄

資產頁

現在哪裡怪

  1. 打開看到的不是股票。首頁其實是 USDT 存款,股票行情藏在第二層的「股票」按鈕裡。
  2. 最大的數字不是你的。首頁最大字是平台總存入 1,284,500 USDT,你自己的錢要捲到第三屏。
  3. 一頁太長。首頁有七個區塊、2,440px 長,存入按鈕在第三屏。
  4. 列表看不到漲跌。灰色縮寫方塊當圖示,漲跌是小字,不能排序,沒有美股/ETF 分類,也不知道休市還是開盤。
  5. 詳情頁的按鈕在最底。只有一顆「兌換」,要捲過整張卡片,還被底部導覽蓋住;沒有分買入、賣出。
  6. 存入沒有確認。按下去就要簽兩次錢包(授權+存入),事先沒說;金額是 0 還顯示「0.00 USDT ≈ 0.00 EDOT」。
  7. 持倉按鈕看不懂。不能按的按鈕一樣是灰色,不說幾號解鎖;沒有存入/提領紀錄。
  8. 排隊說不清楚。提領前不知道這次多少馬上到帳、多少要排隊、前面還有多少。
  9. 狀態缺很多。理財讀取失敗沒有畫面;載入只是一行字;未開放、額度已滿都只寫「未開放」。
  10. 用後台的詞。「檔次」「流動性覆蓋率」「EDOT 換算價」「收款多簽錢包」使用者看不懂。
  11. 排版不齊。卡片套卡片,邊距 14/16/20 混用,數字沒對齊,價格和漲跌沒靠右,區塊間距不一。

新的流程

幣股 · 行情(預設)市場狀態、漲幅榜/跌幅榜、全部股票(可排序)
股票詳情價格、走勢 1 天/7 天/30 天、24 小時資料、發行商
買入/賣出金額 → 確認 → 錢包簽名兩步 → 成功
幣股 · 理財我的本金、待領收益、排隊中
存入選方案(期限、月化區間、解鎖日)→ 金額 → 確認 → 簽名 → 成功
我的持倉每筆倒數、解鎖日、領取收益、提領(馬上到帳/排隊說明)
紀錄存入、提領、領取、排隊到帳

打開幣股 · 手機 390

現在(技術的截圖)
改成(示範資料)

股票詳情 · 手機 390

現在(技術的截圖)
改成(示範資料)

買入面板 · 手機 390

現在(技術的截圖)
改成(示範資料)

存入 · 手機 390

現在(技術的截圖)
改成(示範資料)

我的持倉 · 手機 390

現在(技術的截圖)
改成(示範資料)

提領時的排隊說明

行情 · 電腦 1280

現在(技術的截圖)
改成(示範資料)

詳情 · 電腦 1280

現在(技術的截圖)
改成(示範資料)

完整規格(結構、每個畫面和狀態、元件、文案、資料、要問技術的問題):coinstock-redesign-spec.md

資產頁優化(含股票代幣)

有股票代幣就會出現在資產裡:真實 Logo、發行商標籤、數量、價值、24 小時漲跌,還有休市/開盤。幣股存款也一起算進總值。上面的估計總值和走勢圖照之前確認的設計,不動。

我的資產 · 手機 390

現在(技術的截圖)
改成(示範資料)

我的資產 · 電腦 1280

現在(技術的截圖)
改成(示範資料)

載入中、空的、未連接的樣子可以在上面原型的「資產頁」按鈕看。規格:portfolio-redesign-spec.md

真實 Logo

Logo 都是官方原檔(Wikimedia Commons),只裁切,沒有重畫。黑底:Apple、NVIDIA、AMD;紅底:Tesla;白底:Microsoft、Google、Meta、Amazon;深藍底:美光;藍底:Coinbase。

NVDA
AAPL
TSLA
MSFT
GOOGL
META
AMD
MU
AMZN
COIN
真實 Logo 總表

商標聲明:圖示中的 Logo 是各公司的商標,屬於各公司所有,只用來標示對應的股票。來源清單:SOURCES

規格重點

尺寸都對齊 App 現有的幣種圖示,股票和幣種放在同一列時不會大小不一。

40 px幣股列表每一列,取代現在的圓角方塊
48 / 56 px詳情頁標頭,手機 48、電腦 56
32 · 22 · 15 px持倉列表、兌換面板、跑馬燈
0.5 px 細框白色 12% 透明度,畫在圓的內側
留白 20%透明底的 Logo 放在底盤上,四邊各留 20%
先徽章,後 LogoLogo 載入後淡入;抓不到就一直顯示徽章

備用徽章

沒有 Logo 時使用。石墨深灰圓、頂部微光、白色半粗體代號,結尾一顆 #F7931A 句點,呼應句點 E。字數越多字越小,28px 以下只顯示第一個字母。下面是網頁即時畫出來的,不是圖片。

技術用的 SVG 模板:fallback-badge.svg(代號可以替換)

列表 · 手機 390

每一列都換成真實 Logo。最下面的 SPY、BE 沒有圖形標誌,用深灰圓加橘點的備用徽章。返回鍵已經照新規格放在標題上方靠左。

幣股列表手機版

列表 · 電腦 1280

版面和現在一樣,中間一欄 560 寬;圖示尺寸跟手機版相同。

幣股列表電腦版

詳情頁標頭

上面是 NVDA 的真實 Logo,下面是沒有 Logo 時的備用徽章(SPY),手機版都是 48px。

詳情頁標頭

Logo 底盤規則

以後新增的股票照這個規則放。這張用的是示意標誌,不是任何公司的 Logo。

Logo 底盤規則

徽章總表

備用徽章總表

返回鍵移到左邊(全站)

全站的返回鍵都改成同一個:放在標題上方、靠左,跟 E Logo 和大標題的左邊對齊,不會跟跑馬燈或 Logo 擠在一起。外觀是 36px 高的玻璃膠囊「‹ 返回」,手指可以點的範圍是 44px。標題列右邊只留給這一頁的功能按鈕。

左上標題上方,左邊對齊 20px(電腦版對齊內容欄左邊)
36 / 44 px膠囊高 36,點擊範圍 44 以上
一個畫面一個不再出現左右兩個返回

會改到的頁面

頁面現在改成
幣股 · 代幣化股票列表標題右邊「‹ 返回」移到標題上方左邊
幣股 · 個股詳情標題右邊「‹ 返回」移到標題上方左邊
更多底下的子頁:預售、領取空投、鎖倉進度、LP 鎖倉、代幣資訊、多簽狀態、預測市場、幣股首頁左邊,跟標題同一行,只有「‹」小圓移到標題上方,加「返回」兩個字,比較好點
預測市場 · 事件詳情上方有兩個返回(標題的「‹」和「‹ 全部事件」)只留一個:左上「‹ 全部事件」
連接錢包視窗視窗左上「‹」位置不變,只把點擊範圍加大

個股詳情 · 手機 390

現在(技術的截圖)
現在
改成
改成

個股詳情 · 電腦 1280

現在(技術的截圖)
現在
改成
改成

代幣化股票列表 · 手機 390

現在(技術的截圖)
現在
改成
改成

代幣化股票列表 · 電腦 1280

現在(技術的截圖)
現在
改成
改成

預售(更多底下的子頁)· 手機 390

現在(技術的截圖)
現在
改成
改成

預售 · 電腦 1280

現在(技術的截圖)
現在
改成
改成

手機和電腦版的返回鍵大小一樣。「改成」是設計稿,資料用示意數字。