顺丰风格移动端订单详情页设计：红黑配色与物流进度交互优化

By admin, 13 April, 2026

角色

assistant

content

```json
{
"summary": "设计了一款顺丰速运风格的移动端订单详情页。采用顺丰标志性的红黑配色，结合现代化卡片式布局。包含动态物流进度条、寄收件信息流、详细货物参数及倒序排列的完整物流轨迹，并针对移动端优化了交互体验（如单号一键复制、拨打电话等）。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>顺丰订单详情</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;…\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Noto Sans SC', sans-serif;\n background-color: #f7f8fa;\n color: #333;\n }\n .sf-red { color: #E83428; }\n .sf-bg-red { background-color: #E83428; }\n .sf-black { color: #231815; }\n .sf-bg-black { background-color: #231815; }\n \n .timeline-line {\n position: absolute;\n left: 15px;\n top: 24px;\n bottom: 0;\n width: 1px;\n background: #e5e7eb;\n }\n .timeline-item:last-child .timeline-line {\n display: none;\n }\n .status-gradient {\n background: linear-gradient(135deg, #231815 0%, #4a4a4a 100%);\n }\n .card-shadow {\n box-shadow: 0 4px 20px -2px rgba(0,0,0,0.05);\n }\n .copy-btn:active {\n transform: scale(0.9);\n }\n </style>\n</head>\n<body class=\"pb-10\">\n\n \n <div class=\"status-gradient text-white px-6 pt-12 pb-20\">\n <div class=\"flex justify-between items-center mb-4\">\n <div class=\"flex items-center space-x-2\">\n <i class=\"fas fa-check-circle text-2xl text-green-400\"></i>\n <h1 class=\"text-2xl font-bold tracking-tight\">已签收</h1>\n </div>\n <div class=\"bg-white/20 px-3 py-1 rounded-full text-xs backdrop-blur-sm\">\n 感谢选择顺丰速运\n </div>\n </div>\n <p class=\"text-white/80 text-sm\">您的快件已送达，期待再次为您服务</p>\n </div>\n\n \n <div class=\"px-4 -mt-12\">\n \n <div class=\"bg-white rounded-2xl p-5 card-shadow mb-4\">\n <div class=\"flex justify-between items-center border-b border-gray-50 pb-4 mb-4\">\n <div>\n <p class=\"text-gray-400 text-xs mb-1\">顺丰标快</p>\n <div class=\"flex items-center space-x-2\">\n <span class=\"font-mono font-bold text-lg\">SF7444702148192</span>\n <button class=\"copy-btn text-gray-400 hover:text-red-500 transition-colors\">\n <i class=\"far fa-copy\"></i>\n </button>\n </div>\n </div>\n <div class=\"text-right\">\n <p class=\"text-gray-400 text-xs mb-1\">订单编号</p>\n <p class=\"text-gray-600 text-xs font-mono\">AMG2603200013175765</p>\n </div>\n </div>\n\n \n <div class=\"flex justify-between items-center px-2\">\n <div class=\"text-center w-1/3\">\n <p class=\"text-xl font-bold mb-1\">十堰市</p>\n <p class=\"text-gray-500 text-xs\">张三丰</p>\n </div>\n <div class=\"flex-1 flex flex-col items-center px-4\">\n <div class=\"w-full h-[2px] bg-gray-100 relative\">\n <div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-2\">\n <i class=\"fas fa-truck sf-red text-sm\"></i>\n </div>\n </div>\n <span class=\"text-[10px] text-gray-400 mt-2\">运输距离约 1200km</span>\n </div>\n <div class=\"text-center w-1/3\">\n <p class=\"text-xl font-bold mb-1\">襄阳市</p>\n <p class=\"text-gray-500 text-xs\">郭襄阳</p>\n </div>\n </div>\n </div>\n\n \n <div class=\"bg-white rounded-2xl p-5 card-shadow mb-4\">\n <div class=\"space-y-6\">\n <div class=\"flex items-start space-x-4\">\n <div class=\"w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0\">\n <span class=\"text-xs font-bold text-gray-500\">寄</span>\n </div>\n <div>\n <p class=\"font-medium text-sm\">张三丰 <span class=\"text-gray-400 ml-2\">170****5888</span></p>\n <p class=\"text-gray-500 text-xs mt-1\">湖北省十堰市丹江口市公园路155号 (清雅轩保健品专营店)</p>\n </div>\n </div>\n <div class=\"flex items-start space-x-4\">\n <div class=\"w-8 h-8 rounded-full sf-bg-black flex items-center justify-center flex-shrink-0\">\n <span class=\"text-xs font-bold text-white\">收</span>\n </div>\n <div>\n <p class=\"font-medium text-sm\">郭襄阳 <span class=\"text-gray-400 ml-2\">189****8829</span></p>\n <p class=\"text-gray-500 text-xs mt-1\">湖北省襄阳市襄城区环城东路122号</p>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"bg-white rounded-2xl p-5 card-shadow mb-4\">\n <h3 class=\"text-sm font-bold mb-4 flex items-center\">\n <i class=\"fas fa-box-open mr-2 sf-red\"></i> 物品信息\n </h3>\n <div class=\"grid grid-cols-3 gap-4\">\n <div class=\"bg-gray-50 p-3 rounded-xl\">\n <p class=\"text-[10px] text-gray-400 mb-1\">物品名称</p>\n <p class=\"text-sm font-medium\">电子产品</p>\n </div>\n <div class=\"bg-gray-50 p-3 rounded-xl\">\n <p class=\"text-[10px] text-gray-400 mb-1\">计费重量</p>\n <p class=\"text-sm font-medium\">1.5kg</p>\n </div>\n <div class=\"bg-gray-50 p-3 rounded-xl\">\n <p class=\"text-[10px] text-gray-400 mb-1\">物品数量</p>\n <p class=\"text-sm font-medium\">1个</p>\n </div>\n </div>\n <div class=\"mt-3 flex justify-between text-[10px] text-gray-400 px-1\">\n <span>体积: 0.1m³</span>\n <span>尺寸: 10x5x2cm</span>\n <span>声明价值: ¥500</span>\n </div>\n </div>\n\n \n <div class=\"bg-white rounded-2xl p-5 card-shadow\">\n <h3 class=\"text-sm font-bold mb-6 flex justify-between items-center\">\n <span><i class=\"fas fa-route mr-2 sf-red\"></i> 物流轨迹</span>\n <span class=\"text-xs font-normal text-gray-400\">由近到远</span>\n </h3>\n \n <div class=\"relative\">\n \n <div class=\"timeline-item relative pl-10 pb-8\">\n <div class=\"timeline-line\"></div>\n <div class=\"absolute left-0 top-0 w-8 h-8 flex items-center justify-center z-10\">\n <div class=\"w-4 h-4 rounded-full sf-bg-red ring-4 ring-red-100\"></div>\n </div>\n <div>\n <p class=\"sf-red font-bold text-sm mb-1\">已签收</p>\n <p class=\"text-gray-600 text-xs leading-relaxed mb-2\">\n 经客户同意，快件已放在（柏峰珑悦府家门口），如有疑问请电联快递员【杜保奎，电话：<a href=\"tel:18358192592\" class=\"text-blue-500 underline\">18358192592</a>】。\n </p>\n <p class=\"text-gray-400 text-[10px]\">2025-10-03 07:55:56</p>\n </div>\n </div>\n\n \n <div class=\"timeline-item relative pl-10 pb-8\">\n <div class=\"timeline-line\"></div>\n <div class=\"absolute left-0 top-0 w-8 h-8 flex items-center justify-center z-10\">\n <div class=\"w-2 h-2 rounded-full bg-gray-300\"></div>\n </div>\n <div>\n <p class=\"text-gray-800 font-medium text-sm mb-1\">派送中</p>\n <p class=\"text-gray-500 text-xs leading-relaxed mb-2\">\n 快件交给【杜保奎，联系电话：18358192592】，正在派送途中。\n </p>\n <p class=\"text-gray-400 text-[10px]\">2025-10-03 06:58:30</p>\n </div>\n </div>\n\n \n <div class=\"timeline-item relative pl-10 pb-8\">\n <div class=\"timeline-line\"></div>\n <div class=\"absolute left-0 top-0 w-8 h-8 flex items-center justify-center z-10\">\n <div class=\"w-2 h-2 rounded-full bg-gray-300\"></div>\n </div>\n <div>\n <p class=\"text-gray-800 font-medium text-sm mb-1\">运送中</p>\n <p class=\"text-gray-500 text-xs leading-relaxed mb-2\">\n 快件到达【杭州萧山丰瑞南苑店】\n </p>\n <p class=\"text-gray-400 text-[10px]\">2025-10-03 06:42:03</p>\n </div>\n </div>\n\n \n <div class=\"timeline-item relative pl-10\">\n <div class=\"absolute left-0 top-0 w-8 h-8 flex items-center justify-center z-10\">\n <div class=\"w-2 h-2 rounded-full bg-gray-200\"></div>\n </div>\n <div class=\"bg-gray-50 p-3 rounded-lg\">\n <p class=\"text-gray-400 text-xs\">更多 11 条历史轨迹已收起</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-3 flex space-x-3 z-50\">\n <button class=\"flex-1 py-3 rounded-xl border border-gray-200 text-sm font-medium text-gray-600 active:bg-gray-50\">\n <i class=\"fas fa-headset mr-2\"></i> 在线客服\n </button>\n <button class=\"flex-1 py-3 rounded-xl sf-bg-black text-sm font-medium text-white active:opacity-90\">\n <i class=\"fas fa-phone-alt mr-2\"></i> 联系快递员\n </button>\n </div>\n\n <script>\n // 模拟复制功能\n document.querySelector('.copy-btn').addEventListener('click', function() {\n const btn = this;\n const icon = btn.querySelector('i');\n icon.className = 'fas fa-check text-green-500';\n setTimeout(() => {\n icon.className = 'far fa-copy';\n }, 2000);\n });\n </script>\n</body>\n</html>"
},
"next": [
"增加地图实时位置显示",
"添加运费明细展示",
"设计物流异常状态提醒",
"增加评价快递员功能",
"添加电子存根下载"
],
"breakpoint": "xs"
}
```

total_tokens

10760

summary

设计了一款顺丰速运风格的移动端订单详情页。采用顺丰标志性的红黑配色，结合现代化卡片式布局。包含动态物流进度条、寄收件信息流、详细货物参数及倒序排列的完整物流轨迹，并针对移动端优化了交互体验（如单号一键复制、拨打电话等）。

uiParsing

关闭