Domovská stránka Prehľadávať Pomoc
Prihlásiť sa
WangKang
/
emoon-backend
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Strom: 99dd8958d3
Branche Tagy
emoon-backend
/
.superpowers
/
brainstorm
/
86383-1780383912
/
content
/
ui-direction-options.html

ui-direction-options.html 9.2 KB
História Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 
  1. <h2>统一入口客户端 UI 方向</h2>
    2. 

  2. <p class="subtitle">三种“AI 健康朋友 + 医院服务办理”的首页与对话布局。请选择最接近你想要的方向。</p>
    3. 

  3. 

  4. <div class="cards">
    5. 

  5.   <div class="card" data-choice="a" onclick="toggleSelect(this)">
    6. 

  6.     <div class="card-image">
    7. 

  7.       <div style="height:420px;border-radius:18px;background:#f7fbfa;border:1px solid #dbe8e4;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#17211f">
    8. 

  8.         <div style="display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:white;border-bottom:1px solid #e8efed">
    9. 

  9.           <div style="font-weight:800;font-size:18px">医梦门诊助手</div>
    10. 

  10.           <div style="font-size:12px;color:#6c7b77">门诊大厅 · 自助服务</div>
    11. 

  11.         </div>
    12. 

  12.         <div style="padding:26px 26px 18px">
    13. 

  13.           <div style="display:flex;gap:18px;align-items:center">
    14. 

  14.             <div style="width:86px;height:86px;border-radius:50%;background:linear-gradient(145deg,#dff7ef,#8ee0c3);display:grid;place-items:center;font-size:38px">+</div>
    15. 

  15.             <div>
    16. 

  16.               <div style="font-size:26px;font-weight:900;line-height:1.25">你好，我来帮你挂号</div>
    17. 

  17.               <div style="margin-top:8px;font-size:14px;color:#667773">可以说症状、科室、医生或时间</div>
    18. 

  18.             </div>
    19. 

  19.           </div>
    20. 

  20.           <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px">
    21. 

  21.             <div style="background:white;border:1px solid #dfecea;border-radius:14px;padding:14px;font-weight:700">我要挂号</div>
    22. 

  22.             <div style="background:white;border:1px solid #dfecea;border-radius:14px;padding:14px;font-weight:700">科室导诊</div>
    23. 

  23.             <div style="background:white;border:1px solid #dfecea;border-radius:14px;padding:14px;font-weight:700">查医生</div>
    24. 

  24.             <div style="background:white;border:1px solid #dfecea;border-radius:14px;padding:14px;font-weight:700">路线引导</div>
    25. 

  25.           </div>
    26. 

  26.           <div style="margin-top:24px;background:white;border:1px solid #dce9e6;border-radius:18px;padding:16px">
    27. 

  27.             <div style="font-size:13px;color:#60706c;margin-bottom:8px">你可以直接说</div>
    28. 

  28.             <div style="font-size:20px;font-weight:800">“我头疼三天，还有点恶心，想挂号”</div>
    29. 

  29.           </div>
    30. 

  30.         </div>
    31. 

  31.         <div style="margin:0 26px 24px;display:flex;background:white;border:1px solid #dce9e6;border-radius:999px;padding:10px 12px;align-items:center;gap:10px">
    32. 

  32.           <div style="flex:1;color:#9aa6a3">输入或语音说明你的需求</div>
    33. 

  33.           <div style="background:#16a37b;color:white;border-radius:999px;padding:9px 16px;font-weight:800">发送</div>
    34. 

  34.         </div>
    35. 

  35.       </div>
    36. 

  36.     </div>
    37. 

  37.     <div class="card-body">
    38. 

  38.       <h3>A. 亲和陪伴式</h3>
    39. 

  39.       <p>大助手形象 + 少量快捷入口 + 大输入框。最像“健康朋友”，适合甲方演示第一眼建立亲近感。</p>
    40. 

  40.     </div>
    41. 

  41.   </div>
    42. 

  42. 

  43.   <div class="card" data-choice="b" onclick="toggleSelect(this)">
    44. 

  44.     <div class="card-image">
    45. 

  45.       <div style="height:420px;border-radius:18px;background:#f5f8ff;border:1px solid #dbe4f5;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#172033">
    46. 

  46.         <div style="display:flex;height:100%">
    47. 

  47.           <div style="width:118px;background:#ffffff;border-right:1px solid #e4ebf5;padding:18px 12px">
    48. 

  48.             <div style="font-weight:900;margin-bottom:24px">医梦</div>
    49. 

  49.             <div style="display:grid;gap:10px;font-size:13px">
    50. 

  50.               <div style="background:#e9f1ff;border-radius:12px;padding:10px;font-weight:800">挂号</div>
    51. 

  51.               <div style="padding:10px;color:#68758a">导诊</div>
    52. 

  52.               <div style="padding:10px;color:#68758a">医生</div>
    53. 

  53.               <div style="padding:10px;color:#68758a">路线</div>
    54. 

  54.             </div>
    55. 

  55.           </div>
    56. 

  56.           <div style="flex:1;padding:18px">
    57. 

  57.             <div style="display:flex;justify-content:space-between;margin-bottom:14px">
    58. 

  58.               <div style="font-size:20px;font-weight:900">门诊统一入口</div>
    59. 

  59.               <div style="font-size:12px;color:#637186">EMOON-KIOSK-001</div>
    60. 

  60.             </div>
    61. 

  61.             <div style="display:grid;grid-template-columns:1.1fr .9fr;gap:14px;height:335px">
    62. 

  62.               <div style="background:white;border:1px solid #dfe7f2;border-radius:16px;padding:16px;display:flex;flex-direction:column">
    63. 

  63.                 <div style="background:#f2f6ff;border-radius:14px;padding:12px;margin-bottom:10px;font-size:14px">您好，请描述症状或选择服务。</div>
    64. 

  64.                 <div style="align-self:flex-end;background:#316ff6;color:white;border-radius:14px;padding:12px;font-size:14px">我想挂神经内科</div>
    65. 

  65.                 <div style="margin-top:auto;border:1px solid #e2e8f2;border-radius:999px;padding:10px;color:#8a96a8">继续输入...</div>
    66. 

  66.               </div>
    67. 

  67.               <div style="display:grid;gap:12px">
    68. 

  68.                 <div style="background:white;border:1px solid #dfe7f2;border-radius:16px;padding:14px">
    69. 

  69.                   <div style="font-size:13px;color:#6c798c">当前流程</div>
    70. 

  70.                   <div style="font-weight:900;margin-top:6px">挂号 · 选择科室</div>
    71. 

  71.                   <div style="height:8px;background:#e8eef7;border-radius:99px;margin-top:14px"><div style="width:38%;height:8px;background:#316ff6;border-radius:99px"></div></div>
    72. 

  72.                 </div>
    73. 

  73.                 <div style="background:white;border:1px solid #dfe7f2;border-radius:16px;padding:14px">
    74. 

  74.                   <div style="font-weight:900;margin-bottom:10px">推荐科室</div>
    75. 

  75.                   <div style="border:1px solid #e4ebf5;border-radius:12px;padding:10px;margin-bottom:8px">神经内科</div>
    76. 

  76.                   <div style="border:1px solid #e4ebf5;border-radius:12px;padding:10px">普通内科</div>
    77. 

  77.                 </div>
    78. 

  78.               </div>
    79. 

  79.             </div>
    80. 

  80.           </div>
    81. 

  81.         </div>
    82. 

  82.       </div>
    83. 

  83.     </div>
    84. 

  84.     <div class="card-body">
    85. 

  85.       <h3>B. 办理工作台式</h3>
    86. 

  86.       <p>左侧服务导航 + 中间对话 + 右侧流程/卡片。更像自助机业务界面，现场办理效率高。</p>
    87. 

  87.     </div>
    88. 

  88.   </div>
    89. 

  89. 

  90.   <div class="card" data-choice="c" onclick="toggleSelect(this)">
    91. 

  91.     <div class="card-image">
    92. 

  92.       <div style="height:420px;border-radius:18px;background:#fbfbf8;border:1px solid #e7e3d8;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#28251f">
    93. 

  93.         <div style="padding:18px 22px;display:flex;justify-content:space-between;align-items:center">
    94. 

  94.           <div>
    95. 

  95.             <div style="font-size:13px;color:#817a6b">医梦未来医院</div>
    96. 

  96.             <div style="font-size:24px;font-weight:900">今天想办理什么？</div>
    97. 

  97.           </div>
    98. 

  98.           <div style="width:54px;height:54px;border-radius:50%;background:#1f9d7a;color:white;display:grid;place-items:center;font-weight:900">AI</div>
    99. 

  99.         </div>
    100. 

  100.         <div style="padding:0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px">
    101. 

  101.           <div style="background:white;border:1px solid #e6e0d5;border-radius:16px;padding:16px;height:86px"><b>智能挂号</b><br><span style="font-size:12px;color:#7b7468">症状导诊选医生</span></div>
    102. 

  102.           <div style="background:white;border:1px solid #e6e0d5;border-radius:16px;padding:16px;height:86px"><b>查科室</b><br><span style="font-size:12px;color:#7b7468">位置与擅长</span></div>
    103. 

  103.           <div style="background:white;border:1px solid #e6e0d5;border-radius:16px;padding:16px;height:86px"><b>查路线</b><br><span style="font-size:12px;color:#7b7468">楼层导航</span></div>
    104. 

  104.         </div>
    105. 

  105.         <div style="margin:18px 22px;background:white;border:1px solid #e6e0d5;border-radius:20px;padding:16px;height:180px">
    106. 

  106.           <div style="display:flex;gap:12px;margin-bottom:12px">
    107. 

  107.             <div style="width:38px;height:38px;border-radius:50%;background:#dff3ea"></div>
    108. 

  108.             <div style="background:#f5f3ed;border-radius:14px;padding:10px 12px;flex:1">可以直接告诉我症状，我会推荐科室，再帮你选择医生和时间。</div>
    109. 

  109.           </div>
    110. 

  110.           <div style="display:flex;gap:8px;flex-wrap:wrap">
    111. 

  111.             <span style="border:1px solid #ded7cb;border-radius:999px;padding:8px 10px;font-size:12px">头疼想挂号</span>
    112. 

  112.             <span style="border:1px solid #ded7cb;border-radius:999px;padding:8px 10px;font-size:12px">明天上午有号吗</span>
    113. 

  113.             <span style="border:1px solid #ded7cb;border-radius:999px;padding:8px 10px;font-size:12px">找李明医生</span>
    114. 

  114.           </div>
    115. 

  115.         </div>
    116. 

  116.         <div style="margin:0 22px;background:#202720;color:white;border-radius:20px;padding:14px;display:flex;justify-content:space-between;align-items:center">
    117. 

  117.           <span>按住说话或输入文字</span>
    118. 

  118.           <span style="background:white;color:#202720;border-radius:999px;padding:8px 14px;font-weight:800">开始</span>
    119. 

  119.         </div>
    120. 

  120.       </div>
    121. 

  121.     </div>
    122. 

  122.     <div class="card-body">
    123. 

  123.       <h3>C. 服务入口式</h3>
    124. 

  124.       <p>先服务卡片，后对话承接。更清晰、更不容易迷路，适合大屏/自助机，但“朋友感”弱一些。</p>
    125. 

  125.     </div>
    126. 

  126.   </div>
    127. 

  127. </div>
    128. 

  128. 

  129. <div class="section">
    130. 

  130.   <h3>建议</h3>
    131. 

  131.   <p>我建议用 <strong>A + B 的混合</strong>：第一屏保持 A 的亲和感，对话进入挂号后切到 B 的右侧流程卡片区。这样既像“AI 健康朋友”，又能支撑真实挂号办理。</p>
    132. 

  132. </div>
    133.